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 (
-
- )
- }
+
+
+
+
+
+
+
{this.state.candidate}
+
+ )
+ }
}
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 (
-
+
+
Candidate: {cand}
+
{this.props.articles.map(el => (
- -
-
{el.created_at}
- {el.text}
+ -
+
{el.title}
))}
-
+
+
)
}
}
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()
+ )
}