Filter by timerange on selecting Narrative

src/components/Card.jsx

@@ -1,5 +1,5 @@
 import copy from '../js/data/copy.json';
-import {isNotNullNorUndefined} from '../js/data/utilities';
+import {isNotNullNorUndefined} from '../js/utilities';
 import React from 'react';
 
 import Spinner from './presentational/Spinner';

src/components/CardStack.jsx

@@ -6,7 +6,7 @@ import Card from './Card.jsx';
 import copy from '../js/data/copy.json';
 import {
   isNotNullNorUndefined
-} from '../js/data/utilities.js';
+} from '../js/utilities.js';
 
 class CardStack extends React.Component {
 

src/components/NarrativeCard.js

@@ -64,7 +64,6 @@ class NarrativeCard extends React.Component {
 }
 
 function mapStateToProps(state) {
-  console.log(state)
   return {
     narrative: state.app.narrative
   }

src/components/Viewport.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 import Map from '../js/map/map.js'
-import { areEqual } from '../js/data/utilities.js'
+import { areEqual } from '../js/utilities.js'
 
 class Viewport extends React.Component {
   constructor(props) {

src/components/presentational/CardLocation.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import copy from '../../js/data/copy.json';
-import {isNotNullNorUndefined} from '../../js/data/utilities';
+import { isNotNullNorUndefined } from '../../js/utilities';
 
 const CardLocation = ({ language, location }) => {
 

src/components/presentational/CardTimestamp.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import copy from '../../js/data/copy.json';
-import {isNotNullNorUndefined} from '../../js/data/utilities';
+import { isNotNullNorUndefined } from '../../js/utilities';
 
 const CardTimestamp = ({ makeTimelabel, language, timestamp }) => {
 

src/js/map/map.js

@@ -1,7 +1,7 @@
 import {
   areEqual,
   isNotNullNorUndefined
-} from '../data/utilities';
+} from '../utilities';
 import hash from 'object-hash';
 import 'leaflet-polylinedecorator';
 
@@ -363,16 +363,19 @@ Stop and start the development process in terminal after you have added your tok
       .attr('class', 'narrative')
       .attr('d', sequenceLine)
       .style('stroke-width', d => {
+        if (!d[0]) return 0;
         // Note: [0] is a non-elegant way to get the narrative id out of the first
         // event in the narrative sequence
         const styleProps = getNarrativeStyle(d[0].narrative);
         return styleProps.strokeWidth;
       })
       .style('stroke-dasharray', d => {
+        if (!d[0]) return 'none';
         const styleProps = getNarrativeStyle(d[0].narrative);
         return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
       })
       .style('stroke', d => {
+        if (!d[0]) return 'none';
         const styleProps = getNarrativeStyle(d[0].narrative);
         return styleProps.stroke;
       })

src/js/timeline/timeline.js

@@ -6,7 +6,7 @@
 */
 import {
   areEqual
-} from '../data/utilities';
+} from '../utilities';
 import esLocale from '../data/es-MX.json';
 import copy from '../data/copy.json';
 

src/js/utilities.js

@@ -35,3 +35,17 @@ export function areEqual(arr1, arr2) {
 export function isNotNullNorUndefined(variable) {
   return (typeof variable !== 'undefined' && variable !== null);
 }
+
+/**
+* Return a Date object given a datetime string of the format: "2016-09-10T07:00:00"
+* @param {string} datetime
+*/
+export function parseDate(datetime) {
+  return new Date(datetime.slice(0, 4),
+    datetime.slice(5, 7) - 1,
+    datetime.slice(8, 10),
+    datetime.slice(11, 13),
+    datetime.slice(14, 16),
+    datetime.slice(17, 19)
+  );
+}

src/reducers/app.js

@@ -1,5 +1,7 @@
 import initial from '../store/initial.js';
 
+import { parseDate } from '../js/utilities.js';
+
 import {
   UPDATE_HIGHLIGHTED,
   UPDATE_SELECTED,
@@ -26,9 +28,25 @@ function updateSelected(appState, action) {
 }
 
 function updateNarrative(appState, action) {
-  return Object.assign({}, appState, {
-    narrative: action.narrative
-  });
+  if (action.narrative === null) {
+    return Object.assign({}, appState, {
+      narrative: action.narrative,
+    });
+  } else {
+    const dates = action.narrative.steps.map(n => parseDate(n.timestamp).getTime())
+    let minDate = Math.min(...dates);
+    let maxDate = Math.max(...dates);
+    // Add some margin to the datetime extent
+    minDate = minDate - ((maxDate - minDate) / 20);
+    maxDate = maxDate + ((maxDate - minDate) / 20);
+
+    return Object.assign({}, appState, {
+      narrative: action.narrative,
+      filters: Object.assign({}, appState.filters, {
+        timerange: [new Date(minDate), new Date(maxDate)]
+      }),
+    });
+  }
 }
 
 function updateTagFilters(appState, action) {

src/selectors/index.js

@@ -94,10 +94,11 @@ export const selectNarratives = createSelector(
         const isTimeRanged = isTimeRangedIn(evt, timeRange);
         const isInNarrative =  evt.narrative;
 
-        if (isTimeRanged && isTagged && isInNarrative) {
-          if (!narratives[evt.narrative]) {
-            narratives[evt.narrative] = { id: evt.narrative, steps: [], byId: {} };
-          }
+        if (!narratives[evt.narrative]) {
+          narratives[evt.narrative] = { id: evt.narrative, steps: [], byId: {} };
+        }
+
+        if (/*isTimeRanged && isTagged && */isInNarrative) {
           narratives[evt.narrative].steps.push(evt);
           narratives[evt.narrative].byId[evt.id] = { next: null, prev: null };
         }
@@ -117,6 +118,7 @@ export const selectNarratives = createSelector(
 
         narratives[key] = Object.assign(narrativeMetadata.find(n => n.id === key), narratives[key]);
       });
+      console.log(narrativeMetadata, narratives)
 
       return Object.values(narratives);
 });

webpack.config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const userConfig = require('./dev.config');
+const userConfig = require('./config');
 const userConfigJSON = {};
 
 const devMode = process.env.NODE_ENV !== 'production';