Allow filtering by category, intersecting with tags

src/components/Dashboard.jsx

@@ -98,7 +98,8 @@ class Dashboard extends React.Component {
         <Toolbar
           isNarrative={!!app.narrative}
           methods={{
-            onFilter: actions.updateTagFilters,
+            onTagFilter: actions.updateTagFilters,
+            onCategoryFilter: actions.updateCategoryFilters,
             onSelectNarrative: this.setNarrative
           }}
         />

src/components/TagListPanel.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Checkbox from './presentational/Checkbox';
+import copy from '../js/data/copy.json';
 
 class TagListPanel extends React.Component {
 
@@ -20,9 +21,10 @@ class TagListPanel extends React.Component {
     this.computeTree(nextProps.tags);//.children[nextProps.tagType]);
   }
 
-  onClickCheckbox(tag) {
-    tag.active = !tag.active
-    this.props.onFilter(tag);
+  onClickCheckbox(obj, type) {
+    obj.active = !obj.active
+    if (type === 'category') this.props.onCategoryFilter(obj);
+    if (type === 'tag') this.props.onTagFilter(obj);
   }
 
   createNodeComponent (node, depth) {
@@ -35,7 +37,7 @@ class TagListPanel extends React.Component {
           <Checkbox
             label={node.key}
             isActive={node.active}
-            onClickCheckbox={() => this.onClickCheckbox(node)}
+            onClickCheckbox={() => this.onClickCheckbox(node, 'tag')}
           />
       </li>
     );
@@ -61,15 +63,42 @@ class TagListPanel extends React.Component {
   }
 
   renderTree() {
-    return this.state.treeComponents.map(c => c);
+    return (
+      <div>
+        <h2>{copy[this.props.language].toolbar.tags}</h2>
+        {this.state.treeComponents.map(c => c)}
+      </div>
+    )
+  }
+
+  renderCategoryTree() {
+    return (
+      <div>
+        <h2>{copy[this.props.language].toolbar.categories}</h2>
+        {this.props.categories.map(cat => {
+          return (<li
+            key={cat.category.replace(/ /g,"_")}
+            className={'tag-filter active'}
+            style={{ marginLeft: '20px' }}
+          >
+            <Checkbox
+              label={cat.category}
+              isActive={cat.active}
+              onClickCheckbox={() => this.onClickCheckbox(cat, 'category')}
+            />
+          </li>)
+          })
+        }
+      </div>
+    )
   }
 
   render() {
-
     return (
       <div className="react-innertabpanel">
-        <h2>Explore data by tag</h2>
-        <p>Explore freely all the data by selecting tags.</p>
+        <h2>{copy[this.props.language].toolbar.explore_by_tag__title}</h2>
+        <p>{copy[this.props.language].toolbar.explore_by_tag__description}</p>
+        {this.renderCategoryTree()}
         {this.renderTree()}
       </div>
     );

src/components/Toolbar.jsx

@@ -81,7 +81,8 @@ class Toolbar extends React.Component {
             categories={this.props.categories}
             tagFilters={this.props.tagFilters}
             categoryFilters={this.props.categoryFilters}
-            onFilter={this.props.methods.onFilter}
+            onTagFilter={this.props.methods.onTagFilter}
+            onCategoryFilter={this.props.methods.onCategoryFilter}
             language={this.props.language}
           />
         </TabPanel>
@@ -185,11 +186,11 @@ class Toolbar extends React.Component {
 function mapStateToProps(state) {
   return {
     tags: selectors.getTagTree(state),
-    categories: selectors.selectCategories(state),
+    categories: selectors.getCategories(state),
     narratives: selectors.selectNarratives(state),
     language: state.app.language,
     tagFilters: selectors.selectTagList(state),
-    categoryFilter: state.app.filters.categories,
+    categoryFilters: selectors.selectCategories(state),
     viewFilters: state.app.filters.views,
     features: state.app.features,
     narrative: state.app.narrative,