From ec69a8131e6bc3d08f20f30ca8146651251d0291 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Fri, 21 Jun 2019 11:51:07 -0400
Subject: [PATCH] Update state after redux action

---
 src/js/components/Posts.jsx      | 48 ++++++++++++++++----------------
 src/js/constants/action-types.js |  2 ++
 src/js/reducers/index.js         | 10 ++++++-
 3 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/js/components/Posts.jsx b/src/js/components/Posts.jsx
index bb4d728..eee7726 100644
--- a/src/js/components/Posts.jsx
+++ b/src/js/components/Posts.jsx
@@ -1,47 +1,47 @@
 import React, { Component } from "react"
 import { connect } from "react-redux"
-import { getData } from "../actions/index"
 import { getHillaryData } from "../actions/index"
 import { getTrumpData } from "../actions/index"
 
 export class Post extends Component {
-  componentDidMount() {
-    // this.props.getData()
-		if (this.props.candidate === 'Hilary Clinton') {
-			this.props.getHillaryData()
+	componentWillUpdate(nextProps, nextState) {
+		if (nextProps.candidate !== this.props.candidate) {
+			if (nextProps.candidate === 'Hillary Clinton') {
+				this.props.getHillaryData()
+			}
+			else if (nextProps.candidate === 'Donald Trump'){
+				this.props.getTrumpData()
+			}
 		}
-		else {
-			this.props.getTrumpData()
-		}
-  }
+	}
 
-  render() {
+	render() {
 		let cand = this.props.candidate === undefined ? 'Not set' : this.props.candidate
 
 		return (
 			<div>
-				<p>Candidate: {cand}</p>
+				<p>@{cand}</p>
 				<ul className="list-group list-group-flush">
-        {this.props.articles.map(el => (
-					<li className="list-group-item" key={el.id_str}>
-						<p>{el.created_at}</p>
-						<p>{el.text}</p>
-          </li>
-        ))}
-			</ul>
-		</div>
+					{this.props.articles.map(el => (
+						<li className="list-group-item" key={el.id_str}>
+							<p>{el.created_at}</p>
+							<p>{el.text}</p>
+						</li>
+					))}
+				</ul>
+			</div>
 		)
-  }
+	}
 }
 
 function mapStateToProps(state) {
-  return {
+	return {
 		articles: state.remoteArticles.slice(0, 10),
 		candidate: state.candidate
-  }
+	}
 }
 
 export default connect(
-  mapStateToProps,
-  { getData, getHillaryData, getTrumpData }
+	mapStateToProps,
+	{ getHillaryData, getTrumpData }
 )(Post)
diff --git a/src/js/constants/action-types.js b/src/js/constants/action-types.js
index 955e423..52ec196 100644
--- a/src/js/constants/action-types.js
+++ b/src/js/constants/action-types.js
@@ -1,2 +1,4 @@
 export const ADD_ARTICLE = "ADD_ARTICLE"
 export const SET_CANDIDATE = "SET_CANDIDATE"
+export const DATA_LOADED = "DATA_LOADED"
+export const DATA_LOADED_TO_ADD = "DATA_LOADED_TO_ADD"
diff --git a/src/js/reducers/index.js b/src/js/reducers/index.js
index cb2e26e..df49aca 100644
--- a/src/js/reducers/index.js
+++ b/src/js/reducers/index.js
@@ -1,5 +1,7 @@
 import { ADD_ARTICLE } from '../constants/action-types'
 import { SET_CANDIDATE } from '../constants/action-types'
+import { DATA_LOADED } from '../constants/action-types'
+import { DATA_LOADED_TO_ADD } from '../constants/action-types'
 
 const initialState = {
 	articles: [],
@@ -20,7 +22,13 @@ function rootReducer(state = initialState, action) {
     })
 	}
 
-	else if (action.type === "DATA_LOADED") {
+	else if (action.type === DATA_LOADED) {
+    return Object.assign({}, state, {
+      remoteArticles: action.payload.message.statuses
+    })
+	}
+
+	else if (action.type === DATA_LOADED_TO_ADD) {
     return Object.assign({}, state, {
       remoteArticles: state.remoteArticles.concat(action.payload.message.statuses)
     })