Created component to edit existing servers

src/servers/EditServer.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes, { serverType } from 'prop-types';
+import { HorizontalFormGroup } from '../utils/HorizontalFormGroup';
+import './CreateServer.scss';
+import Message from '../utils/Message';
+
+const propTypes = {
+  editServer: PropTypes.func,
+  selectServer: PropTypes.func,
+  selectedServer: serverType,
+  match: PropTypes.object,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+};
+
+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 });
+      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 />;
+    }
+
+    if (selectedServer.serverNotFound) {
+      return <ServerError type="not-found" />;
+    }
+
+    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>
+      </div>
+    );
+  };
+
+  EditServerComp.propTypes = propTypes;
+
+  return EditServerComp;
+};

src/servers/reducers/server.js

@@ -52,6 +52,8 @@ export const listServers = ({ listServers, createServers }, { get }) => () => as
 
 export const createServer = ({ createServer }, listServersAction) => pipe(createServer, listServersAction);
 
+export const editServer = ({ editServer }, listServersAction) => pipe(editServer, listServersAction);
+
 export const deleteServer = ({ deleteServer }, listServersAction) => pipe(deleteServer, listServersAction);
 
 export const createServers = ({ createServers }, listServersAction) => pipe(

src/servers/services/ServersService.js

@@ -25,4 +25,14 @@ export default class ServersService {
 
   deleteServer = ({ id }) =>
     this.storage.set(SERVERS_STORAGE_KEY, dissoc(id, this.listServers()));
+
+  editServer = (id, serverData) => {
+    const allServers = this.listServers();
+
+    if (!allServers[id]) {
+      return;
+    }
+
+    this.storage.set(SERVERS_STORAGE_KEY, assoc(id, { ...allServers[id], ...serverData }, allServers));
+  }
 }

src/servers/services/provideServices.js

@@ -3,9 +3,10 @@ import CreateServer from '../CreateServer';
 import ServersDropdown from '../ServersDropdown';
 import DeleteServerModal from '../DeleteServerModal';
 import DeleteServerButton from '../DeleteServerButton';
+import { EditServer } from '../EditServer';
 import ImportServersBtn from '../helpers/ImportServersBtn';
 import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
-import { createServer, createServers, deleteServer, listServers } from '../reducers/server';
+import { createServer, createServers, deleteServer, editServer, listServers } from '../reducers/server';
 import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
 import ServersImporter from './ServersImporter';
@@ -17,6 +18,9 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
   bottle.decorator('CreateServer', connect([ 'selectedServer' ], [ 'createServer', 'resetSelectedServer' ]));
 
+  bottle.serviceFactory('EditServer', EditServer, 'ServerError');
+  bottle.decorator('EditServer', connect([ 'selectedServer' ], [ 'editServer', 'selectServer' ]));
+
   bottle.serviceFactory('ServersDropdown', ServersDropdown, 'ServersExporter');
   bottle.decorator('ServersDropdown', withRouter);
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ], [ 'listServers' ]));
@@ -47,6 +51,7 @@ const provideServices = (bottle, connect, withRouter) => {
   bottle.serviceFactory('createServer', createServer, 'ServersService', 'listServers');
   bottle.serviceFactory('createServers', createServers, 'ServersService', 'listServers');
   bottle.serviceFactory('deleteServer', deleteServer, 'ServersService', 'listServers');
+  bottle.serviceFactory('editServer', editServer, 'ServersService', 'listServers');
   bottle.serviceFactory('listServers', listServers, 'ServersService', 'axios');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);