From 9e3591e3c225c51d5a5b80eb331719d20d14dc48 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 00:04:10 -0700
Subject: add basic redux architecture, convert eventlog to redux

---
 web/src/js/components/eventlog.js | 54 ++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 20 deletions(-)

(limited to 'web/src/js/components/eventlog.js')

diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 6e4f9096..687c5265 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,11 +1,12 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { connect } from 'react-redux'
 import shallowEqual from "shallowequal"
 import {Query} from "../actions.js"
+import {toggleEventLogFilter} from "../reduxActions"
 import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
 import {StoreView} from "../store/view.js"
-import _ from "lodash"
 
 class EventLogContents extends React.Component {
 
@@ -127,7 +128,7 @@ function ToggleFilter ({ name, active, toggleLevel }) {
 
     function onClick(event) {
         event.preventDefault();
-        toggleLevel(name);
+        toggleLevel();
     }
 
     return (
@@ -140,42 +141,55 @@ function ToggleFilter ({ name, active, toggleLevel }) {
     );
 }
 
+const mapStateToProps = (state, ownProps) => {
+  return {
+    active: state.eventLog.visibilityFilter[ownProps.name]
+  }
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  return {
+    toggleLevel: () => {
+      dispatch(toggleEventLogFilter(ownProps.name))
+    }
+  }
+};
+
+const ToggleEventLogFilter = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ToggleFilter);
+
+
 const AutoScrollEventLog = AutoScroll(EventLogContents);
 
+
+const VisibleAutoScrollEventLog = connect(
+    function mapStateToProps(state, ownProps) {
+        return {filter: state.eventLog.visibilityFilter}
+    })(AutoScrollEventLog);
+
+
 var EventLog = React.createClass({
-    getInitialState() {
-        return {
-            filter: {
-                "debug": false,
-                "info": true,
-                "web": true
-            }
-        };
-    },
     close() {
         var d = {};
         d[Query.SHOW_EVENTLOG] = undefined;
         this.props.updateLocation(undefined, d);
     },
-    toggleLevel(level) {
-        var filter = _.extend({}, this.state.filter);
-        filter[level] = !filter[level];
-        this.setState({filter: filter});
-    },
     render() {
         return (
             <div className="eventlog">
                 <div>
                     Eventlog
                     <div className="pull-right">
-                        <ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
-                        <ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
-                        <ToggleFilter name="web" active={this.state.filter.web} toggleLevel={this.toggleLevel}/>
+                        <ToggleEventLogFilter name="debug"/>
+                        <ToggleEventLogFilter name="info"/>
+                        <ToggleEventLogFilter name="web"/>
                         <i onClick={this.close} className="fa fa-close"></i>
                     </div>
 
                 </div>
-                <AutoScrollEventLog filter={this.state.filter}/>
+                <VisibleAutoScrollEventLog/>
             </div>
         );
     }
-- 
cgit v1.2.3


From 698d38b28e43ce0685ce8ce8c119926af2083cbc Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 17:46:18 -0700
Subject: web: :hatching_chick:

---
 web/src/js/components/eventlog.js | 146 +++++++++++++++-----------------------
 1 file changed, 59 insertions(+), 87 deletions(-)

(limited to 'web/src/js/components/eventlog.js')

diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 687c5265..a2e6a0c1 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -1,12 +1,12 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import { connect } from 'react-redux'
+import {connect} from 'react-redux'
 import shallowEqual from "shallowequal"
-import {Query} from "../actions.js"
-import {toggleEventLogFilter} from "../reduxActions"
+import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog"
 import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
 import {StoreView} from "../store/view.js"
+import {ToggleButton} from "./common";
 
 class EventLogContents extends React.Component {
 
@@ -27,7 +27,7 @@ class EventLogContents extends React.Component {
         );
 
         this.heights = {};
-        this.state = { entries: this.view.list, vScroll: calcVScroll() };
+        this.state = {entries: this.view.list, vScroll: calcVScroll()};
 
         this.onChange = this.onChange.bind(this);
         this.onViewportUpdate = this.onViewportUpdate.bind(this);
@@ -71,12 +71,12 @@ class EventLogContents extends React.Component {
         });
 
         if (!shallowEqual(this.state.vScroll, vScroll)) {
-            this.setState({ vScroll });
+            this.setState({vScroll});
         }
     }
 
     onChange() {
-        this.setState({ entries: this.view.list });
+        this.setState({entries: this.view.list});
     }
 
     setHeight(id, ref) {
@@ -90,7 +90,7 @@ class EventLogContents extends React.Component {
     }
 
     getIcon(level) {
-        return { web: "html5", debug: "bug" }[level] || "info";
+        return {web: "html5", debug: "bug"}[level] || "info";
     }
 
     render() {
@@ -112,87 +112,59 @@ class EventLogContents extends React.Component {
     }
 }
 
-ToggleFilter.propTypes = {
-    name: React.PropTypes.string.isRequired,
-    toggleLevel: React.PropTypes.func.isRequired,
-    active: React.PropTypes.bool,
-};
-
-function ToggleFilter ({ name, active, toggleLevel }) {
-    let className = "label ";
-    if (active) {
-        className += "label-primary";
-    } else {
-        className += "label-default";
-    }
-
-    function onClick(event) {
-        event.preventDefault();
-        toggleLevel();
-    }
-
-    return (
-        <a
-            href="#"
-            className={className}
-            onClick={onClick}>
-            {name}
-        </a>
-    );
-}
-
-const mapStateToProps = (state, ownProps) => {
-  return {
-    active: state.eventLog.visibilityFilter[ownProps.name]
-  }
-};
+EventLogContents = AutoScroll(EventLogContents);
+
+
+const EventLogContentsContainer = connect(
+    state => ({
+        filter: state.eventLog.filter
+    })
+)(EventLogContents);
+
+
+export const ToggleEventLog = connect(
+    state => ({
+        checked: state.eventLog.visible
+    }),
+    dispatch => ({
+        onToggle: () => dispatch(toggleEventLogVisibility())
+    })
+)(ToggleButton);
+
+
+const ToggleFilter = connect(
+    (state, ownProps) => ({
+        checked: state.eventLog.filter[ownProps.text]
+    }),
+    (dispatch, ownProps) => ({
+        onToggle: () => dispatch(toggleEventLogFilter(ownProps.text))
+    })
+)(ToggleButton);
+
+
+const EventLog = ({close}) =>
+    <div className="eventlog">
+        <div>
+            Eventlog
+            <div className="pull-right">
+                <ToggleFilter text="debug"/>
+                <ToggleFilter text="info"/>
+                <ToggleFilter text="web"/>
+                <i onClick={close} className="fa fa-close"></i>
+            </div>
+        </div>
+        <EventLogContentsContainer/>
+    </div>;
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-  return {
-    toggleLevel: () => {
-      dispatch(toggleEventLogFilter(ownProps.name))
-    }
-  }
+EventLog.propTypes = {
+    close: React.PropTypes.func.isRequired
 };
 
-const ToggleEventLogFilter = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ToggleFilter);
-
-
-const AutoScrollEventLog = AutoScroll(EventLogContents);
-
-
-const VisibleAutoScrollEventLog = connect(
-    function mapStateToProps(state, ownProps) {
-        return {filter: state.eventLog.visibilityFilter}
-    })(AutoScrollEventLog);
-
-
-var EventLog = React.createClass({
-    close() {
-        var d = {};
-        d[Query.SHOW_EVENTLOG] = undefined;
-        this.props.updateLocation(undefined, d);
-    },
-    render() {
-        return (
-            <div className="eventlog">
-                <div>
-                    Eventlog
-                    <div className="pull-right">
-                        <ToggleEventLogFilter name="debug"/>
-                        <ToggleEventLogFilter name="info"/>
-                        <ToggleEventLogFilter name="web"/>
-                        <i onClick={this.close} className="fa fa-close"></i>
-                    </div>
-
-                </div>
-                <VisibleAutoScrollEventLog/>
-            </div>
-        );
-    }
-});
+const EventLogContainer = connect(
+    undefined,
+    dispatch => ({
+        close: () => dispatch(toggleEventLogVisibility())
+    })
+)(EventLog);
 
-export default EventLog;
+export default EventLogContainer;
-- 
cgit v1.2.3


From 7afac747a8448ac524774a23c12ab23c9d4675f6 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 23:40:30 -0700
Subject: web: reduxify event log store

---
 web/src/js/components/eventlog.js | 69 ++++++++++++++-------------------------
 1 file changed, 24 insertions(+), 45 deletions(-)

(limited to 'web/src/js/components/eventlog.js')

diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index a2e6a0c1..0857056c 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -5,69 +5,57 @@ import shallowEqual from "shallowequal"
 import {toggleEventLogFilter, toggleEventLogVisibility} from "../ducks/eventLog"
 import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
-import {StoreView} from "../store/view.js"
 import {ToggleButton} from "./common";
 
-class EventLogContents extends React.Component {
+function LogIcon({entry}) {
+    let icon = {web: "html5", debug: "bug"}[entry.level] || "info";
+    return <i className={`fa fa-fw fa-${icon}`}></i>
+}
 
-    static contextTypes = {
-        eventStore: React.PropTypes.object.isRequired,
-    };
+function LogEntry({entry}) {
+    return <div>
+        <LogIcon entry={entry}/>
+        {entry.message}
+    </div>;
+}
+
+class EventLogContents extends React.Component {
 
     static defaultProps = {
         rowHeight: 18,
     };
 
-    constructor(props, context) {
-        super(props, context);
-
-        this.view = new StoreView(
-            this.context.eventStore,
-            entry => this.props.filter[entry.level]
-        );
+    constructor(props) {
+        super(props);
 
         this.heights = {};
-        this.state = {entries: this.view.list, vScroll: calcVScroll()};
+        this.state = {vScroll: calcVScroll()};
 
-        this.onChange = this.onChange.bind(this);
         this.onViewportUpdate = this.onViewportUpdate.bind(this);
     }
 
     componentDidMount() {
         window.addEventListener("resize", this.onViewportUpdate);
-        this.view.addListener("add", this.onChange);
-        this.view.addListener("recalculate", this.onChange);
         this.onViewportUpdate();
     }
 
     componentWillUnmount() {
         window.removeEventListener("resize", this.onViewportUpdate);
-        this.view.removeListener("add", this.onChange);
-        this.view.removeListener("recalculate", this.onChange);
-        this.view.close();
     }
 
     componentDidUpdate() {
         this.onViewportUpdate();
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.filter !== this.props.filter) {
-            this.view.recalculate(
-                entry => nextProps.filter[entry.level]
-            );
-        }
-    }
-
     onViewportUpdate() {
         const viewport = ReactDOM.findDOMNode(this);
 
         const vScroll = calcVScroll({
-            itemCount: this.state.entries.length,
+            itemCount: this.props.events.length,
             rowHeight: this.props.rowHeight,
             viewportTop: viewport.scrollTop,
             viewportHeight: viewport.offsetHeight,
-            itemHeights: this.state.entries.map(entry => this.heights[entry.id]),
+            itemHeights: this.props.events.map(entry => this.heights[entry.id]),
         });
 
         if (!shallowEqual(this.state.vScroll, vScroll)) {
@@ -75,10 +63,6 @@ class EventLogContents extends React.Component {
         }
     }
 
-    onChange() {
-        this.setState({entries: this.view.list});
-    }
-
     setHeight(id, ref) {
         if (ref && !this.heights[id]) {
             const height = ReactDOM.findDOMNode(ref).offsetHeight;
@@ -89,23 +73,18 @@ class EventLogContents extends React.Component {
         }
     }
 
-    getIcon(level) {
-        return {web: "html5", debug: "bug"}[level] || "info";
-    }
-
     render() {
         const vScroll = this.state.vScroll;
-        const entries = this.state.entries.slice(vScroll.start, vScroll.end);
+        const events = this.props.events
+            .slice(vScroll.start, vScroll.end)
+            .map(entry =>
+                <LogEntry entry={entry} key={entry.id} ref={this.setHeight.bind(this, entry.id)}/>
+            );
 
         return (
             <pre onScroll={this.onViewportUpdate}>
                 <div style={{ height: vScroll.paddingTop }}></div>
-                {entries.map((entry, index) => (
-                    <div key={entry.id} ref={this.setHeight.bind(this, entry.id)}>
-                        <i className={`fa fa-fw fa-${this.getIcon(entry.level)}`}></i>
-                        {entry.message}
-                    </div>
-                ))}
+                {events}
                 <div style={{ height: vScroll.paddingBottom }}></div>
             </pre>
         );
@@ -117,7 +96,7 @@ EventLogContents = AutoScroll(EventLogContents);
 
 const EventLogContentsContainer = connect(
     state => ({
-        filter: state.eventLog.filter
+        events: state.eventLog.filteredEvents
     })
 )(EventLogContents);
 
-- 
cgit v1.2.3


From 5321f15defcef641bf5b7ba39e5c9057d562c5f8 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 2 Jun 2016 23:41:32 -0700
Subject: web: fix eventlog height registration

---
 web/src/js/components/eventlog.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

(limited to 'web/src/js/components/eventlog.js')

diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js
index 0857056c..95889a66 100644
--- a/web/src/js/components/eventlog.js
+++ b/web/src/js/components/eventlog.js
@@ -7,15 +7,15 @@ import AutoScroll from "./helpers/AutoScroll";
 import {calcVScroll} from "./helpers/VirtualScroll"
 import {ToggleButton} from "./common";
 
-function LogIcon({entry}) {
-    let icon = {web: "html5", debug: "bug"}[entry.level] || "info";
+function LogIcon({event}) {
+    let icon = {web: "html5", debug: "bug"}[event.level] || "info";
     return <i className={`fa fa-fw fa-${icon}`}></i>
 }
 
-function LogEntry({entry}) {
-    return <div>
-        <LogIcon entry={entry}/>
-        {entry.message}
+function LogEntry({event, registerHeight}) {
+    return <div ref={registerHeight}>
+        <LogIcon event={event}/>
+        {event.message}
     </div>;
 }
 
@@ -63,9 +63,10 @@ class EventLogContents extends React.Component {
         }
     }
 
-    setHeight(id, ref) {
-        if (ref && !this.heights[id]) {
-            const height = ReactDOM.findDOMNode(ref).offsetHeight;
+    setHeight(id, node) {
+        console.log("setHeight", id, node);
+        if (node && !this.heights[id]) {
+            const height = node.offsetHeight;
             if (this.heights[id] !== height) {
                 this.heights[id] = height;
                 this.onViewportUpdate();
@@ -77,8 +78,12 @@ class EventLogContents extends React.Component {
         const vScroll = this.state.vScroll;
         const events = this.props.events
             .slice(vScroll.start, vScroll.end)
-            .map(entry =>
-                <LogEntry entry={entry} key={entry.id} ref={this.setHeight.bind(this, entry.id)}/>
+            .map(event =>
+                <LogEntry
+                    event={event}
+                    key={event.id}
+                    registerHeight={(node) => this.setHeight(event.id, node)}
+                />
             );
 
         return (
-- 
cgit v1.2.3