Replace axios calls with fetch.

Author: finleycw1

client/package-lock.json

@@ -6,7 +6,6 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.21.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

client/package.json

@@ -4,17 +4,25 @@ import EmployeeTable from './EmployeeTable';
 import NewEmployeeForm from "./NewEmployeeForm";
 
 import {useEffect, useState} from "react";
-import axios from "axios";
 
 function App() {
     const [employees, setEmployees] = useState([]);
 
     const reloadEmployeeTable = () => {
-        axios.get('/api/employees').then(
-            response => {
-                setEmployees(response.data);
-            }
-        );
+        fetch(`/api/employees`, {
+            method: 'GET',
+            accept: "Application/JSON"
+        })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                }
+                else {
+                    throw new Error("Unable to fetch employee list.")
+                }
+            })
+            .then(updatedEmployees => setEmployees(updatedEmployees))
+            .catch(error => console.log(error));
     };
 
     // Populate the table

client/src/App.js

@@ -11,7 +11,9 @@ function EmployeeTable(props) {
     }
 
     // PUT all modified employees
-    const handleSubmitButton = () => {
+    const handleSubmitButton = event => {
+        event.preventDefault();
+
         let requests = [];
 
         for(let id in modifiedEmployees) {

client/src/EmployeeTable.js

@@ -1,14 +1,16 @@
 import {useState} from "react";
-import axios from "axios";
 
 function NewEmployeeForm(props) {
 
     const [employee, setEmployee] = useState({fname: '', lname: '', hdate: '', role: ''});
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        console.log(employee);
-        axios.post('api/employees', employee)
+        fetch(`/api/employees`, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(employee)
+        })
             .then(() => {
                     props.handleNewEmployeeAdded();
                     setEmployee({fname: '', lname: '', hdate: '', role: ''});