From aac33139ba0acfc374de55425fddc66ae22e9bd7 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Fri, 21 Jun 2019 10:53:16 -0400
Subject: [PATCH] Hillary and Trump sagas
---
src/js/actions/index.js | 8 ++++++
src/js/components/App.jsx | 2 +-
src/js/components/Form.jsx | 7 ++++-
src/js/components/Posts.jsx | 17 +++++++++---
src/js/sagas/api-saga.js | 52 +++++++++++++++++++++++++++++++++----
5 files changed, 75 insertions(+), 11 deletions(-)
diff --git a/src/js/actions/index.js b/src/js/actions/index.js
index c68a0bf..600c64f 100644
--- a/src/js/actions/index.js
+++ b/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" }
+}
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
index f3bef38..62a7b7a 100644
--- a/src/js/components/App.jsx
+++ b/src/js/components/App.jsx
@@ -17,7 +17,7 @@ const App = () => (
-
API posts
+
Latest tweets
diff --git a/src/js/components/Form.jsx b/src/js/components/Form.jsx
index 8e2d61b..f70e28c 100644
--- a/src/js/components/Form.jsx
+++ b/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 })
}
diff --git a/src/js/components/Posts.jsx b/src/js/components/Posts.jsx
index a06e4cf..bb4d728 100644
--- a/src/js/components/Posts.jsx
+++ b/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 {
Candidate: {cand}
{this.props.articles.map(el => (
- -
-
{el.title}
+ -
+
{el.created_at}
+ {el.text}
))}
@@ -34,5 +43,5 @@ function mapStateToProps(state) {
export default connect(
mapStateToProps,
- { getData }
+ { getData, getHillaryData, getTrumpData }
)(Post)
diff --git a/src/js/sagas/api-saga.js b/src/js/sagas/api-saga.js
index 1e41ed0..3435b82 100644
--- a/src/js/sagas/api-saga.js
+++ b/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() {
- // return fetch("http://localhost:3030/api/twitter?hashtag=tesla").then(res1 =>
- // res1.json()
- // )
+function* workerHillary() {
+ yield takeEvery("DATA_TRUMP_REQUESTED", workerTrumpSaga)
+}
+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()
+ )
+}