Merge pull request #865 from nextstrain/narratives-bug

Narratives bug

src/actions/recomputeReduxState.js

@@ -106,6 +106,7 @@ const modifyStateViaURLQuery = (state, query) => {
 const restoreQueryableStateToDefaults = (state) => {
   for (const key of Object.keys(state.defaults)) {
     switch (typeof state.defaults[key]) {
+      case "boolean": // fallthrough
       case "string": {
         state[key] = state.defaults[key];
         break;
@@ -115,7 +116,7 @@ const restoreQueryableStateToDefaults = (state) => {
         break;
       }
       default: {
-        console.error("unknown typeof for default state of ", key);
+        console.error("unknown typeof for default state of ", key, state.defaults[key]);
       }
     }
   }
@@ -612,12 +613,27 @@ export const createStateFromQueryOrJSONs = ({
     controls = restoreQueryableStateToDefaults(controls);
   }
 
+
+  /* For the creation of state, we want to parse out URL query parameters
+  (e.g. ?c=country means we want to color-by country) and modify the state
+  accordingly. For narratives, we _don't_ display these in the URL, instead
+  only displaying the page number (e.g. ?n=3), but we can look up what (hidden)
+  URL query this page defines via this information */
   if (narrativeBlocks) {
     narrative = narrativeBlocks;
-    const n = parseInt(query.n, 10) || 0;
+    let n = parseInt(query.n, 10) || 0;
+    /* If the query has defined a block which doesn't exist then default to n=0 */
+    if (n >= narrative.length) {
+      console.warn(`Attempted to go to narrative page ${n} which doesn't exist`);
+      n=0;
+    }
     controls = modifyStateViaURLQuery(controls, queryString.parse(narrative[n].query));
-    query = {n}; // eslint-disable-line
-    console.log("redux state changed to relfect n of", n);
+    query = n===0 ? {} : {n}; // eslint-disable-line
+    /* If the narrative block in view defines a `mainDisplayMarkdown` section, we
+    update `controls.panelsToDisplay` so this is displayed */
+    if (narrative[n].mainDisplayMarkdown) {
+      controls.panelsToDisplay = ["EXPERIMENTAL_MainDisplayMarkdown"];
+    }
   } else {
     controls = modifyStateViaURLQuery(controls, query);
   }

src/components/narrative/index.js

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-danger */
+/* eslint-disable react/no-array-index-key */
 import React from "react";
 import { connect } from "react-redux";
 import queryString from "query-string";
@@ -114,7 +115,7 @@ class Narrative extends React.Component {
           const d = (!this.state.showingEndOfNarrativePage) && this.props.currentInFocusBlockIdx === i ?
             "14px" : "6px";
           return (<div
-            key={b.__html.slice(0, 30)}
+            key={i}
             style={{width: d, height: d, background: "#74a9cf", borderRadius: "50%", cursor: "pointer"}}
             onClick={() => this.reactPageScroller.goToPage(i)}
           />);
@@ -126,7 +127,7 @@ class Narrative extends React.Component {
     const ret = this.props.blocks.map((b, i) => (
       <div
         id={`NarrativeBlock_${i}`}
-        key={b.__html.slice(0, 50)}
+        key={i}
         style={{
           padding: "10px 20px",
           height: "inherit",

src/middleware/changeURL.js

@@ -36,6 +36,7 @@ export const changeURLMiddleware = (store) => (next) => (action) => {
     case types.URL_QUERY_CHANGE_WITH_COMPUTED_STATE: // fallthrough
     case types.CHANGE_URL_QUERY_BUT_NOT_REDUX_STATE:
       query = action.query;
+      if (query.n === 0) delete query.n;
       if (query.tt) delete query.tt;
       break;
     case types.CHANGE_ZOOM:

src/reducers/narrative.js

@@ -1,4 +1,3 @@
-import queryString from "query-string";
 import * as types from "../actions/types";
 
 const explanationParagraph=`
@@ -32,7 +31,7 @@ const narrative = (state = {
           blocks,
           title: blocks[0].__html.match(/>(.+?)</)[1],
           pathname: window.location.pathname,
-          blockIdx: parseInt(queryString.parse(window.location.search).n, 10) || 0
+          blockIdx: action.query.n || 0
         };
       }
       return state;