wip: categories working with timeline

have removed map for the time being, as it was interrupting the timeline render. will return it in next commit

src/components/Card.jsx

@@ -33,12 +33,6 @@ class Card extends React.Component {
     });
   }
 
-  getCategoryColorClass(category) {
-    if (category)
-      return this.props.getCategoryGroup(category);
-    return 'other';
-  }
-
   makeTimelabel(timestamp) {
     if (timestamp === null) return null;
     const parsedTimestamp = this.props.tools.parser(timestamp);
@@ -48,8 +42,8 @@ class Card extends React.Component {
 
   renderCategory() {
     const categoryTitle = copy[this.props.language].cardstack.category;
-    const colorType = this.getCategoryColorClass(this.props.event.category);
-    const categoryLabel = this.props.getCategoryLabel(this.props.event.category);
+    const colorType = this.props.event.category || 'other';
+    const categoryLabel = this.props.event.category;
 
     return (
       <CardCategory

src/components/CardStack.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { connect } from 'react-redux'
+import * as selectors from '../selectors'
+
 import Card from './Card.jsx';
 import copy from '../js/data/copy.json';
 import {
@@ -90,4 +93,14 @@ class CardStack extends React.Component {
   }
 }
 
-export default CardStack;
+function mapStateToProps(state) {
+  return {
+    selected: state.app.selected,
+    language: state.app.selected,
+    tools: state.ui.tools,
+    isCardstack: state.ui.flags.isCardstack,
+    isLoading: state.ui.flags.isFetchingEvents
+  }
+}
+
+export default connect(mapStateToProps)(CardStack)

src/components/Dashboard.jsx

@@ -113,15 +113,13 @@ class Dashboard extends React.Component {
     return null;
   }
 
-  render() {
-    return (
-      <div>
+/***
         <Viewport
           domain={{
             locations: this.props.domain.locations,
             narratives: this.props.domain.narratives,
             sites: this.props.domain.sites,
-            categoryGroups: this.props.domain.categoryGroups
+            categories: this.props.domain.categories
           }}
 
           app={{
@@ -140,30 +138,21 @@ class Dashboard extends React.Component {
           methods={{
             select: this.handleSelect,
             highlight: this.handleHighlight,
-            getCategoryGroup: category => this.getCategoryGroup(category),
-            getCategoryGroupColor: category => this.getCategoryGroupColor(category)
+            // getCategoryGroup: category => this.getCategoryGroup(category),
+            getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
-        <Toolbar
-          tags={this.props.domain.tags}
-          categories={this.props.domain.categories}
-          language={this.props.app.language}
-          tagFilters={this.props.app.filters.tags}
-          categoryFilter={this.props.app.filters.categories}
-          viewFilters={this.props.app.filters.views}
-          features={this.props.app.features}
+***/
 
+  render() {
+    return (
+      <div>
+        <Toolbar
           filter={this.handleTagFilter}
           toggle={ (key) => this.handleToggle(key) }
           actions={this.props.actions}
         />
         <CardStack
-          selected={this.props.app.selected}
-          language={this.props.app.language}
-          tools={this.props.ui.tools}
-          isCardstack={this.props.ui.flags.isCardstack}
-          isLoading={this.props.ui.flags.isFetchingEvents}
-
           select={this.handleSelect}
           highlight={this.handleHighlight}
           toggle={this.handleToggle}
@@ -171,17 +160,6 @@ class Dashboard extends React.Component {
           getCategoryColor={category => this.getCategoryColor(category)}
         />
         <Timeline
-          events={this.props.domain.events.filter(item => item)}
-          narratives={this.props.domain.narratives}
-          categories={this.props.domain.categories}
-
-          timerange={this.props.app.filters.timerange}
-          selected={this.props.app.selected}
-          language={this.props.app.language}
-
-          tools={this.props.ui.tools}
-          dom={this.props.ui.dom}
-
           select={this.handleSelect}
           filter={this.handleTimeFilter}
           highlight={this.handleHighlight}
@@ -207,31 +185,6 @@ class Dashboard extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
-  return Object.assign({}, state, {
-    domain: Object.assign({}, state.domain, {
-      // These items are affected by app selectionFilters
-      events: selectors.selectEvents(state),
-      locations: selectors.selectLocations(state),
-      categories: selectors.selectCategories(state),
-      narratives: selectors.selectNarratives(state),
-
-      // These items are not affected by selectionFilters
-      sites: selectors.getSites(state),
-      tags: selectors.getTagTree(state),
-      notifications: selectors.getNotifications(state)
-    }),
-    app: Object.assign({}, state.app, {
-      error: state.app.error,
-      filters: Object.assign({}, state.app.filters, {
-        timerange: selectors.getTimeRange(state),
-        tags: selectors.selectTagList(state)
-      })
-    }),
-    ui: state.ui
-  });
-}
-
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch)
@@ -239,6 +192,6 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(
-  mapStateToProps,
+  state => state,
   mapDispatchToProps,
 )(Dashboard);

src/components/Timeline.jsx

@@ -1,5 +1,8 @@
-import copy from '../js/data/copy.json';
 import React from 'react';
+import { connect } from 'react-redux';
+import * as selectors from '../selectors';
+
+import copy from '../js/data/copy.json';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 class Timeline extends React.Component {
@@ -67,6 +70,7 @@ class Timeline extends React.Component {
   }
 
   render() {
+    let events = this.props.events
     const labels_title_lang = copy[this.props.language].timeline.labels_title;
     const info_lang = copy[this.props.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
@@ -92,4 +96,18 @@ class Timeline extends React.Component {
   }
 }
 
-export default Timeline;
+function mapStateToProps(state) {
+  return {
+    // events: selectors.selectEvents(state),
+    events: state.domain.events,
+    categories: selectors.selectCategories(state),
+    language: state.app.language,
+    tools: state.ui.tools,
+    timerange: selectors.getTimeRange(state),
+    dom: state.ui.dom,
+    selected: state.app.selected
+  }
+}
+
+export default connect(mapStateToProps)(Timeline);
+// export default Timeline

src/components/Toolbar.jsx

@@ -1,5 +1,7 @@
-
 import React from 'react';
+import { connect } from 'react-redux'
+import * as selectors from '../selectors'
+
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
@@ -226,4 +228,16 @@ class Toolbar extends React.Component {
   }
 }
 
-export default Toolbar;
+function mapStateToProps(state) {
+  return {
+    tags: selectors.getTagTree(state),
+    categories: selectors.selectCategories(state),
+    language: state.app.language,
+    tagFilters: selectors.selectTagList(state),
+    categoryFilter: state.app.filters.categories,
+    viewFilters: state.app.filters.views,
+    features: state.app.features
+  }
+}
+
+export default connect(mapStateToProps)(Toolbar)