updates and research done

Fraju-pc · Jul 12, 2023 · f82de64 · f82de64
1 parent 37c9a08
commit f82de64
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 17 deletions.
diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/Week 15 Research.docx b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/Week 15 Research.docx
diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/Week 15 Research.pdf b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/Week 15 Research.pdf
diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/index.html b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Cayenne Catering Event Meal Planner</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/AddCustomer.jsx b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/AddCustomer.jsx
@@ -1,5 +1,6 @@
 
-export default function AddCustomer({setCustomerName, setCustomerFoodChoice, setCustomerEvent, postNewCustomer}){
+export default function AddCustomer({setCustomerName, setCustomerFoodChoice, setCustomerEvent, 
+    postNewCustomer, newCustomerName, customerFoodChoice, customerEvent}){
 
     function handlePost(e){
 
@@ -14,11 +15,21 @@ export default function AddCustomer({setCustomerName, setCustomerFoodChoice, set
         <form>
         <h2>Add New Customer</h2>
         <label>Customer Name:</label><br></br>
-        <input onChange={(e) => setCustomerName(e.target.value)}></input><br></br>
+        <input value={newCustomerName}onChange={(e) => setCustomerName(e.target.value)}></input><br></br>
         <label>Food Choice:</label><br></br>
-        <input onChange={(e) => setCustomerFoodChoice(e.target.value)}></input><br></br>
+        <select value={customerFoodChoice} 
+        placeholder="Make Food Selection"
+        onChange={(e) => setCustomerFoodChoice(e.target.value)}>
+            <option value="-1">Select</option>
+            <option value="Beef Dinner">Beef Dinner</option>
+            <option value="Chicken Dinner">Chicken Dinner</option>
+            <option value="Chili-P Sandwich">Chili-P Sandwich</option>
+            <option value="Salmon Dinner">Salmon Dinner</option>
+        </select><br></br>
         <label>Event:</label><br></br>
-        <input onChange={(e) => setCustomerEvent(e.target.value)}></input> <br></br><br></br>
+        <select value={customerEvent} onChange={(e) => setCustomerEvent(e.target.value)}>
+        <option value="Wedding">Wedding</option>
+        </select> <br></br><br></br>
         <button className='btn btn-primary' onClick={(e) => handlePost(e)}>Submit</button>
         <br></br><br></br>
 

diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/App.jsx b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/App.jsx
@@ -13,13 +13,13 @@ function App() {
 
   const [customerFoodChoice, setCustomerFoodChoice] = useState('');
 
-  const [customerEvent, setCustomerEvent] = useState('');
+  const [customerEvent, setCustomerEvent] = useState('Wedding');
 
   const [updatedCustomer, setUpdatedCustomer] = useState('');
 
   const [updatedFoodChoice, setUpdatedFoodChoice] = useState('');
 
-  const [updatedCustomerEvent, setUpdatedCustomerEvent] = useState('');
+  const [updatedCustomerEvent, setUpdatedCustomerEvent] = useState('Wedding');
 
   function getCustomers(){
     fetch(Mock_Api_URL)
@@ -48,7 +48,9 @@ function App() {
         foodChoice: customerFoodChoice,
         event: customerEvent,
       })
-    }).then(() => getCustomers())
+    }).then(() => getCustomers()).then(setCustomerName(''),
+    setCustomerFoodChoice(''),
+    setCustomerEvent(''))
 
   };
 
@@ -79,7 +81,10 @@ function App() {
         <AddCustomer setCustomerName={setCustomerName} 
         setCustomerFoodChoice={setCustomerFoodChoice} 
         setCustomerEvent={setCustomerEvent}
-        postNewCustomer={postNewCustomer}/>
+        postNewCustomer={postNewCustomer}
+        newCustomerName={newCustomerName}
+        customerFoodChoice={customerFoodChoice}
+        customerEvent={customerEvent}/>
       </div>
 
       <div>
@@ -89,8 +94,11 @@ function App() {
         customer={customer} 
         index={index} 
         deleteCustomer={deleteCustomer}
+        updatedCustomer={updatedCustomer}
         setUpdatedCustomer={setUpdatedCustomer}
+        updatedFoodChoice={updatedFoodChoice}
         setUpdatedFoodChoice={setUpdatedFoodChoice}
+        updatedCustomerEvent={updatedCustomerEvent}
         setUpdatedCustomerEvent={setUpdatedCustomerEvent}
         updateCustomer={updateCustomer}/>
         ))}

diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/NavBar.jsx b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/NavBar.jsx
@@ -6,13 +6,12 @@ export default function NavBar(){
         <nav>
             <div className="logo">
             <img src="../images/pepper.png" height="150px"/>
-            <h2>Cayenne Catering</h2>
+            <h2>Cayenne Catering Event Meal Planner</h2>
             </div>
 
         <ul>
             <li><a href="../index.html">Home</a></li>
-            <li><a href="../pages/about.html">About</a></li>
-            <li><a href="../pages/contact.html">Contact</a></li>
+
         </ul>
     </nav>
     )

diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/UpdateCustomer.jsx b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/UpdateCustomer.jsx
@@ -1,7 +1,7 @@
 import '../src/modal.css'
 
-export default function UpdateCustomer({onClose, hide, setUpdatedCustomer, 
-    setUpdatedFoodChoice, setUpdatedCustomerEvent, updateCustomer, customer}){
+export default function UpdateCustomer({onClose, hide, setUpdatedCustomer, updatedCustomer, updatedFoodChoice, 
+    setUpdatedFoodChoice, updatedCustomerEvent, setUpdatedCustomerEvent, updateCustomer, customer}){
 
     //if show is false, the modal is hidden
     if (!hide){
@@ -18,11 +18,19 @@ export default function UpdateCustomer({onClose, hide, setUpdatedCustomer,
                  <div id="modal-body">
                     <form>
                         <label>Name:</label><br></br>
-                        <input onChange={(e) => setUpdatedCustomer(e.target.value)}></input><br></br>
+                        <input value={updatedCustomer} onChange={(e) => setUpdatedCustomer(e.target.value)}></input><br></br>
                         <label>Food Choice:</label><br></br>
-                        <input onChange={(e) => setUpdatedFoodChoice(e.target.value)}></input><br></br>
+                        <select value={updatedFoodChoice} onChange={(e) => setUpdatedFoodChoice(e.target.value)}>
+                            <option value="-1">Select</option>
+                            <option value="Beef Dinner">Beef Dinner</option>
+                            <option value="Chicken Dinner">Chicken Dinner</option>
+                            <option value="Chili-P Sandwich">Chili-P Sandwich</option>
+                            <option value="Salmon Dinner">Salmon Dinner</option>
+                        </select><br></br>
                         <label>Customer Event:</label><br></br>
-                        <input onChange={(e) => setUpdatedCustomerEvent(e.target.value)}></input> <br></br><br></br>
+                        <select value={updatedCustomerEvent} onChange={(e) => setUpdatedCustomerEvent(e.target.value)}>
+                            <option value="Wedding">Wedding</option>
+                        </select> <br></br><br></br>
                         <button className='btn btn-warning' onClick={(e) => updateCustomer(e, customer)}>Submit</button>
                         <br></br><br></br>
                     </form>

diff --git a/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/index.css b/Week-15-REST_Fetch_Functional_Components_and_Best_Practices/src/index.css
@@ -57,6 +57,8 @@ nav{
   color: white;
   font-size: 24px;
   padding: 1px;
+  border-radius: 10px;
+  box-shadow: 5px 5px 2px #905755;
 }
 
 nav ul {