Clean up

src/components/App.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import List from './List'
+import Form from './Form'
+import Post from './Posts'
+
+export default function App() {
+	return (
+		<div className = 'row mt-5'>
+
+			<div className = 'col-md-4 offset-md-1'>
+				<h2>Articles</h2>
+				<List />
+			</div>
+
+			<div className = 'col-md-4 offset-md-1'>
+				<h2>Add a new article</h2>
+				<Form />
+			</div>
+
+			<div className="col-md-4 offset-md-1">
+				<h2>Latest tweets</h2>
+				<Post />
+			</div>
+
+		</div>
+	)
+}

src/components/Form.css

@@ -0,0 +1,7 @@
+button {
+	margin: 10px;
+}
+
+.clicked {
+	background-color: lightgray;
+}

src/components/Form.jsx

@@ -0,0 +1,55 @@
+// MARK: Definitions
+import React, { useState, useEffect } from "react"
+import { connect } from "react-redux"
+import { addArticle } from "../actions/index"
+import { setCandidate } from "../actions/index"
+import './Form.css'
+
+export function ConnectedForm(props) {
+	// MARK: State
+	let [selected, setSelected] = useState('')
+	let { candidate, setCandidate } = props
+
+	// MARK: Effects
+	// MARK: - Set Clinton as initial candidate
+	useEffect(() => {
+		setCandidate('Hillary Clinton')
+		setSelected('Hillary Clinton')
+	}, [setCandidate])
+
+	// MARK: - Set candidate when user clicks on button
+	useEffect(() => {
+		setCandidate(selected)
+	})
+
+	// MARK: Actions
+	let clickTrump = () => {
+		setSelected('Donald Trump')
+	}
+
+	let clickHillary = () => {
+		setSelected('Hillary Clinton')
+	}
+
+	// MARK: Return
+	return (
+		<div className='form'>
+			<button className={selected === 'Donald Trump' ? 'clicked' : null} onClick={clickTrump}>Donald Trump</button>
+			<button className={selected === 'Hillary Clinton' ? 'clicked' : null} onClick={clickHillary}>Hillary Clinton</button>
+
+			<p>{candidate}</p>
+		</div>
+	)
+}
+
+// MARK: Redux
+function mapDispatchToProps(dispatch) {
+  return {
+		addArticle: article => dispatch(addArticle(article)),
+		setCandidate: candidate => dispatch(setCandidate(candidate))
+  }
+}
+
+const Form = connect(null, mapDispatchToProps)(ConnectedForm)
+
+export default Form

src/components/List.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { connect } from "react-redux"
+
+const mapStateToProps = state => {
+  return { articles: state.articles }
+}
+
+const ConnectedList = ({ articles }) => (
+  <ul className="list-group list-group-flush">
+    {articles.map(el => (
+      <li className="list-group-item" key={el.id}>
+        {el.title}
+      </li>
+    ))}
+  </ul>
+)
+
+const List = connect(mapStateToProps)(ConnectedList)
+
+export default List

src/components/Posts.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react"
+import { connect } from "react-redux"
+import { getHillaryData } from "../actions/index"
+import { getTrumpData } from "../actions/index"
+
+export function Post(props) {
+	let { articles, candidate, getHillaryData, getTrumpData } = props
+
+	// Fetch tweets when user clicks on candidate's button
+	useEffect(() => {
+		if (candidate === 'Hillary Clinton') {
+			getHillaryData()
+		}
+		else if (candidate === 'Donald Trump') {
+			getTrumpData()
+		}
+	}, [candidate, getHillaryData, getTrumpData])
+
+	let cand = candidate === undefined ? 'Not set' : candidate
+
+	return (
+		<div>
+			<p>@{cand}</p>
+			<ul className="list-group list-group-flush">
+				{articles.map(el => (
+					<li className="list-group-item" key={el.id_str}>
+						<p>{el.created_at}</p>
+						<p>{el.text}</p>
+					</li>
+				))}
+			</ul>
+		</div>
+	)
+}
+
+function mapStateToProps(state) {
+	return {
+		articles: state.remoteArticles.slice(0, 10),
+		candidate: state.candidate
+	}
+}
+
+export default connect(
+	mapStateToProps,
+	{ getHillaryData, getTrumpData }
+)(Post)