From 13785c7bebeb04f3264e9f8f38fd810200522f93 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 23 Aug 2021 18:31:40 +0200
Subject: [PATCH] Removed styles from one section that ended up in generic
 component

---
 src/servers/helpers/ServerForm.tsx | 12 ++++++---
 src/utils/FormGroupContainer.tsx   | 41 +++++++++++++++++-------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/servers/helpers/ServerForm.tsx b/src/servers/helpers/ServerForm.tsx
index 78f04113..05684577 100644
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -26,9 +26,15 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   return (
     <form className="server-form" onSubmit={handleSubmit}>
       <SimpleCard className="mb-3" title={title}>
-        <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
-        <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
-        <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" value={name} onChange={setName}>
+          Name
+        </FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" type="url" value={url} onChange={setUrl}>
+          URL
+        </FormGroupContainer>
+        <FormGroupContainer labelClassName="create-server__label" value={apiKey} onChange={setApiKey}>API
+          key
+        </FormGroupContainer>
       </SimpleCard>
 
       <div className="text-right">{children}</div>
diff --git a/src/utils/FormGroupContainer.tsx b/src/utils/FormGroupContainer.tsx
index ce66b4c2..c34e1a92 100644
--- a/src/utils/FormGroupContainer.tsx
+++ b/src/utils/FormGroupContainer.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 
@@ -10,23 +10,28 @@ interface FormGroupContainerProps {
   required?: boolean;
   placeholder?: string;
   className?: string;
+  labelClassName?: string;
 }
 
 export const FormGroupContainer: FC<FormGroupContainerProps> = (
-  { children, value, onChange, id = uuid(), type = 'text', required = true, placeholder, className = '' },
-) => (
-  <div className={`form-group ${className}`}>
-    <label htmlFor={id} className="create-server__label">
-      {children}:
-    </label>
-    <input
-      className="form-control"
-      type={type}
-      id={id}
-      value={value}
-      required={required}
-      placeholder={placeholder}
-      onChange={(e) => onChange(e.target.value)}
-    />
-  </div>
-);
+  { children, value, onChange, id, type, required, placeholder, className, labelClassName },
+) => {
+  const forId = useRef<string>(id ?? uuid());
+
+  return (
+    <div className={`form-group ${className ?? ''}`}>
+      <label htmlFor={forId.current} className={labelClassName ?? ''}>
+        {children}:
+      </label>
+      <input
+        className="form-control"
+        type={type ?? 'text'}
+        id={forId.current}
+        value={value}
+        required={required ?? true}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+};