From 9e3591e3c225c51d5a5b80eb331719d20d14dc48 Mon Sep 17 00:00:00 2001 From: Maximilian Hils 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 ++++++++++++++++++++++++--------------- web/src/js/components/proxyapp.js | 2 +- 2 files changed, 35 insertions(+), 21 deletions(-) (limited to 'web/src/js/components') 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 (
Eventlog
- - - + + +
- +
); } diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index f47c5bb4..4c790d3d 100644 --- a/web/src/js/components/proxyapp.js +++ b/web/src/js/components/proxyapp.js @@ -145,7 +145,7 @@ var ProxyAppMain = React.createClass({ import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"; -export var app = ( +export var App = ( -- cgit v1.2.3