From 40ac0eb12048308100bbc4f453be4419d5fe4324 Mon Sep 17 00:00:00 2001
From: Franc Camps-Febrer <francamps@gmail.com>
Date: Fri, 14 Dec 2018 17:21:36 +0100
Subject: [PATCH] Only rerender NarrativeCard if step has changed

---
 src/components/Dashboard.jsx    | 11 +++++++----
 src/components/NarrativeCard.js | 11 ++++++++---
 src/reducers/app.js             |  1 -
 src/selectors/index.js          |  1 -
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 0f400db..286be0d 100644
--- a/src/components/Dashboard.jsx
+++ b/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}
diff --git a/src/components/NarrativeCard.js b/src/components/NarrativeCard.js
index 3a41abb..080ae85 100644
--- a/src/components/NarrativeCard.js
+++ b/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];
 
diff --git a/src/reducers/app.js b/src/reducers/app.js
index 4fc0dc5..7fe01be 100644
--- a/src/reducers/app.js
+++ b/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,
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 30d65a9..0a96eee 100644
--- a/src/selectors/index.js
+++ b/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 []
     }