From c23c65d386b67ca6b94da9b12c5066f88567c9d5 Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Tue, 18 Sep 2018 20:13:22 +1000
Subject: [PATCH] redux

---
 client/.babelrc                            |  9 +++
 client/.eslintrc.js                        | 47 +++++++-----
 client/index.html                          | 78 +-------------------
 client/index.js                            | 83 +---------------------
 client/package.json                        | 11 ++-
 client/src/actions.jsx                     |  3 +
 client/src/components/status.component.jsx |  6 ++
 client/src/components/status.container.js  | 13 ++++
 client/src/main.jsx                        | 36 ++++++++++
 client/src/reducers.jsx                    | 15 ++++
 client/src/socket.jsx                      | 83 ++++++++++++++++++++++
 11 files changed, 204 insertions(+), 180 deletions(-)
 create mode 100644 client/.babelrc
 create mode 100644 client/src/actions.jsx
 create mode 100644 client/src/components/status.component.jsx
 create mode 100644 client/src/components/status.container.js
 create mode 100644 client/src/main.jsx
 create mode 100644 client/src/reducers.jsx
 create mode 100644 client/src/socket.jsx
diff --git a/client/.babelrc b/client/.babelrc
new file mode 100644
index 00000000..56b2dd02
--- /dev/null
+++ b/client/.babelrc
@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ],
+  "plugins": [
+    ["transform-react-jsx", { "pragma":"preact.h" }]
+  ]
+}
\ No newline at end of file
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index dc863ba8..9b773225 100755
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -1,21 +1,30 @@
 module.exports = {
-  extends: 'airbnb-base',
-  rules: {
-    // prevents stupid complaints a la
-    // (req) {
-    //   req.something = x;
-    // }
-    'no-param-reassign': [2, {
-      props: false,
-    }],
-    'no-multi-spaces': [0],
-    'max-len': ['error', 120],
-    'import/no-extraneous-dependencies': [0],
-    'prefer-arrow-callback': [0],
-    'arrow-body-style': [0],
-    'no-console': [0],
-    // i like loops
-    'no-plusplus': [0],
-    'no-await-in-loop': [0],
-  },
+  extends: 'airbnb',
+    env: {
+        "browser": true,
+        "node": true
+    },
+    rules: {
+        // prevents stupid complaints a la
+        // (req) {
+        //   req.something = x;
+        // }
+        'no-param-reassign': [2, { props: false }],
+        'no-multi-spaces': [0],
+        'max-len': ['error', 120],
+        'import/no-extraneous-dependencies': [0],
+        'prefer-arrow-callback': [0],
+        'arrow-body-style': [0],
+        'no-console': [0],
+        // i like loops
+        'no-plusplus': [0],
+        'no-await-in-loop': [0],
+        'indent': ['error', 4],
+
+        // for preact
+        "react/react-in-jsx-scope": [0],
+        "react/jsx-indent": [2, 4],
+        "react/jsx-uses-react": 1,
+        "react/jsx-uses-vars": 1
+    },
 };
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 5e29732d..10683ea8 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <section class="hero is-info is-large">
-
     <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,82 +9,7 @@
   </head>
   <body>
   </body>
-
-  <div class="hero-head">
-    <nav class="navbar">
-      <div class="container">
-        <div class="navbar-brand">
-          <span class="navbar-burger burger" data-target="navbarMenuHeroB">
-            <span></span>
-            <span></span>
-            <span></span>
-          </span>
-        </div>
-        <div id="navbarMenuHeroB" class="navbar-menu">
-          <div class="navbar-end">
-            <a class="navbar-item is-active">
-              Home
-            </a>
-            <a class="navbar-item">
-              Store
-            </a>
-            <a class="navbar-item">
-              FAQ
-            </a>
-            <span class="navbar-item">
-              <a class="button is-info is-inverted">
-                <span class="icon">
-                  <i class="fab fa-github"></i>
-                </span>
-                <span>Download</span>
-              </a>
-            </span>
-          </div>
-        </div>
-      </div>
-    </nav>
-  </div>
-
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <p class="title">
-        Welcome to Cryps
-      </p>
-      <p class="subtitle">
-        The worlds best pray to win game
-      </p>
-    </div>
-  </div>
-
-  <div id='fizzytext'></div>
-
-  <div class="hero-foot">
-    <nav class="tabs is-boxed is-fullwidth">
-      <div class="container">
-        <ul>
-          <li class="is-active">
-            <a>Management</a>
-          </li>
-          <li>
-            <a>Inventory</a>
-          </li>
-          <li>
-            <a>Missions</a>
-          </li>
-          <li>
-            <a>Battles</a>
-          </li>
-          <li>
-            <a>Market</a>
-          </li>
-        </ul>
-      </div>
-    </nav>
-  </div>
-</section>
-
-
-<script src="./index.js"></script>
+  <script src="./index.js"></script>
 </html>
 
 <!--
diff --git a/client/index.js b/client/index.js
index c91ba756..0787daa8 100755
--- a/client/index.js
+++ b/client/index.js
@@ -1,81 +1,2 @@
-const { toast } = require('bulma-toast');
-const { h, render } = require('preact');
-
-const fizzyText = require('./lib/fizzy-text');
-
-fizzyText('cryps');
-
-const cbor = require('borc');
-const assert = require('assert');
-// Create WebSocket connection.
-const ws = new WebSocket('ws://localhost:40000');
-ws.binaryType = 'arraybuffer';
-
-// handle account auth within the socket itself
-// https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html
-let account = null;
-
-function error_toast(err) {
-    console.error(err);
-    return toast({
-        message: err,
-        type: "is-warning",
-        duration: 5000,
-    });
-}
-
-function account_login(res) {
-    [struct, account] = res;
-
-    account = account;
-
-    console.log(account);
-    return send({ method: 'cryp_spawn', params: { name: 'drake' }});
-}
-
-function new_cryp(cryp) {
-    console.log('got a new cryp');
-}
-
-const handlers = {
-    'cryp_spawn': new_cryp,
-    'account_login': account_login,
-    'account_create': account_login,
-};
-
-function on_message(event) {
-    // decode binary msg from server
-    const blob = new Uint8Array(event.data);
-    const res = cbor.decode(blob);
-    console.log(res);
-
-    // check for error and split into response type and data
-    if (res.err) return error_toast(res.err);
-    const { method, params } = res;
-    return handlers[method](params);
-}
-
-function send(msg) {
-    msg.token = account && account.token;
-    ws.send(cbor.encode(msg));
-}
-
-// Connection opened
-ws.addEventListener('open', function (event) {
-    // send({ method: 'account_create', params: { name: 'ntr', password: 'grepgrepgrep' }});
-    send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' }});
-});
-
-// Listen for messages
-ws.addEventListener('message', on_message);
-
-ws.addEventListener('error', function (event) {
-    console.error('WebSocket error', event);
-    account = null;
-});
-
-ws.addEventListener('close', function (event) {
-    console.error('WebSocket closed', event);
-    account = null;
-});
-
+// kick it off
+require('./src/main');
diff --git a/client/package.json b/client/package.json
index 6e3a0292..a0766172 100755
--- a/client/package.json
+++ b/client/package.json
@@ -10,16 +10,21 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
+    "babel-preset-react": "^6.24.1",
     "borc": "^2.0.3",
     "bulma-toast": "^1.2.0",
     "docco": "^0.7.0",
-    "eslint": "^3.18.0",
-    "eslint-config-airbnb-base": "^11.1.1",
-    "eslint-plugin-import": "^2.2.0",
     "jest": "^18.0.0",
     "parcel": "^1.9.7",
     "preact": "^8.3.1",
     "preact-redux": "^2.0.3",
     "redux": "^4.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^5.6.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.1"
   }
 }
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
new file mode 100644
index 00000000..99bcacc0
--- /dev/null
+++ b/client/src/actions.jsx
@@ -0,0 +1,3 @@
+export const SET_ACCOUNT = 'SET_ACCOUNT';
+
+export const setAccount = (value) => ({ type: SET_ACCOUNT, value });
diff --git a/client/src/components/status.component.jsx b/client/src/components/status.component.jsx
new file mode 100644
index 00000000..76c2b9a0
--- /dev/null
+++ b/client/src/components/status.component.jsx
@@ -0,0 +1,6 @@
+const preact = require('preact');
+
+module.exports = ({ account }) => {
+    if (account) return <div>{JSON.stringify(account)}</div>;
+    return <div>not logged in</div>;
+};
diff --git a/client/src/components/status.container.js b/client/src/components/status.container.js
new file mode 100644
index 00000000..177ef91f
--- /dev/null
+++ b/client/src/components/status.container.js
@@ -0,0 +1,13 @@
+const { connect } = require('preact-redux');
+
+const Status = require('./status.component');
+
+// Add the incident from state as a property
+const addState = connect(
+    state => ({ account: state.account }),
+    // dispatch => ({
+    //     closeDetails() { dispatch(openIncident()); },
+    // }),
+);
+
+module.exports = addState(Status);
diff --git a/client/src/main.jsx b/client/src/main.jsx
new file mode 100644
index 00000000..8bc56a00
--- /dev/null
+++ b/client/src/main.jsx
@@ -0,0 +1,36 @@
+const preact = require('preact');
+const { Provider } = require('preact-redux');
+const { createStore, combineReducers } = require('redux');
+
+const reducers = require('./reducers');
+const fizzyText = require('../lib/fizzy-text');
+const createSocket = require('./socket');
+
+const StatusContainer = require('./components/status.container');
+
+const ws = createSocket();
+
+const store = createStore(
+    combineReducers({
+        account: reducers.accountReducer,
+    }),
+);
+
+store.subscribe(() => console.log(store.getState()));
+
+const Cryps = () => (
+    <section>
+        <div id="fizzytext" />
+        <StatusContainer />
+    </section>
+);
+
+const Main = () => (
+    <Provider store={store}>
+        <Cryps />
+    </Provider>
+);
+
+preact.render(<Main />, document.body);
+
+fizzyText('cryps');
diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx
new file mode 100644
index 00000000..72a483d7
--- /dev/null
+++ b/client/src/reducers.jsx
@@ -0,0 +1,15 @@
+const { SET_ACCOUNT } = require('./actions');
+
+const defaultAccount = {};
+function accountReducer(state = defaultAccount, action) {
+    switch (action.type) {
+    case SET_ACCOUNT:
+        return action.value;
+    default:
+        return state;
+    }
+}
+
+module.exports = {
+    accountReducer,
+};
diff --git a/client/src/socket.jsx b/client/src/socket.jsx
new file mode 100644
index 00000000..5dc2cbb9
--- /dev/null
+++ b/client/src/socket.jsx
@@ -0,0 +1,83 @@
+const { toast } = require('bulma-toast');
+
+const actions = require('./actions');
+
+const cbor = require('borc');
+
+function errorToast(err) {
+    console.error(err);
+    return toast({
+        message: err,
+        type: 'is-warning',
+        duration: 5000,
+    });
+}
+
+// Create WebSocket connection.
+// requires the redux store in order to push updates
+// to components
+function createSocket(store) {
+    const ws = new WebSocket('ws://localhost:40000');
+    ws.binaryType = 'arraybuffer';
+
+    // handle account auth within the socket itself
+    // https://www.christian-schneider.net/CrossSiteWebSocketHijacking.html
+    let account = null;
+
+    function send(msg) {
+        msg.token = account && account.token;
+        ws.send(cbor.encode(msg));
+    }
+
+    function accountLogin(res) {
+        const [struct, login] = res;
+
+        account = login;
+        store.dispatch(actions.setAccount(login));
+        console.log(account);
+        return send({ method: 'cryp_spawn', params: { name: 'drake' }});
+    }
+
+    function crypSpawn(cryp) {
+        console.log('got a new cryp', cryp);
+    }
+
+    const handlers = {
+        cryp_spawn: crypSpawn,
+        account_login: accountLogin,
+        account_create: accountLogin,
+    };
+
+    function onMessage(event) {
+        // decode binary msg from server
+        const blob = new Uint8Array(event.data);
+        const res = cbor.decode(blob);
+        console.log(res);
+
+        // check for error and split into response type and data
+        if (res.err) return errorToast(res.err);
+        const { method, params } = res;
+        return handlers[method](params);
+    }
+
+    // Connection opened
+    ws.addEventListener('open', function wsOpen(event) {
+        // send({ method: 'account_create', params: { name: 'ntr', password: 'grepgrepgrep' }});
+        send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+    });
+
+    // Listen for messages
+    ws.addEventListener('message', onMessage);
+
+    ws.addEventListener('error', function wsError(event) {
+        console.error('WebSocket error', event);
+        account = null;
+    });
+
+    ws.addEventListener('close', function wsClose(event) {
+        console.error('WebSocket closed', event);
+        account = null;
+    });
+}
+
+module.exports = createSocket;
