final version with commenting

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/AddCustomer.jsx

@@ -1,16 +1,14 @@
-
+//Add Customer Function
 export default function AddCustomer({setCustomerName, setCustomerFoodChoice, setCustomerEvent, 
     postNewCustomer, newCustomerName, customerFoodChoice, customerEvent}){
 
+    //Function to handle submit button click    
     function handlePost(e){
-
+        //callback function to main App
         postNewCustomer(e);
+        }
 
-        setCustomerName('')
-        setCustomerFoodChoice('')
-        setCustomerEvent('')
-
-    }
+    //HTML Output for Add Customer form
     return(
         <form>
         <h2>Add New Customer</h2>

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/App.jsx

@@ -1,51 +1,50 @@
+//Imports
 import { useEffect, useState } from 'react'
 import AddCustomer from './AddCustomer';
 import DisplayCustomer from './DisplayCustomer';
 import EventTotals from './EventTotals';
 
 
-
+//Main App Function
 function App() {
+  //Api Url
   const Mock_Api_URL = "https://64ac57549edb4181202f72fb.mockapi.io/lab_endpoint"
 
-  const [customer, setCustomer] = useState([{}]);
-
+  //state for Api pull
+  const [customer, setCustomer] = useState([]);
+  //Stat for calculating totals
   const [totals, setTotals] = useState([])
-
+  //Stateto add new customer data
   const [newCustomerName, setCustomerName] = useState('');
-
   const [customerFoodChoice, setCustomerFoodChoice] = useState('');
-
   const [customerEvent, setCustomerEvent] = useState('Wedding');
-
-  const [updatedCustomer, setUpdatedCustomer] = useState('');
 
+  //state to update customer data
+  const [updatedCustomer, setUpdatedCustomer] = useState('');
   const [updatedFoodChoice, setUpdatedFoodChoice] = useState('');
-
   const [updatedCustomerEvent, setUpdatedCustomerEvent] = useState('Wedding');
 
+  //Api Pull function
   async function getCustomers() {
     const response = await fetch(Mock_Api_URL)
     const data = await response.json();
     setCustomer(data);
     tallyUp(data);
-
-    // fetch(Mock_Api_URL)
-    // .then(data => data.json())
-    // .then(data => setCustomer(data))
-    // .finally(tallyUp(customer))
   };
 
+  //Useeffect to populate the page on loadin
   useEffect(()=> {
     getCustomers()
   }, [])
 
+  //function to delete customer
   function deleteCustomer(id){
     fetch(`${Mock_Api_URL}/${id}`, {
       method: 'DELETE'
     }).then(() => getCustomers())
   };
 
+  //Function to post new customer to the Api
   function postNewCustomer(e){
     e.preventDefault();
 
@@ -63,6 +62,7 @@ function App() {
 
   };
 
+  //Function to update existing customer on the Api
   function updateCustomer(e, userObject){
     e.preventDefault();
 
@@ -81,6 +81,8 @@ function App() {
     }).then(() => getCustomers())
   };
 
+  //function to get the totals of every food choice and 
+  //set the state that is passed to the event totals Component
   function tallyUp(data){
 
     const tally = Object.entries(
@@ -90,14 +92,11 @@ function App() {
         return acc;
       }, {})
     );
-
-
     setTotals(tally);
-
-    //console.log(totals);
-  }
 
+  }
 
+  //Html Output
   return (
 
     <div className="App" >

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/DisplayCustomer.jsx

@@ -1,20 +1,19 @@
+//imports
 import { useState } from 'react';
 import UpdateCustomer from './UpdateCustomer';
 
+//Display Customer function and props
 export default function DisplayCustomer({customer, index, deleteCustomer, setUpdatedCustomer, 
   setUpdatedCustomerEvent, setUpdatedFoodChoice, updateCustomer}){
 
+  //state variable to control whether the modal is visible or not  
   const [hide, setHide] = useState(false)
 
-  // const buttonClick = () => {
-  //   setHide(true);
-  //   console.log(hide);
-  // }
-
-    return(
+  //HTML Output
+  return(
         <>
         <div className='row'>
-        <div className='col-sm-6 border p-2'>
+        <div className='col-sm-6 border rounded p-2'>
         <div >
               <br></br>
               Name: {customer.name}<br></br>
@@ -24,7 +23,7 @@ export default function DisplayCustomer({customer, index, deleteCustomer, setUpd
             <br></br>
             </div>
         </div>
-      <div className='col-sm-6 border p-2'>
+      <div className='col-sm-6 border rounded p-2'>
         <h5>Delete This Customer</h5>
           <button className="btn btn-danger" onClick={() => deleteCustomer(customer.id)}>Delete</button>
         <h5>Update This Customer</h5>

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/EventTotals.jsx

@@ -1,11 +1,9 @@
-//import React, { useEffect, useState} from 'react';
-
+//Function to display table of food choice totals
 export default function EventTotals( { totals } ){
-
-
-
-
+
+    //Html Output
     return(
+        <div id="table">
         <table className="table table-warning table-bordered table-striped" id="1a">
             <thead>
             <tr>
@@ -21,5 +19,6 @@ export default function EventTotals( { totals } ){
             </tr>)}
             </tbody>
         </table>
+        </div>
     )
 }

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/NavBar.jsx

@@ -1,7 +1,7 @@
-
-
+//Function to Create the Nav Bar
 export default function NavBar(){
 
+    //HTML Output
     return(
         <nav>
             <div className="logo">
@@ -10,7 +10,7 @@ export default function NavBar(){
             </div>
 
         <ul>
-            <li><a href="../index.html">Home</a></li>
+            <li><a href="../index.html">Reload</a></li>
 
         </ul>
     </nav>

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/UpdateCustomer.jsx

@@ -1,5 +1,7 @@
+//imports
 import '../src/modal.css'
 
+//Function to Update existing customer
 export default function UpdateCustomer({onClose, hide, setUpdatedCustomer, updatedCustomer, updatedFoodChoice, 
     setUpdatedFoodChoice, updatedCustomerEvent, setUpdatedCustomerEvent, updateCustomer, customer}){
 
@@ -8,6 +10,7 @@ export default function UpdateCustomer({onClose, hide, setUpdatedCustomer, updat
         return null
     }
 
+    //Html Ouput
     return(
         <>
         <div id="modal">

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/index.css

@@ -1,26 +1,3 @@
-/* :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-} */
-
-/* #root {
-  max-width: 1280px;
-  margin:  auto;
-  padding: 2rem;
-  text-align: center;
-} */
-
 html {
   padding: 1em;
   margin: auto;
@@ -83,9 +60,9 @@ nav ul li {
   justify-content: left;
 }
 
-table{
+.table{
   border-radius: 10px;
+  box-shadow: 5px 5px 2px #d4ae5e;
+  overflow: hidden;
 
-}
-
-
+}

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/main.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
-import NavBar from './navbar.jsx';
+import NavBar from './NavBar.jsx';
 import 'bootstrap/dist/css/bootstrap.css';
 import './index.css'
 

Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/modal.css

@@ -1,5 +1,4 @@
 /* CSS for the Modal */
-
 #modal {
     border-radius: 10px;
     position: fixed;
@@ -10,7 +9,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
 }
 
 #modal-content {