From 5d8af1a0e57fbda2dc4c7aa10d5393ad5ad1de6c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 15 Mar 2020 12:02:19 +0100
Subject: [PATCH] Simplified EditServer component by wrapping ServerForm

---
 src/servers/EditServer.js | 30 +++++++-----------------------
 1 file changed, 7 insertions(+), 23 deletions(-)

diff --git a/src/servers/EditServer.js b/src/servers/EditServer.js
index f3adbc58..19fab6f4 100644
--- a/src/servers/EditServer.js
+++ b/src/servers/EditServer.js
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes, { serverType } from 'prop-types';
-import { HorizontalFormGroup } from '../utils/HorizontalFormGroup';
 import './CreateServer.scss';
 import Message from '../utils/Message';
+import { ServerForm } from './helpers/ServerForm';
 
 const propTypes = {
   editServer: PropTypes.func,
@@ -16,25 +16,15 @@ const propTypes = {
 
 export const EditServer = (ServerError) => {
   const EditServerComp = ({ editServer, selectServer, selectedServer, match, history: { push } }) => {
-    const [ name, setName ] = useState('');
-    const [ url, setUrl ] = useState('');
-    const [ apiKey, setApiKey ] = useState('');
     const { params: { serverId } } = match;
-    const handleSubmit = (e) => {
-      e.preventDefault();
-
-      editServer(serverId, { name, url, apiKey });
+    const handleSubmit = (serverData) => {
+      editServer(serverId, serverData);
       push(`/server/${serverId}/list-short-urls/1`);
     };
 
     useEffect(() => {
       selectServer(serverId);
     }, [ serverId ]);
-    useEffect(() => {
-      selectedServer && setName(selectedServer.name);
-      selectedServer && setUrl(selectedServer.url);
-      selectedServer && setApiKey(selectedServer.apiKey);
-    }, [ selectedServer ]);
 
     if (!selectedServer) {
       return <Message loading />;
@@ -46,15 +36,9 @@ export const EditServer = (ServerError) => {
 
     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>
-
-          <div className="text-right">
-            <button className="btn btn-outline-primary">Save</button>
-          </div>
-        </form>
+        <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
+          <button className="btn btn-outline-primary">Save</button>
+        </ServerForm>
       </div>
     );
   };