From fbf7a5452cb4283f89f07f6d133cdeaba2902419 Mon Sep 17 00:00:00 2001
From: Rodrigo Pedroso <>
Date: Wed, 19 Jun 2019 14:49:50 -0400
Subject: [PATCH] Sample jsx components. React-redux.

---
 package.json               |  3 +-
 src/index.js               | 22 +++++++++-----
 src/js/components/App.jsx  | 18 ++++++++++++
 src/js/components/Form.jsx | 60 ++++++++++++++++++++++++++++++++++++++
 src/js/components/List.jsx | 20 +++++++++++++
 5 files changed, 114 insertions(+), 9 deletions(-)
 create mode 100644 src/js/components/App.jsx
 create mode 100644 src/js/components/Form.jsx
 create mode 100644 src/js/components/List.jsx

diff --git a/package.json b/package.json
index 9b839ac..f9f8cff 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "react-redux": "^7.1.0",
-    "redux": "^4.0.1"
+    "redux": "^4.0.1",
+    "uuid": "^3.3.2"
   }
 }
diff --git a/src/index.js b/src/index.js
index 08a2b71..c2e591e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,20 @@
-// import React from 'react';
-// import ReactDOM from 'react-dom';
-// import './index.css';
-// import App from './App';
-// import * as serviceWorker from './serviceWorker';
-import index from './js/index'
+import React from 'react'
+import ReactDOM from 'react-dom'
+// import './index.css'
+import { Provider } from 'react-redux'
+import store from './js/store/index'
+import App from './js/components/App.jsx'
+import * as serviceWorker from './serviceWorker'
 
-// ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+	<Provider	store={store}>
+		<App />
+	</Provider>,
+	document.getElementById('root')
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-// serviceWorker.unregister();
+serviceWorker.unregister();
 
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
new file mode 100644
index 0000000..a154a6f
--- /dev/null
+++ b/src/js/components/App.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import List from './List'
+import Form from './Form'
+
+const App = () => (
+  <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>
+)
+
+export default App
diff --git a/src/js/components/Form.jsx b/src/js/components/Form.jsx
new file mode 100644
index 0000000..f8abdec
--- /dev/null
+++ b/src/js/components/Form.jsx
@@ -0,0 +1,60 @@
+import React, { Component } from "react"
+import { connect } from "react-redux"
+import uuidv1 from "uuid"
+import { addArticle } from "../actions/index"
+
+function mapDispatchToProps(dispatch) {
+  return {
+    addArticle: article => dispatch(addArticle(article))
+  }
+}
+
+class ConnectedForm extends Component {
+  constructor() {
+    super()
+
+    this.state = {
+      title: ""
+    }
+
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(event) {
+    this.setState({ [event.target.id]: event.target.value })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    const { title } = this.state
+    const id = uuidv1()
+    this.props.addArticle({ title, id })
+    this.setState({ title: "" })
+  }
+
+  render() {
+    const { title } = this.state
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="title">Title</label>
+          <input
+            type="text"
+            className="form-control"
+            id="title"
+            value={title}
+            onChange={this.handleChange}
+          />
+        </div>
+        <button type="submit" className="btn btn-success btn-lg">
+          SAVE
+        </button>
+      </form>
+    )
+  }
+}
+
+const Form = connect(null, mapDispatchToProps)(ConnectedForm)
+
+export default Form
diff --git a/src/js/components/List.jsx b/src/js/components/List.jsx
new file mode 100644
index 0000000..c163231
--- /dev/null
+++ b/src/js/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