diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js index 15a7e4fcb..3607e166b 100644 --- a/src/actions/recomputeReduxState.js +++ b/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); } diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js index c357bb03a..6842b54de 100644 --- a/src/components/narrative/index.js +++ b/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 (
this.reactPageScroller.goToPage(i)} />); @@ -126,7 +127,7 @@ class Narrative extends React.Component { const ret = this.props.blocks.map((b, i) => (
(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: diff --git a/src/reducers/narrative.js b/src/reducers/narrative.js index 05fdee164..a207e4b26 100644 --- a/src/reducers/narrative.js +++ b/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(/>(.+?)