2 files changed, 54 insertions, 26 deletions

diff --git a/web/src/js/datastructures.es6.js b/web/src/js/datastructures.es6.js
index 4bc781b2..e9e2ee77 100644
--- a/web/src/js/datastructures.es6.js
+++ b/web/src/js/datastructures.es6.js
@@ -1,26 +1,26 @@
 class EventEmitter {
     constructor(){
-        this._listeners = {};
+        this.listeners = {};
     }
     emit(event){
-        if(!(event in this._listeners)){
+        if(!(event in this.listeners)){
             return;
         }
-        this._listeners[event].forEach(function (listener) {
+        this.listeners[event].forEach(function (listener) {
             listener(event, this);
         }.bind(this));
     }
     addListener(event, f){
-        this._listeners[event] = this._listeners[event] || [];
-        this._listeners[event].push(f);
+        this.listeners[event] = this.listeners[event] || [];
+        this.listeners[event].push(f);
     }
     removeListener(event, f){
-        if(!(event in this._listeners)){
+        if(!(event in this.listeners)){
             return false;
         }
-        var index = this._listeners.indexOf(f);
+        var index = this.listeners.indexOf(f);
         if (index >= 0) {
-            this._listeners.splice(this._listeners.indexOf(f), 1);
+            this.listeners.splice(this.listeners.indexOf(f), 1);
         }
     }
 }
@@ -31,13 +31,17 @@ class FlowStore extends EventEmitter{
     constructor() {
         super();
         this.flows = [];
-        this._listeners = [];
     }
 
     getAll() {
         return this.flows;
     }
 
+    close(){
+        console.log("FlowStore.close()");
+        this.listeners = [];
+    }
+
     emitChange() {
         return this.emit(FLOW_CHANGED);
     }
@@ -57,14 +61,14 @@ class DummyFlowStore extends FlowStore {
         this.flows = flows;
     }
 
-    addFlow(f) {
-        this.flows.push(f);
+    addFlow(flow) {
+        this.flows.push(flow);
         this.emitChange();
     }
 }
 
 
-var SETTINGS_CHANGED = "settings.change";
+var SETTINGS_CHANGED = "settings.changed";
 
 class Settings extends EventEmitter {
     constructor(){
diff --git a/web/src/js/mitmproxy.react.js b/web/src/js/mitmproxy.react.js
index 2a2ee910..cdb6221d 100644
--- a/web/src/js/mitmproxy.react.js
+++ b/web/src/js/mitmproxy.react.js
@@ -9,16 +9,13 @@ var App = React.createClass({
     },
     componentDidMount: function () {
         //TODO: Replace DummyStore with real settings over WS (https://facebook.github.io/react/tips/initial-ajax.html)
-        //TODO: Is there a sensible place where we can store this?
-        var settings = new DummySettings({
+        var settingsStore = new DummySettings({
             version: "0.12"
         });
-        settings.addChangeListener(this._onSettingsChange);
-
-        //This would be async in some way or another.
-        this._onSettingsChange(null, settings);
+        this.setState({settingsStore: settingsStore});
+        settingsStore.addChangeListener(this.onSettingsChange);
     },
-    _onSettingsChange: function(event, settings){
+    onSettingsChange: function(event, settings){
         this.setState({settings: settings.getAll()});
     },
     render: function () {
@@ -34,12 +31,39 @@ var App = React.createClass({
     }
 });
 
-var Traffic = React.createClass({
-   render: function(){
-       var json = JSON.stringify(this.props, null, 4);
-       var i = 5;
-       while(i--) json += json;
-       return (<pre>{json}</pre>);
+var TrafficTable = React.createClass({
+    getInitialState: function(){
+        return {
+            flows: []
+        };
+    },
+    componentDidMount: function () {
+        var flowStore = new DummyFlowStore([]);
+        this.setState({flowStore: flowStore});
+
+        flowStore.addChangeListener(this.onFlowsChange);
+
+        $.getJSON("/flows.json").success(function (flows) {
+
+            flows.forEach(function (flow, i) {
+                window.setTimeout(function () {
+                    flowStore.addFlow(flow);
+                }, _.random(i*400,i*400+1000));
+            });
+
+        }.bind(this));
+    },
+    componentWillUnmount: function(){
+        this.state.flowStore.close();
+    },
+    onFlowsChange: function(event, flows){
+       this.setState({flows: flows.getAll()});
+    },
+    render: function () {
+       var flows = this.state.flows.map(function(flow){
+           return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+       });
+       return <pre>{flows}</pre>;
    }
 });
 
@@ -52,7 +76,7 @@ var Reports = React.createClass({
 var routes = (
   <ReactRouter.Routes location="hash">
     <ReactRouter.Route name="app" path="/" handler={App}>
-        <ReactRouter.Route name="main" handler={Traffic}/>
+        <ReactRouter.Route name="main" handler={TrafficTable}/>
         <ReactRouter.Route name="reports" handler={Reports}/>
         <ReactRouter.Redirect to="main"/>
     </ReactRouter.Route>