synchronous updateSource logic

src/components/:w

@@ -0,0 +1,148 @@
+import React from 'react';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+import * as selectors from '../selectors';
+
+import MediaOverlay from './presentational/MediaOverlay';
+import LoadingOverlay from './presentational/LoadingOverlay';
+import Viewport from './Viewport.jsx';
+import Toolbar from './Toolbar.jsx';
+import CardStack from './CardStack.jsx';
+import NarrativeCard from './NarrativeCard.js';
+import InfoPopUp from './InfoPopup.jsx';
+import Timeline from './Timeline.jsx';
+import Notification from './Notification.jsx';
+
+import { parseDate } from '../js/utilities';
+
+class Dashboard extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleViewSource = this.handleViewSource.bind(this)
+    this.handleHighlight = this.handleHighlight.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleTagFilter = this.handleTagFilter.bind(this)
+    this.updateTimerange = this.updateTimerange.bind(this)
+
+    this.eventsById = {}
+  }
+
+  componentDidMount() {
+    if (!this.props.app.isMobile) {
+      this.props.actions.fetchDomain()
+        .then(domain => this.props.actions.updateDomain(domain));
+    }
+  }
+
+  handleHighlight(highlighted) {
+    this.props.actions.updateHighlighted((highlighted) ? highlighted : null);
+  }
+
+  getEventById(eventId) {
+    if (this.eventsById[eventId]) return this.eventsById[eventId];
+    this.eventsById[eventId] = this.props.domain.events.find(ev => ev.id === eventId);
+    return this.eventsById[eventId];
+  }
+
+  handleViewSource(source) {
+    console.log('handleViewSource: to implement in Dashboard.jsx')
+    this.props.actions.updateSource(source)
+  }
+
+  handleSelect(selected) {
+    if (selected) {
+      let eventsToSelect = selected.map(event => this.getEventById(event.id));
+      eventsToSelect = eventsToSelect.sort((a, b) => parseDate(a.timestamp) - parseDate(b.timestamp))
+
+      this.props.actions.updateSelected(eventsToSelect)
+    }
+  }
+
+  handleTagFilter(tag) {
+    this.props.actions.updateTagFilters(tag);
+  }
+
+  updateTimerange(timeRange) {
+    this.props.actions.updateTimeRange(timeRange);
+  }
+
+  getCategoryColor(category='other') {
+    return this.props.ui.style.categories[category] || this.props.ui.style.categories['other']
+  }
+
+  getNarrativeLinks(event) {
+    const narrative = this.props.domain.narratives.find(nv => nv.id === event.narrative);
+    if (narrative) return narrative.byId[event.id];
+    return null;
+  }
+
+  render() {
+    return (
+      <div>
+        <Viewport
+          methods={{
+            onSelect: this.handleSelect,
+            getCategoryColor: category => this.getCategoryColor(category)
+          }}
+        />
+        <Toolbar
+          onFilter={this.handleTagFilter}
+          actions={this.props.actions}
+        />
+        <CardStack
+          onViewSource={this.handleViewSource}
+          onSelect={this.handleSelect}
+          onHighlight={this.handleHighlight}
+          onToggleCardstack={() => this.props.actions.updateSelected([])}
+          getNarrativeLinks={event => this.getNarrativeLinks(event)}
+          getCategoryColor={category => this.getCategoryColor(category)}
+        />
+        <Timeline
+          methods={{
+            onSelect: this.handleSelect,
+            onUpdateTimerange: this.updateTimerange,
+            getCategoryColor: category => this.getCategoryColor(category)
+          }}
+        />
+        <InfoPopUp
+          ui={this.props.ui}
+          app={this.props.app}
+          toggle={() => this.props.actions.toggleInfoPopup()}
+        />
+        <NarrativeCard
+          onSelect={this.handleSelect}
+          actions={this.props.actions}
+        />
+        <NarrativeCard
+          onSelect={this.handleSelect}
+        />
+        <Notification
+          isNotification={this.props.app.flags.isNotification}
+          notifications={this.props.domain.notifications}
+          onToggle={this.props.actions.markNotificationsRead}
+        />
+        <MediaOverlay
+
+        />
+        <LoadingOverlay
+          ui={this.props.app.flags.isFetchingDomain}
+          language={this.props.app.language}
+        />
+      </div>
+    );
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch)
+  };
+}
+
+export default connect(
+  state => state,
+  mapDispatchToProps,
+)(Dashboard);