Hillary and Trump sagas

src/js/actions/index.js

@@ -12,3 +12,11 @@ export function addArticle(payload) {
 export function getData() {
   return { type: "DATA_REQUESTED" }
 }
+
+export function getTrumpData() {
+  return { type: "DATA_TRUMP_REQUESTED" }
+}
+
+export function getHillaryData() {
+  return { type: "DATA_HILLARY_REQUESTED" }
+}

src/js/components/App.jsx

@@ -17,7 +17,7 @@ const App = () => (
     </div>
 		
 		<div className="col-md-4 offset-md-1">
-      <h2>API posts</h2>
+      <h2>Latest tweets</h2>
       <Post />
 		</div>
 

src/js/components/Form.jsx

@@ -17,7 +17,7 @@ class ConnectedForm extends Component {
 
     this.state = {
 			title: '',
-			candidate: 'Hillary'
+			candidate: ''
     }
 
     this.handleChange = this.handleChange.bind(this)
@@ -26,6 +26,11 @@ class ConnectedForm extends Component {
 		this.clickHilary = this.clickHilary.bind(this)
   }
 
+	componentDidMount() {
+		this.props.setCandidate('Hillary Clinton')
+		this.setState({ candidate: 'Hillary Clinton'})
+	}
+
   handleChange(event) {
     this.setState({ [event.target.id]: event.target.value })
   }

src/js/components/Posts.jsx

@@ -1,10 +1,18 @@
 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()
+    // this.props.getData()
+		if (this.props.candidate === 'Hilary Clinton') {
+			this.props.getHillaryData()
+		}
+		else {
+			this.props.getTrumpData()
+		}
   }
 
   render() {
@@ -15,8 +23,9 @@ export class Post extends Component {
 				<p>Candidate: {cand}</p>
 				<ul className="list-group list-group-flush">
         {this.props.articles.map(el => (
-          <li className="list-group-item" key={el.id}>
+					<li className="list-group-item" key={el.id_str}>
-						<p>{el.title}</p>
+						<p>{el.created_at}</p>
+						<p>{el.text}</p>
           </li>
         ))}
 			</ul>
@@ -34,5 +43,5 @@ function mapStateToProps(state) {
 
 export default connect(
   mapStateToProps,
-  { getData }
+  { getData, getHillaryData, getTrumpData }
 )(Post)

src/js/sagas/api-saga.js

@@ -1,6 +1,14 @@
-import { takeEvery, call, put } from 'redux-saga/effects'
+import { takeEvery, call, put, all } from 'redux-saga/effects'
 
 export default function* watcherSaga() {
+	yield all([
+		worker(),
+		workerHillary(),
+		workerTrump()
+	])
+}
+
+function* worker() {
 	yield takeEvery("DATA_REQUESTED", workerSaga)
 }
 
@@ -13,12 +21,46 @@ function* workerSaga() {
 	}
 }
 
-function getData() {
+function* workerHillary() {
-	// return fetch("http://localhost:3030/api/twitter?hashtag=tesla").then(res1 =>
+	yield takeEvery("DATA_TRUMP_REQUESTED", workerTrumpSaga)
-	// 	res1.json()
+}
-	// )
 
+function* workerHillarySaga() {
+	try {
+		const payload = yield call(getHillaryData)
+		yield put({ type: "DATA_LOADED", payload })
+	} catch (e) {
+		yield put({ type: "API_ERRORED", payload: e })
+	}
+}
+
+function* workerTrump() {
+	yield takeEvery("DATA_HILLARY_REQUESTED", workerHillarySaga)
+}
+
+function* workerTrumpSaga() {
+	try {
+		const payload = yield call(getTrumpData)
+		yield put({ type: "DATA_LOADED", payload })
+	} catch (e) {
+		yield put({ type: "API_ERRORED", payload: e })
+	}
+}
+
+function getData() {
 	return fetch("https://jsonplaceholder.typicode.com/posts").then(response =>
 		response.json()
 	)
 }
+
+function getHillaryData() {
+	return fetch("http://localhost:3030/api/twitter?hashtag=Hillary%20Clinton").then(res1 =>
+		res1.json()
+	)
+}
+
+function getTrumpData() {
+	return fetch("http://localhost:3030/api/twitter?hashtag=Donald%20Trump").then(res1 =>
+		res1.json()
+	)
+}