redux

client/src/actions.jsx

@@ -0,0 +1,3 @@
+export const SET_ACCOUNT = 'SET_ACCOUNT';
+
+export const setAccount = (value) => ({ type: SET_ACCOUNT, value });

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>;
+};

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);

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');

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,
+};

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;