From 7c63aa3708a09b997575cb85cb6dfaaa41082fab Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 21:12:59 -0700
Subject: web: reduxify WebSocket

---
 web/src/js/app.js               | 10 +++++-----
 web/src/js/components/header.js | 24 ++++++++++++------------
 web/src/js/connection.js        | 16 +++++++++-------
 web/src/js/ducks/flows.js       | 15 +++++++++++++++
 web/src/js/ducks/index.js       |  8 ++++++--
 web/src/js/ducks/websocket.js   | 34 ++++++++++++++++++++++++++++++++++
 6 files changed, 81 insertions(+), 26 deletions(-)
 create mode 100644 web/src/js/ducks/flows.js
 create mode 100644 web/src/js/ducks/websocket.js

(limited to 'web/src')

diff --git a/web/src/js/app.js b/web/src/js/app.js
index 5b5d1fc8..f631b2c5 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -3,7 +3,6 @@ import {render} from 'react-dom'
 import {createStore} from 'redux'
 import {Provider} from 'react-redux'
 
-import $ from "jquery"
 import Connection from "./connection"
 import {App} from "./components/proxyapp.js"
 import {EventLogActions} from "./actions.js"
@@ -11,8 +10,8 @@ import rootReducer from './ducks/index';
 
 let store = createStore(rootReducer);
 
-$(function () {
-    window.ws = new Connection("/updates");
+document.addEventListener('DOMContentLoaded', () => {
+    window.ws = new Connection("/updates", store.dispatch);
 
     window.onerror = function (msg) {
         EventLogActions.add_event(msg);
@@ -20,6 +19,7 @@ $(function () {
 
     render(
         <Provider store={store}>{App}</Provider>,
-        document.getElementById("mitmproxy"));
-});
+        document.getElementById("mitmproxy")
+    );
 
+});
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 76c4744a..e329b3f5 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -243,29 +243,29 @@ export const OptionMenu = (props) => {
     return (
         <div>
             <div className="menu-row">
-                <ToggleButton name="showhost"
+                <ToggleButton text="showhost"
                               checked={showhost}
-                              onToggleChanged={() => SettingsActions.update({showhost: !showhost})}
+                              onToggle={() => SettingsActions.update({showhost: !showhost})}
                 />
-                <ToggleButton name="no_upstream_cert"
+                <ToggleButton text="no_upstream_cert"
                               checked={no_upstream_cert}
-                              onToggleChanged={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
+                              onToggle={() => SettingsActions.update({no_upstream_cert: !no_upstream_cert})}
                 />
-                <ToggleButton name="rawtcp"
+                <ToggleButton text="rawtcp"
                               checked={rawtcp}
-                              onToggleChanged={() => SettingsActions.update({rawtcp: !rawtcp})}
+                              onToggle={() => SettingsActions.update({rawtcp: !rawtcp})}
                 />
-                <ToggleButton name="http2"
+                <ToggleButton text="http2"
                               checked={http2}
-                              onToggleChanged={() => SettingsActions.update({http2: !http2})}
+                              onToggle={() => SettingsActions.update({http2: !http2})}
                 />
-                <ToggleButton name="anticache"
+                <ToggleButton text="anticache"
                               checked={anticache}
-                              onToggleChanged={() => SettingsActions.update({anticache: !anticache})}
+                              onToggle={() => SettingsActions.update({anticache: !anticache})}
                 />
-                <ToggleButton name="anticomp"
+                <ToggleButton text="anticomp"
                               checked={anticomp}
-                              onToggleChanged={() => SettingsActions.update({anticomp: !anticomp})}
+                              onToggle={() => SettingsActions.update({anticomp: !anticomp})}
                 />
                 <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
                     checked={Boolean(stickyauth)}
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
index 6177938e..71d20f46 100644
--- a/web/src/js/connection.js
+++ b/web/src/js/connection.js
@@ -1,19 +1,22 @@
 
 import {ConnectionActions, EventLogActions} from "./actions.js";
 import {AppDispatcher} from "./dispatcher.js";
+import * as websocketActions from "./ducks/websocket"
 
-function Connection(url) {
+export default function Connection(url, dispatch) {
     if (url[0] === "/") {
         url = location.origin.replace("http", "ws") + url;
     }
 
     var ws = new WebSocket(url);
     ws.onopen = function () {
+        dispatch(websocketActions.connected());
         ConnectionActions.open();
     };
-    ws.onmessage = function (message) {
-        var m = JSON.parse(message.data);
-        AppDispatcher.dispatchServerAction(m);
+    ws.onmessage = function (m) {
+        var message = JSON.parse(m.data);
+        AppDispatcher.dispatchServerAction(message);
+        dispatch(websocketActions.receiveMessage(message));
     };
     ws.onerror = function () {
         ConnectionActions.error();
@@ -22,8 +25,7 @@ function Connection(url) {
     ws.onclose = function () {
         ConnectionActions.close();
         EventLogActions.add_event("WebSocket connection closed.");
+        dispatch(websocketActions.disconnected());
     };
     return ws;
-}
-
-export default Connection;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js
new file mode 100644
index 00000000..c4077f7a
--- /dev/null
+++ b/web/src/js/ducks/flows.js
@@ -0,0 +1,15 @@
+const defaultState = {
+    list: [],
+    isFetching: false,
+    updateBeforeFetch: [],
+    byId: {},
+    indexOf: {},
+    views: {}
+}
+
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+        default:
+            return state
+    }
+}
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
index c82d42bb..0074bda4 100644
--- a/web/src/js/ducks/index.js
+++ b/web/src/js/ducks/index.js
@@ -1,8 +1,12 @@
 import {combineReducers} from 'redux'
-import eventLog from './eventLog.js';
+import eventLog from './eventLog.js'
+import websocket from './websocket.js'
+import flows from './flows.js'
 
 const rootReducer = combineReducers({
-    eventLog
+    eventLog,
+    flows,
+    websocket,
 })
 
 export default rootReducer
\ No newline at end of file
diff --git a/web/src/js/ducks/websocket.js b/web/src/js/ducks/websocket.js
new file mode 100644
index 00000000..281d1f2c
--- /dev/null
+++ b/web/src/js/ducks/websocket.js
@@ -0,0 +1,34 @@
+const CONNECTED = 'WEBSOCKET_CONNECTED'
+const DISCONNECTED = 'WEBSOCKET_DISCONNECTED'
+const RECEIVE_MESSAGE = 'RECEIVE_WEBSOCKET_MESSAGE'
+
+
+const defaultState = {
+    connected: true,
+    /* we may want to have an error message attribute here at some point */
+}
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+        case CONNECTED:
+            return {
+                connected: true
+            }
+        case DISCONNECTED:
+            return {
+                connected: false
+            }
+        default:
+            return state
+    }
+}
+
+
+export function connected() {
+    return {type: CONNECTED}
+}
+export function disconnected() {
+    return {type: DISCONNECTED}
+}
+export function receiveMessage(message) {
+    return {type: RECEIVE_MESSAGE, message}
+}
\ No newline at end of file
-- 
cgit v1.2.3