added EditUserForm (toggle button functionality for updating/saving a user within the list)

Author: NicholasKyleHoffman

src/App.js

@@ -1,50 +1,64 @@
 import React, { useState } from 'react';
 import UserTable from './tables/UserTable';
 import AddUserForm from './forms/AddUserForm';
+import EditUserForm from './forms/EditUserForm'
 
-// simple functional component returns app skeleton
 const App = () => {
   const usersData = [
     { id:1, name:'Nick', username:'ebb_n_flow' },
-    { id:2, name:'Shane O.', username:'tootired' },
-    { id:3, name:'Benjamin', username:'rootsrevival' },
+    { id:2, name:'Shane O.', username:'too-tired' },
+    { id:3, name:'Shawna', username:'rootsrevival' },
+    { id:4, name:'Sheena, W.P.', username:'sheenaWp312' }
   ]
 
-  const [users, setUsers] = useState(usersData)
+// Hooks syntax - you define the two params in [x, y]. 
+// useState comes from React import for handling state
 
+  const [users, setUsers] = useState(usersData)
 
-// https://www.taniarascia.com/crud-app-in-react-with-hooks/
-  // Since we’re not using a real API and database, which would 
-  // probably have an auto-incrementing ID, I’m going to 
-  // increment the ID of the new user manually. This function will 
-  // take a user object as a parameter, and add them to the users array
-  // of objects. The ...users code ensures that all the previous users
-  //  remain in the array.
 
+// increment the ID of the new user manually - function will 
+// take a user object as a parameter,  add them to the users array of objects
+// the ...users code ensures that all the previous users remain in the array
 
-// Passed through 
   const addUser = (user) => {
     user.id = user.length + 1
     setUsers([ ...users, user ])
   } 
 
   // pass deleteUser through props to UserTable
+  // use setter to take ID of user & filter them out of the users array 
   const deleteUser = (id) => {
     setUsers(users.filter(user => user.id !== id))
   }
 
+  const [editing, setEditing] = useState(false)
+  const initialFormState = {id:null, name:'', username:'' }
+  const [ currentUser, setCurrentUser ] = useState(initialFormState)
+  
+  const editRow = (user) => {
+    setEditing(true)
+    setCurrentUser({ id:user.id, name:user.name, username:user.username})
+  }
+
+  const updateUser = (id, updatedUser) => {
+    setEditing(false)
+
+    setUsers(users.map(user=> (user.id === id ? updatedUser : user))) 
+  }
+
 
   return (
     <div className="container">
-      <h1>CRUD App with Hooks</h1>
+      <h1>CRUD React App with Hooks Instead of Classes</h1>
       <div className="flex-row">
         <div className="flex-large">
           <h2>Add User</h2>
           <AddUserForm addUser={addUser} />
         </div>
         <div className="flex-large">
           <h2>View Users</h2>
-          <UserTable users={users} deleteUser={deleteUser} />
+          <UserTable users={users} editRow={editRow} deleteUser={deleteUser} />
         </div>
       </div>
     </div>

src/forms/AddUserForm.js

@@ -1,32 +1,38 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
-const AddUserForm = props => {
+const AddUserForm = (props) => {
 	const initialFormState = { id: null, name: '', username: '' }
 	const [ user, setUser ] = useState(initialFormState)
 
-	const handleInputChange = event => {
+	// update state based on event in input
+	const handleInputChange = (event) => {
 		const { name, value } = event.target
-			console.log(event)
 		setUser({ ...user, [name]: value })
 	}
 
 	return (
 		<form
-			onSubmit={event => {
-				event.preventDefault()
-				if (!user.name || !user.username) return
-
-				props.addUser(user)
-				setUser(initialFormState)
-			}}
+			onSubmit = { 
+				(event) => {
+					// default event for form is submit (preventing with a check)
+					event.preventDefault()
+					if (!user.name || !user.username) {
+						alert("Enter both name and username")
+						return;
+					} else {
+						props.addUser(user)
+						setUser(initialFormState)	
+					}
+			}
+		}
 		>
 			<label>Name</label>
 			<input type="text" name="name" value={user.name} onChange={handleInputChange} />
 			<label>Username</label>
 			<input type="text" name="username" value={user.username} onChange={handleInputChange} />
-			<button>Add new user</button>
+			<button>Add New User</button>
 		</form>
 	)
 }
 
-export default AddUserForm
+export default AddUserForm;

src/forms/EditUserForm

@@ -0,0 +1,30 @@
+const EditUserForm = props => {
+	const [ user, setUser ] = useState(props.currentUser)
+
+	const handleInputChange = event => {
+		const { name, value } = event.target
+
+		setUser({ ...user, [name]: value })
+	}
+
+	return (
+		<form
+			onSubmit={event => {
+				event.preventDefault()
+
+				props.updateUser(user.id, user)
+			}}
+		>
+			<label>Name</label>
+			<input type="text" name="name" value={user.name} onChange={handleInputChange} />
+			<label>Username</label>
+			<input type="text" name="username" value={user.username} onChange={handleInputChange} />
+			<button>Update user</button>
+			<button onClick={() => props.setEditing(false)} className="button muted-button">
+				Cancel
+			</button>
+		</form>
+	)
+}
+
+export default EditUserForm;

src/tables/UserTable.js

@@ -16,7 +16,13 @@ const UserTable = (props) => (
 						<td>{user.name}</td>
 						<td>{user.username}</td>
 						<td>
-							<button className="button muted-button">Edit</button>
+							<button 
+								onClick = {() => { 
+									props.editRow(user)
+								}} 
+								className="button muted-button"
+								>Edit
+							</button>
 							<button onClick={() => props.deleteUser(user.id)} className="button muted-button">Delete</button>
 						</td>
 					</tr>