Extracted logic to render horizontal form groups to their own components

src/servers/CreateServer.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
+import { HorizontalFormGroup } from '../utils/HorizontalFormGroup';
 import './CreateServer.scss';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
@@ -13,12 +14,11 @@ const propTypes = {
 };
 
 const CreateServer = (ImportServersBtn, useStateFlagTimeout) => {
-  const CreateServerComp = ({ createServer, history, resetSelectedServer }) => {
+  const CreateServerComp = ({ createServer, history: { push }, resetSelectedServer }) => {
     const [ name, setName ] = useState('');
     const [ url, setUrl ] = useState('');
     const [ apiKey, setApiKey ] = useState('');
     const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
-    const { push } = history;
     const handleSubmit = (e) => {
       e.preventDefault();
 
@@ -28,35 +28,17 @@ const CreateServer = (ImportServersBtn, useStateFlagTimeout) => {
       createServer(server);
       push(`/server/${id}/list-short-urls/1`);
     };
-    const renderInputGroup = (id, placeholder, value, setState, type = 'text') => (
-      <div className="form-group row">
-        <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
-          {placeholder}:
-        </label>
-        <div className="col-lg-11 col-md-10">
-          <input
-            type={type}
-            className="form-control"
-            id={id}
-            placeholder={placeholder}
-            value={value}
-            required
-            onChange={(e) => setState(e.target.value)}
-          />
-        </div>
-      </div>
-    );
 
     useEffect(() => {
-      resetSelectedServer(); // FIXME Only when no serverId exists
+      resetSelectedServer();
     }, []);
 
     return (
       <div className="create-server">
         <form onSubmit={handleSubmit}>
-          {renderInputGroup('name', 'Name', name, setName)}
+          <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
-          {renderInputGroup('url', 'URL', url, setUrl, 'url')}
+          <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
-          {renderInputGroup('apiKey', 'API key', apiKey, setApiKey)}
+          <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
 
           <div className="text-right">
             <ImportServersBtn onImport={setServersImported} />

src/utils/HorizontalFormGroup.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  type: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+export const HorizontalFormGroup = ({ children, value, onChange, id = uuid(), type = 'text', required = true }) => (
+  <div className="form-group row">
+    <label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label">
+      {children}:
+    </label>
+    <div className="col-lg-11 col-md-10">
+      <input
+        className="form-control"
+        type={type}
+        id={id}
+        value={value}
+        required={required}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  </div>
+);
+
+HorizontalFormGroup.propTypes = propTypes;

test/servers/CreateServer.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import createServerConstruct from '../../src/servers/CreateServer';
+import { HorizontalFormGroup } from '../../src/utils/HorizontalFormGroup';
 
 describe('<CreateServer />', () => {
   let wrapper;
@@ -28,9 +29,7 @@ describe('<CreateServer />', () => {
   it('renders components', () => {
     const wrapper = createWrapper();
 
-    expect(wrapper.find('#name')).toHaveLength(1);
+    expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
-    expect(wrapper.find('#url')).toHaveLength(1);
-    expect(wrapper.find('#apiKey')).toHaveLength(1);
     expect(wrapper.find(ImportServersBtn)).toHaveLength(1);
     expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(0);
   });