Created common component that can be used both for create and edit servers

src/servers/CreateServer.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
-import { HorizontalFormGroup } from '../utils/HorizontalFormGroup';
 import './CreateServer.scss';
+import { ServerForm } from './helpers/ServerForm';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 const propTypes = {
@@ -15,15 +15,10 @@ const propTypes = {
 
 const CreateServer = (ImportServersBtn, useStateFlagTimeout) => {
   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 handleSubmit = (e) => {
-      e.preventDefault();
-
+    const handleSubmit = (serverData) => {
       const id = uuid();
-      const server = { id, name, url, apiKey };
+      const server = { id, ...serverData };
 
       createServer(server);
       push(`/server/${id}/list-short-urls/1`);
@@ -35,26 +30,20 @@ const CreateServer = (ImportServersBtn, useStateFlagTimeout) => {
 
     return (
       <div className="create-server">
-        <form onSubmit={handleSubmit}>
-          <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
-          <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
-          <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
+        <ServerForm onSubmit={handleSubmit}>
+          <ImportServersBtn onImport={setServersImported} />
+          <button className="btn btn-outline-primary">Create server</button>
+        </ServerForm>
 
-          <div className="text-right">
-            <ImportServersBtn onImport={setServersImported} />
-            <button className="btn btn-outline-primary">Create server</button>
-          </div>
-
-          {serversImported && (
-            <div className="row create-server__import-success-msg">
-              <div className="col-md-10 offset-md-1">
-                <div className="p-2 mt-3 bg-main text-white text-center">
-                  Servers properly imported. You can now select one from the list :)
-                </div>
+        {serversImported && (
+          <div className="row create-server__import-success-msg">
+            <div className="col-md-10 offset-md-1">
+              <div className="p-2 mt-3 bg-main text-white text-center">
+                Servers properly imported. You can now select one from the list :)
               </div>
             </div>
-          )}
-        </form>
+          </div>
+        )}
       </div>
     );
   };

src/servers/helpers/ServerForm.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
+
+const propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  initialValues: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    apiKey: PropTypes.string.isRequired,
+  }),
+  children: PropTypes.node.isRequired,
+};
+
+export const ServerForm = ({ onSubmit, initialValues, children }) => {
+  const [ name, setName ] = useState('');
+  const [ url, setUrl ] = useState('');
+  const [ apiKey, setApiKey ] = useState('');
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({ name, url, apiKey });
+  };
+
+  useEffect(() => {
+    initialValues && setName(initialValues.name);
+    initialValues && setUrl(initialValues.url);
+    initialValues && setApiKey(initialValues.apiKey);
+  }, [ initialValues ]);
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
+      <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
+      <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
+
+      <div className="text-right">{children}</div>
+    </form>
+  );
+};
+
+ServerForm.propTypes = propTypes;