Move tag activation logic to reducer

src/actions/index.js

@@ -136,11 +136,11 @@ export function updateDistrict(district) {
     };
 }
 
-export const UPDATE_FILTERS = 'UPDATE_FILTERS';
-export function updateFilters(filters) {
+export const UPDATE_TAGFILTERS = 'UPDATE_TIMEFILTERS';
+export function updateTagFilters(tag) {
     return {
-        type: UPDATE_FILTERS,
-        filters: filters
+        type: UPDATE_TAGFILTERS,
+        tag
     };
 }
 

src/components/Dashboard.jsx

@@ -21,7 +21,8 @@ class Dashboard extends React.Component {
       this.handleHighlight = this.handleHighlight.bind(this);
       this.handleSelect = this.handleSelect.bind(this);
       this.handleToggle = this.handleToggle.bind(this);
-      this.handleFilter = this.handleFilter.bind(this);
+      this.handleTagFilter = this.handleTagFilter.bind(this);
+      this.handleTimeFilter = this.handleTimeFilter.bind(this);
     }
 
     componentDidMount() {
@@ -67,8 +68,12 @@ class Dashboard extends React.Component {
       }
     }
 
-    handleFilter(filters) {
-      this.props.actions.updateFilters(filters);
+    handleTagFilter(tag) {
+      this.props.actions.updateTagFilters(tag);
+    }
+
+    handleTimeFilter(timeRange) {
+      this.props.actions.updateTimeRange(timeRange);
     }
 
     handleToggle( key ) {
@@ -139,7 +144,7 @@ class Dashboard extends React.Component {
           toolbarTab={this.props.ui.components.toolbarTab}
           isView2d={this.props.ui.flags.isView2d}
 
-          filter={this.handleFilter}
+          filter={this.handleTagFilter}
           toggle={ (key) => this.handleToggle(key) }
           actions={this.props.actions}
         />
@@ -152,7 +157,6 @@ class Dashboard extends React.Component {
           isFetchingEvents={this.props.ui.flags.isFetchingEvents}
 
           highlight={this.handleHighlight}
-          filter={this.handleFilter}
           toggle={this.handleToggle}
           getCategoryGroup={category => this.getCategoryGroup(category)}
           getCategoryGroupColor={category => this.getCategoryGroupColor(category)}
@@ -170,7 +174,7 @@ class Dashboard extends React.Component {
           dom={this.props.ui.dom}
 
           select={this.handleSelect}
-          filter={this.handleFilter}
+          filter={this.handleTimeFilter}
           highlight={this.handleHighlight}
           toggle={() => this.handleToggle('TOGGLE_CARDSTACK')}
           getCategoryGroup={category => this.getCategoryGroup(category)}
@@ -209,7 +213,7 @@ function mapStateToProps(state) {
       categories: selectors.getFilteredCategories(state),
       categoryGroups: selectors.getCategoryGroups(state),
       sites: selectors.getSites(state),
-      tags: selectors.getTags(state),
+      tags: selectors.getAllTags(state),
 
       notifications: state.domain.notifications,
     }),

src/components/TagListPanel.jsx

@@ -21,26 +21,9 @@ class TagListPanel extends React.Component {
     this.computeTree(nextProps.tags.children[nextProps.tagType]);
   }
 
-  traverseNodeAndCheckIt(node, depth, active) {
-    // do something to node
-    const tagFilter = this.newTagFilters.find(tagFilter => tagFilter.key === node.key)
-    tagFilter.active = (depth === 0) ? !node.active : active;
-    tagFilter.depth = depth;
-    depth = depth + 1;
-
-    if (Object.keys(tagFilter.children).length > 0) {
-      Object.values(tagFilter.children).forEach((childNode) => {
-        this.traverseNodeAndCheckIt(childNode, depth, tagFilter.active);
-      });
-    }
-  }
-
   onClickCheckbox(tag) {
-    this.newTagFilters = this.props.tagFilters.slice(0);
-    let depth = 0;
-    if (tag.key && tag.children) this.traverseNodeAndCheckIt(tag, depth);
-
-    this.props.filter({ tags: this.newTagFilters });
+    tag.active = !tag.active
+    this.props.filter(tag);
   }
 
   createNodeComponent (node, depth) {

src/js/timeline/timeline.js

@@ -56,7 +56,7 @@ export default function(app, ui) {
   let selected = [];
   let range = app.range;
 
-  const filter = app.filter;
+  const timeFilter = app.filter;
   const select = app.select;
   const getCategoryLabel = app.getCategoryLabel;
   const getCategoryGroupColor = app.getCategoryGroupColor;
@@ -230,9 +230,7 @@ export default function(app, ui) {
     })
     .on('end', () => {
       toggleTransition(true);
-      filter({
-        range: scale.x.domain()
-      });
+      timeFilter(scale.x.domain());
     });
 
   /*
@@ -367,9 +365,7 @@ export default function(app, ui) {
     const domainF = d3.timeMinute.offset(newCentralTime, zoom.duration / 2);
 
     scale.x.domain([domain0, domainF]);
-    filter({
-      range: scale.x.domain()
-    });
+    timeFilter(scale.x.domain());
   }
 
   /**
@@ -392,9 +388,7 @@ export default function(app, ui) {
     }
 
     scale.x.domain([domain0, domainF]);
-    filter({
-      range: scale.x.domain()
-    });
+    timeFilter(scale.x.domain());
   }
 
   function toggleTransition(isTransition) {

src/reducers/app.js

@@ -3,7 +3,7 @@ import initial from '../store/initial.js';
 import {
   UPDATE_HIGHLIGHTED,
   UPDATE_SELECTED,
-  UPDATE_FILTERS,
+  UPDATE_TAGFILTERS,
   UPDATE_TIMERANGE,
   RESET_ALLFILTERS,
   TOGGLE_LANGUAGE,
@@ -22,15 +22,34 @@ function updateSelected(appState, action) {
   });
 }
 
-function updateFilters(appState, action) { // XXX
+function updateTagFilters(appState, action) {
+  const tagFilters = appState.filters.tags.slice(0);
+  const nextActiveState = action.tag.active
+
+  function traverseNode(node) {
+    const tagFilter = tagFilters.find(tF => tF.key === node.key);
+    node.active = nextActiveState;
+    if (!tagFilter) tagFilters.push(node);
+
+    if (node && Object.keys(node.children).length > 0) {
+      Object.values(node.children).forEach((childNode) => { traverseNode(childNode); });
+    }
+  }
+
+  traverseNode(action.tag);
+
   return Object.assign({}, appState, {
-    filters: Object.assign({}, appState.filters, action.filters)
+    filters: Object.assign({}, appState.filters, {
+      tags: tagFilters
+    })
   });
 }
 
 function updateTimeRange(appState, action) { // XXX
   return Object.assign({}, appState, {
-    filters: Object.assign({}, appState.filters, action.range),
+    filters: Object.assign({}, appState.filters, {
+      range: action.range
+    }),
   });
 }
 
@@ -70,8 +89,8 @@ function app(appState = initial.app, action) {
       return updateHighlighted(appState, action);
     case UPDATE_SELECTED:
       return updateSelected(appState, action);
-    case UPDATE_FILTERS:
-      return updateFilters(appState, action);
+    case UPDATE_TAGFILTERS:
+      return updateTagFilters(appState, action);
     case UPDATE_TIMERANGE:
       return updateTimeRange(appState, action);
     case RESET_ALLFILTERS:

src/selectors/index.js

@@ -10,7 +10,7 @@ export const getSites = (state) => {
   if (process.env.features.USE_SITES) return state.domain.sites;
   return [];
 }
-export const getTags = state => state.domain.tags;
+export const getAllTags = state => state.domain.tags;
 
 export const getCategoriesFilter = state => state.app.filters.categories;
 export const getTagsFilter = state => state.app.filters.tags;
@@ -105,20 +105,20 @@ export const getCategoryGroups = createSelector(
   }
 )
 
+
 /**
  * Given a tree of tags, return those tags as a list, where each node has been
  * aware of its depth, and given an 'active' flag
  */
 export const getTagFilters = createSelector(
-  [getTags],
+  [getAllTags],
   (tags) => {
-    const allTags = [];
+    const allTagFilters = [];
     let depth = 0;
     function traverseNode(node, depth) {
-      // do something to node
       node.active = (!node.hasOwnProperty('active')) ? false : node.active;
       node.depth = depth;
-      allTags.push(node)
+      if (node.active) allTagFilters.push(node)
       depth = depth + 1;
 
       if (Object.keys(node.children).length > 0) {
@@ -129,6 +129,6 @@ export const getTagFilters = createSelector(
     }
 
     if (tags.key && tags.children) traverseNode(tags, depth)
-    return allTags;
+    return allTagFilters;
   }
 )