Add a new employee form in react app.

Author: finleycw1

client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Employees",
+  "name": "Employee Coding Challenge App",
   "icons": [
     {
       "src": "favicon.ico",

client/src/App.js

@@ -1,23 +1,29 @@
 import './App.css';
 
 import EmployeeTable from './EmployeeTable';
+import NewEmployeeForm from "./NewEmployeeForm";
+
 import {useEffect, useState} from "react";
 import axios from "axios";
 
 function App() {
-  const [employees, setEmployees] = useState([]);
+    const [employees, setEmployees] = useState([]);
 
-  useEffect(() => {
-    axios.get('/api/employees').then(
-        response => {
-          setEmployees(response.data);
-        }
-    );
-  }, []);
+    // Populate the table
+    useEffect(() => {
+        axios.get('/api/employees').then(
+            response => {
+                setEmployees(response.data);
+            }
+        );
+    }, []);
 
-  return (
-    <EmployeeTable employees={employees} />
-  );
+    return (
+        <>
+            <EmployeeTable employees={employees}/>
+            <NewEmployeeForm/>
+        </>
+    );
 }
 
 export default App;

client/src/Employee.js

@@ -4,10 +4,10 @@ function Employee (props) {
 
     return (
         <tr>
-            <td><input type="text" value={employee.fname} /></td>
-            <td><input type="text" value={employee.lname} /></td>
-            <td><input type="text" value={employee.hdate} /></td>
-            <td><input type="text" value={employee.role} /></td>
+            <td><input type="text" value={employee.fname} onChange={props.onChange} /></td>
+            <td><input type="text" value={employee.lname} onChange={props.onChange} /></td>
+            <td><input type="text" value={employee.hdate} onChange={props.onChange} /></td>
+            <td><input type="text" value={employee.role} onChange={props.onChange} /></td>
             <td>{employee.id}</td>
             <td><button>Delete</button></td>
         </tr>

client/src/EmployeeTable.js

@@ -2,22 +2,23 @@ import Employee from "./Employee";
 
 function EmployeeTable (props) {
     return (
-        <table>
-            <thead>
-            <tr>
-                <th>First Name</th>
-                <th>Last Name</th>
-                <th>Hire Date</th>
-                <th>Role</th>
-                <th>ID</th>
-            </tr>
-            </thead>
-            <tbody>
-               {props.employees.map(e => <Employee employee={e}/>)}
-            </tbody>
+        <form>
+            <table>
+                <thead>
+                <tr>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Hire Date</th>
+                    <th>Role</th>
+                    <th>ID</th>
+                </tr>
+                </thead>
+                <tbody>
+                   {props.employees.map(e => <Employee key={e.id} employee={e} onChange={() => console.log("Something changed...")}/>)}
+                </tbody>
+            </table>
             <button>Submit Changes</button>
-            <button>New Record</button>
-        </table>
+        </form>
     )
 }
 

client/src/NewEmployeeForm.js

@@ -0,0 +1,48 @@
+import {useState} from "react";
+import axios from "axios";
+
+function NewEmployeeForm() {
+
+    const [employee, setEmployee] = useState({fname: '', lname: '', hdate: '', role: ''});
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        console.log(employee);
+        axios.post('api/employees', employee)
+            .then(response => console.log(response))
+            .catch(error => console.log(error));
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <h2>Add New Employee</h2>
+            <table>
+                <thead>
+                <tr>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Hire Date</th>
+                    <th>Role</th>
+                </tr>
+                <tr>
+                    <td><input id="newEmployeeFirstName" type="text" value={employee.fname}
+                               onChange={e => (setEmployee({...employee, fname: e.target.value}))}
+                    /></td>
+                    <td><input id="newEmployeeLastName" type="text" value={employee.lname}
+                               onChange={e => (setEmployee({...employee, lname: e.target.value}))}
+                    /></td>
+                    <td><input id="newEmployeeHireDate" type="text" value={employee.hdate}
+                               onChange={e => (setEmployee({...employee, hdate: e.target.value}))}
+                    /></td>
+                    <td><input id="newEmployeeRole" type="text" value={employee.role}
+                               onChange={e => (setEmployee({...employee, role: e.target.value}))}
+                    /></td>
+                </tr>
+                </thead>
+            </table>
+            <button>New Record</button>
+        </form>
+    );
+}
+
+export default NewEmployeeForm