From 7a31415fd103c9eaeb396483bb22f2efa7890005 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Fri, 4 Mar 2016 11:58:46 +0100
Subject: [PATCH] Add ConnectForm.

---
 package.json                  |  3 ++-
 src/components/ConnectForm.js | 33 +++++++++++++++++++++++++++++++++
 src/components/SolsticeApp.js | 28 +++++++++++++++++-----------
 src/constants/socket.js       |  4 ++++
 src/containers/App.js         | 10 +---------
 src/reducers/index.js         |  7 +++++--
 src/reducers/socket.js        |  8 +++-----
 7 files changed, 65 insertions(+), 28 deletions(-)
 create mode 100644 src/components/ConnectForm.js
 create mode 100644 src/constants/socket.js

diff --git a/package.json b/package.json
index 49d7820..1ae2ea4 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "react": "0.14.7",
     "react-dom": "0.14.7",
     "react-redux": "4.4.0",
-    "redux": "3.3.1"
+    "redux": "3.3.1",
+    "redux-form": "~4.2.0"
   },
   "devDependencies": {
     "babel-cli": "6.5.1",
diff --git a/src/components/ConnectForm.js b/src/components/ConnectForm.js
new file mode 100644
index 0000000..922aaa2
--- /dev/null
+++ b/src/components/ConnectForm.js
@@ -0,0 +1,33 @@
+import React, {PropTypes} from "react";
+import {reduxForm} from "redux-form";
+
+import { STATE_CLOSED } from "../constants/socket";
+
+
+const ConnectForm = (props) => {
+    const { fields: { url }, handleSubmit, socket, socketActions } = props;
+    const submit = (values, dispatch) => {
+        dispatch(socketActions.open(values.url));
+    };
+    return (
+        <form onSubmit={handleSubmit(submit)}>
+            <input type="url" defaultValue="ws://localhost:2244" {...url}
+                required pattern="wss?://.+"/>
+            <button type="submit" disabled={socket.state !== STATE_CLOSED}>
+                Connect
+            </button>
+        </form>
+    );
+};
+
+ConnectForm.propTypes = {
+    fields: PropTypes.object.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    socket: PropTypes.object.isRequired,
+    socketActions: PropTypes.object.isRequired
+};
+
+export default reduxForm({
+    form: "connect",
+    fields: ["url"]
+})(ConnectForm);
diff --git a/src/components/SolsticeApp.js b/src/components/SolsticeApp.js
index a510802..caca388 100644
--- a/src/components/SolsticeApp.js
+++ b/src/components/SolsticeApp.js
@@ -1,21 +1,27 @@
-import React, {PropTypes} from 'react';
+import React, {PropTypes} from "react";
 
-const App = (props) => {
-    const { onClick, socket } = props;
+import ConnectForm from  "../components/ConnectForm";
+import { STATE_OPEN } from "../constants/socket";
+
+const SolsticeApp = (props) => {
+    const { socket, actions } = props;
+    if (socket.state !== STATE_OPEN ) {
+        return (
+            <ConnectForm socket={socket}
+                socketActions={actions.socketActions}/>
+        );
+    }
     return (
         <div>
             <h1>Solstice web UI</h1>
-            <div>Socket state: {socket.state}</div>
-            <button onClick={onClick}>
-                Connect
-            </button>
+            <div>Socket open</div>
         </div>
     );
 };
 
-App.propTypes = {
-    onClick: PropTypes.func.isRequired,
-    socket: PropTypes.object.isRequired
+SolsticeApp.propTypes = {
+    socket: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired
 };
 
-export default App;
+export default SolsticeApp;
diff --git a/src/constants/socket.js b/src/constants/socket.js
new file mode 100644
index 0000000..1e4b9bb
--- /dev/null
+++ b/src/constants/socket.js
@@ -0,0 +1,4 @@
+export const STATE_OPENING = 0;
+export const STATE_OPEN = 1;
+export const STATE_CLOSING = 2;
+export const STATE_CLOSED = 3;
diff --git a/src/containers/App.js b/src/containers/App.js
index 80735b3..9c25550 100644
--- a/src/containers/App.js
+++ b/src/containers/App.js
@@ -9,15 +9,7 @@ import socketActionsFactory from "../actions/socketActionsFactory";
 import socketHandlerActions from "../actions/socketHandlerActions";
 import SocketClient from "../utils/SocketClient";
 
-const App = (props) => {
-    const onClick = (event) => {
-        const url = "ws://localhost:2244";
-        props.actions.socketActions.open(url);
-    };
-    return (
-        <SolsticeApp socket={props.socket} onClick={onClick} />
-    );
-};
+const App = (props) => (<SolsticeApp {...props} />);
 
 App.propTypes = {
     actions: PropTypes.object.isRequired,
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 41356b0..046f269 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,8 +1,11 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
+import { reducer as form } from "redux-form";
+
 import socket from "./socket";
 
 const rootReducer = combineReducers({
-    socket
+    socket,
+    form
 });
 
 export default rootReducer;
diff --git a/src/reducers/socket.js b/src/reducers/socket.js
index 0986956..18741ee 100644
--- a/src/reducers/socket.js
+++ b/src/reducers/socket.js
@@ -1,11 +1,9 @@
 import objectAssign from "object-assign";
 
 import * as types from "../constants/ActionTypes";
-
-const STATE_OPENING = 0;
-const STATE_OPEN = 1;
-const STATE_CLOSING = 2;
-const STATE_CLOSED = 3;
+import {
+    STATE_OPENING, STATE_OPEN, STATE_CLOSING, STATE_CLOSED
+} from "../constants/socket.js";
 
 const initialState = {
     state: STATE_CLOSED,