Only rerender NarrativeCard if step has changed

src/components/Dashboard.jsx

@@ -94,10 +94,13 @@ class Dashboard extends React.Component {
             getCategoryColor: category => this.getCategoryColor(category)
           }}
         />
-        <NarrativeCard
-          onSelect={this.handleSelect}
-          onSelectNarrative={(narrative) => { this.props.actions.updateNarrative(narrative); }}
-        />
+        {(this.props.app.narrative !== null)
+            ? <NarrativeCard
+              onSelect={this.handleSelect}
+              onSelectNarrative={(narrative) => { this.props.actions.updateNarrative(narrative); }}
+            />
+            : ''
+        }
         <CardStack
           onSelect={this.handleSelect}
           onHighlight={this.handleHighlight}

src/components/NarrativeCard.js

@@ -23,8 +23,13 @@ class NarrativeCard extends React.Component {
     }
   }
 
-  componentDidUpdate() {
-    if (this.props.narrative !== null) {
+  componentDidMount() {
+    const step = this.props.narrative.steps[this.state.step];
+    this.props.onSelect([step]);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.narrative === this.props.narrative && this.state.step !== prevState.step) {
       const step = this.props.narrative.steps[this.state.step];
       this.props.onSelect([step]);
     }
@@ -42,7 +47,7 @@ class NarrativeCard extends React.Component {
   }
 
   render() {
-    if (this.props.narrative !== null && this.props.narrative.steps[this.state.step]) {
+    if (this.props.narrative.steps[this.state.step]) {
       const steps = this.props.narrative.steps;
       const step = steps[this.state.step];
 

src/reducers/app.js

@@ -32,7 +32,6 @@ function updateSelected(appState, action) {
 }
 
 function updateNarrative(appState, action) {
-  console.log('this happens')
   if (action.narrative === null) {
     return Object.assign({}, appState, {
       narrative: action.narrative,

src/selectors/index.js

@@ -163,7 +163,6 @@ export const selectLocations = createSelector(
 export const selectSelected = createSelector(
   [getSelected, getSources],
   (selected, sources) => {
-    console.log(selected, sources)
     if (selected.length === 0) {
       return []
     }