Initial commit

taniarascia · Oct 26, 2018 · 6e636e5 · 6e636e5
1 parent e913689
commit 6e636e5
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 2,797 deletions.
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "react-scripts": "2.0.5"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,7 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="stylesheet" href="https://taniarascia.github.io/primitive/css/main.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,7 +20,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React CRUD App with Hooks</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,28 +1,152 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
-    );
+import React, { useState } from 'react'
+
+function App() {
+  // Data
+  const usersData = [
+    { name: 'Tania', username: 'floppydiskette' },
+    { name: 'Dan', username: 'gaeron' },
+  ]
+
+  const initialFormState = { name: '', username: '' }
+
+  // Setting state
+  const [users, setUser] = useState(usersData)
+  const [form, setForm] = useState(initialFormState)
+  const [editForm, setEditForm] = useState(initialFormState)
+  const [editing, setEditing] = useState(false)
+
+  // CRUD operations
+  const addUser = event => {
+    event.preventDefault()
+
+    if (!form.name || !form.username) return
+
+    setUser([...users, form])
+  }
+
+  const updateUser = (id, updatedUser) => {
+    setUser(users.map(user => (user.name === id ? updatedUser : user)))
+    setEditing(false)
   }
+
+  const deleteUser = id => {
+    setUser(users.filter(user => user.name !== id))
+  }
+
+  const editRow = user => {
+    setEditing(true)
+
+    setEditForm({ name: user.name, username: user.username })
+  }
+
+  // Form state
+  const handleInputChange = event => {
+    const { name, value } = event.target
+
+    setForm({ ...form, [name]: value })
+  }
+
+  const handleEditInputChange = event => {
+    const { name, value } = event.target
+
+    setEditForm({ ...editForm, [name]: value })
+  }
+
+  return (
+    <div className="small-container">
+      <h1>React CRUD App with Hooks</h1>
+      <h3>Add New User</h3>
+      <form onSubmit={addUser}>
+        <label>Name</label>
+        <input
+          type="text"
+          name="name"
+          value={form.name}
+          onChange={handleInputChange}
+        />
+        <label>Username</label>
+        <input
+          type="text"
+          name="username"
+          value={form.username}
+          onChange={handleInputChange}
+        />
+        <button>Add new user</button>
+      </form>
+
+      <h2>View Users</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Username</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.length > 0 ? (
+            users.map(user => (
+              <tr key={user.name}>
+                <td>{user.name}</td>
+                <td>{user.username}</td>
+                <td>
+                  <button
+                    onClick={() => editRow(user)}
+                    className="button muted-button"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    onClick={() => deleteUser(user.name)}
+                    className="button muted-button"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={3}>No users</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      {editing ? (
+        <div>
+          <h2>Edit User</h2>
+          <form
+            onSubmit={event => {
+              event.preventDefault()
+              updateUser(editForm.name, editForm)
+            }}
+          >
+            <label>Name</label>
+            <input
+              type="text"
+              name="name"
+              value={editForm.name}
+              onChange={handleEditInputChange}
+            />
+            <label>Username</label>
+            <input
+              type="text"
+              name="username"
+              value={editForm.username}
+              onChange={handleEditInputChange}
+            />
+            <button>Update user</button>
+            <button
+              onClick={() => setEditing(false)}
+              class="button muted-button"
+            >
+              Cancel
+            </button>
+          </form>
+        </div>
+      ) : null}
+    </div>
+  )
 }
 
-export default App;
+export default App
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/index.css b/src/index.css
@@ -1,14 +1,23 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.small-container {
+  padding: 60px 0 120px;
+}
+
+button, .button {
+  margin-bottom: 0 !important;
+  margin-right: .5rem;
+}
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,5 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, 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: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/logo.svg b/src/logo.svg