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}

@@ -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() + ) +}