From ebb94a17ab67a1ae31ba086929106e8fd2914b23 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 16 Jul 2018 18:25:37 +0200
Subject: [PATCH] Linked CreateServer component with redux

---
 package.json                   |  1 +
 src/servers/CreateServer.js    | 77 +++++++++++++++++++++-------------
 src/servers/reducers/server.js |  8 +++-
 src/servers/services/index.js  | 15 ++++++-
 yarn.lock                      |  4 ++
 5 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index df7f336f..c3c66806 100644
--- a/package.json
+++ b/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",
diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js
index bdc98240..7782d34f 100644
--- a/src/servers/CreateServer.js
+++ b/src/servers/CreateServer.js
@@ -1,41 +1,62 @@
 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: '',
+  };
 
-  return (
-    <div className="create-server">
-      <form onSubmit={submit}>
-        <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" />
+  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">
+        <form onSubmit={submit}>
+          <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">
+              {renderInput('name', 'Name')}
+            </div>
           </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" />
+          <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">
+              {renderInput('url', 'URL', 'url')}
+            </div>
           </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" />
+          <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">
+              {renderInput('apiKey', 'API key')}
+            </div>
           </div>
-        </div>
 
-        <div className="text-right">
-          <button className="btn btn-primary btn-outline-primary">Create</button>
-        </div>
-      </form>
-    </div>
-  );
-};
+          <div className="text-right">
+            <button className="btn btn-primary btn-outline-primary">Create server</button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
 
-export default connect()(CreateServer);
+export default connect(null, { createServer })(CreateServer);
diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js
index 1dc4ca87..d93e4d99 100644
--- a/src/servers/reducers/server.js
+++ b/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();
+};
diff --git a/src/servers/services/index.js b/src/servers/services/index.js
index 60dd30e0..2125fad0 100644
--- a/src/servers/services/index.js
+++ b/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);
diff --git a/yarn.lock b/yarn.lock
index f6c25705..68d4a393 100644
--- a/yarn.lock
+++ b/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"