From a2b8e7480ee9c9a7c233a6d894eadae4833cf416 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Fri, 21 Jun 2019 00:59:25 -0400
Subject: [PATCH] Candidate swapping button

---
 src/js/actions/index.js          |  5 +++
 src/js/components/Form.jsx       | 66 ++++++++++++++++++++++----------
 src/js/components/Posts.jsx      | 17 +++++---
 src/js/constants/action-types.js |  1 +
 src/js/reducers/index.js         | 10 ++++-
 src/js/sagas/api-saga.js         | 12 +++---
 6 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/src/js/actions/index.js b/src/js/actions/index.js
index e2c3c50..c68a0bf 100644
--- a/src/js/actions/index.js
+++ b/src/js/actions/index.js
@@ -1,4 +1,9 @@
 import { ADD_ARTICLE } from "../constants/action-types"
+import { SET_CANDIDATE } from "../constants/action-types"
+
+export function setCandidate(payload) {
+	return { type: SET_CANDIDATE, payload }
+}
 
 export function addArticle(payload) {
   return { type: ADD_ARTICLE, payload }
diff --git a/src/js/components/Form.jsx b/src/js/components/Form.jsx
index c1029ad..8e2d61b 100644
--- a/src/js/components/Form.jsx
+++ b/src/js/components/Form.jsx
@@ -2,10 +2,12 @@ import React, { Component } from "react"
 import { connect } from "react-redux"
 import uuidv1 from "uuid"
 import { addArticle } from "../actions/index"
+import { setCandidate } from "../actions/index"
 
 function mapDispatchToProps(dispatch) {
   return {
-    addArticle: article => dispatch(addArticle(article))
+		addArticle: article => dispatch(addArticle(article)),
+		setCandidate: candidate => dispatch(setCandidate(candidate))
   }
 }
 
@@ -14,11 +16,14 @@ class ConnectedForm extends Component {
     super()
 
     this.state = {
-      title: ""
+			title: '',
+			candidate: 'Hillary'
     }
 
     this.handleChange = this.handleChange.bind(this)
-    this.handleSubmit = this.handleSubmit.bind(this)
+		this.handleSubmit = this.handleSubmit.bind(this)
+		this.clickTrump = this.clickTrump.bind(this)
+		this.clickHilary = this.clickHilary.bind(this)
   }
 
   handleChange(event) {
@@ -32,28 +37,47 @@ class ConnectedForm extends Component {
 
     this.props.addArticle({ title, id })
     this.setState({ title: "" })
-  }
+	}
+
+	clickTrump(event) {
+		event.preventDefault()
+		this.props.setCandidate('Donald Trump')
+		this.setState({ candidate: 'Donald Trump' })
+	}
+
+	clickHilary(event) {
+		event.preventDefault()
+		this.props.setCandidate('Hillary Clinton')
+		this.setState({ candidate: 'Hillary Clinton' })
+	}
 
   render() {
     const { title } = this.state
     return (
-      <form onSubmit={this.handleSubmit}>
-        <div className="form-group">
-          <label htmlFor="title">Title</label>
-          <input
-            type="text"
-            className="form-control"
-            id="title"
-            value={title}
-            onChange={this.handleChange}
-          />
-        </div>
-        <button type="submit" className="btn btn-success btn-lg">
-          SAVE
-        </button>
-      </form>
-    )
-  }
+			<div>
+				<form onSubmit={this.handleSubmit}>
+					<div className="form-group">
+						<label htmlFor="title">Title</label>
+						<input
+							type="text"
+							className="form-control"
+							id="title"
+							value={title}
+							onChange={this.handleChange}
+						/>
+					</div>
+					<button type="submit" className="btn btn-success btn-lg">
+						SAVE
+					</button>
+				</form>
+
+				<button onClick={this.clickTrump}>Donald Trump</button>
+				<button onClick={this.clickHilary}>Hillary Clinton</button>
+
+				<p>{this.state.candidate}</p>
+			</div>
+		)
+	}
 }
 
 const Form = connect(null, mapDispatchToProps)(ConnectedForm)
diff --git a/src/js/components/Posts.jsx b/src/js/components/Posts.jsx
index 41fce1c..a06e4cf 100644
--- a/src/js/components/Posts.jsx
+++ b/src/js/components/Posts.jsx
@@ -8,22 +8,27 @@ export class Post extends Component {
   }
 
   render() {
+		let cand = this.props.candidate === undefined ? 'Not set' : this.props.candidate
+
 		return (
-			<ul className="list-group list-group-flush">
+			<div>
+				<p>Candidate: {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 className="list-group-item" key={el.id}>
+						<p>{el.title}</p>
           </li>
         ))}
-      </ul>
+			</ul>
+		</div>
 		)
   }
 }
 
 function mapStateToProps(state) {
   return {
-    articles: state.remoteArticles.slice(0, 10)
+		articles: state.remoteArticles.slice(0, 10),
+		candidate: state.candidate
   }
 }
 
diff --git a/src/js/constants/action-types.js b/src/js/constants/action-types.js
index 3adf5cf..955e423 100644
--- a/src/js/constants/action-types.js
+++ b/src/js/constants/action-types.js
@@ -1 +1,2 @@
 export const ADD_ARTICLE = "ADD_ARTICLE"
+export const SET_CANDIDATE = "SET_CANDIDATE"
diff --git a/src/js/reducers/index.js b/src/js/reducers/index.js
index 7f5e637..cb2e26e 100644
--- a/src/js/reducers/index.js
+++ b/src/js/reducers/index.js
@@ -1,8 +1,10 @@
 import { ADD_ARTICLE } from '../constants/action-types'
+import { SET_CANDIDATE } from '../constants/action-types'
 
 const initialState = {
 	articles: [],
-	remoteArticles: []
+	remoteArticles: [],
+	candidate: ''
 }
 
 function rootReducer(state = initialState, action) {
@@ -12,6 +14,12 @@ function rootReducer(state = initialState, action) {
     })
 	}
 
+	else if (action.type === SET_CANDIDATE) {
+		return Object.assign({}, state, {
+      candidate: action.payload
+    })
+	}
+
 	else if (action.type === "DATA_LOADED") {
     return Object.assign({}, state, {
       remoteArticles: state.remoteArticles.concat(action.payload.message.statuses)
diff --git a/src/js/sagas/api-saga.js b/src/js/sagas/api-saga.js
index 7a687e5..1e41ed0 100644
--- a/src/js/sagas/api-saga.js
+++ b/src/js/sagas/api-saga.js
@@ -14,11 +14,11 @@ function* workerSaga() {
 }
 
 function getData() {
-	return fetch("http://localhost:3030/api/twitter?hashtag=tesla").then(res1 =>
-		res1.json()
-	)
-
-	// return fetch("https://jsonplaceholder.typicode.com/posts").then(response =>
-	// 	response.json()
+	// return fetch("http://localhost:3030/api/twitter?hashtag=tesla").then(res1 =>
+	// 	res1.json()
 	// )
+
+	return fetch("https://jsonplaceholder.typicode.com/posts").then(response =>
+		response.json()
+	)
 }