Linked CreateServer component with redux

package.json

@@ -54,6 +54,7 @@
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.6.2",
+    "uuid": "^3.3.2",
     "webpack": "3.8.1",
     "webpack-dev-server": "2.9.4",
     "webpack-manifest-plugin": "1.3.2",

src/servers/CreateServer.js

@@ -1,10 +1,30 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { createServer } from './reducers/server';
 
 import './CreateServer.scss';
 
-export const CreateServer = () => {
-  const submit = e => e.preventDefault();
+export class CreateServer extends React.Component {
+  state = {
+    name: '',
+    url: '',
+    apiKey: '',
+  };
+
+  render() {
+    const submit = e => {
+      e.preventDefault();
+      this.props.createServer(this.state);
+    };
+    const renderInput = (id, placeholder, type = 'text') =>
+      <input
+        type={type}
+        className="form-control"
+        id={id}
+        placeholder={placeholder}
+        value={this.state[id]}
+        onChange={e => this.setState({ [id]: e.target.value })}
+      />;
 
     return (
       <div className="create-server">
@@ -12,30 +32,31 @@ export const CreateServer = () => {
           <div className="form-group row">
             <label htmlFor="name" className="col-lg-1 col-md-2 col-form-label create-server__label">Name:</label>
             <div className="col-lg-11 col-md-10">
-            <input type="text" className="form-control" id="name" placeholder="Name" />
+              {renderInput('name', 'Name')}
             </div>
           </div>
 
           <div className="form-group row">
             <label htmlFor="url" className="col-lg-1 col-md-2 col-form-label create-server__label">URL:</label>
             <div className="col-lg-11 col-md-10">
-            <input type="url" className="form-control" id="url" placeholder="URL" />
+              {renderInput('url', 'URL', 'url')}
             </div>
           </div>
 
           <div className="form-group row">
             <label htmlFor="apiKey" className="col-lg-1 col-md-2 col-form-label create-server__label">API key:</label>
             <div className="col-lg-11 col-md-10">
-            <input type="text" className="form-control" id="apiKey" placeholder="API key" />
+              {renderInput('apiKey', 'API key')}
             </div>
           </div>
 
           <div className="text-right">
-          <button className="btn btn-primary btn-outline-primary">Create</button>
+            <button className="btn btn-primary btn-outline-primary">Create server</button>
           </div>
         </form>
       </div>
     );
-};
+  }
+}
 
-export default connect()(CreateServer);
+export default connect(null, { createServer })(CreateServer);

src/servers/reducers/server.js

@@ -8,7 +8,8 @@ export default function reducer(state = {}, action) {
     case FETCH_SERVERS:
       return action.servers;
     case CREATE_SERVER:
-      return [ ...state, action.server ];
+      const server = action.server;
+      return { ...state, [server.id]: server };
     default:
       return state;
   }
@@ -20,3 +21,8 @@ export const listServers = () => {
     servers: ServersService.listServers(),
   };
 };
+
+export const createServer = server => {
+  ServersService.createServer(server);
+  return listServers();
+};

src/servers/services/index.js

@@ -1,4 +1,8 @@
 import Storage from '../../utils/Storage';
+import { assoc } from 'ramda';
+import { v4 as uuid } from 'uuid';
+
+const SERVERS_STORAGE_KEY = 'servers';
 
 export class ServersService {
   constructor(storage) {
@@ -6,13 +10,20 @@ export class ServersService {
   }
 
   listServers = () => {
-    return this.storage.get('servers');
+    return this.storage.get(SERVERS_STORAGE_KEY);
   };
 
   findServerById = serverId => {
     const servers = this.listServers();
     return servers[serverId];
-  }
+  };
+
+  createServer = server => {
+    const servers = this.listServers();
+    server = assoc('id', uuid(), server);
+    servers[server.id] = server;
+    this.storage.set(SERVERS_STORAGE_KEY, servers);
+  };
 }
 
 export default new ServersService(Storage);

yarn.lock

@@ -7549,6 +7549,10 @@ uuid@^3.0.0, uuid@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
 
+uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"