Edit item

client/src/App.js

@@ -24,7 +24,7 @@ function App() {
 
           <Route path="/appointmentScheduler" element={<AppointmentScheduler/>}/>
 
-          <Route path="addFood" element={<AddFood/>}/>
+          <Route path="/addFood" element={<AddFood/>} />
 
         </Routes>
       </Router>      

client/src/components/Food.js

@@ -3,6 +3,8 @@ import './Food.css'
 import Tags from './Tags.js'
 import edit_item from './../images/edit_item.png'
 import pen from './../images/pen.svg'
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
 
 function Food(props) {
     function editItem () {
@@ -25,13 +27,15 @@ function Food(props) {
                     </div>
                 </div>
                 <div className = "editIn">
+                {/* <Link to="/thankyou" state={{date: selectedDate.label, time: selectedTime.label}} onClick= {submitForm} className = "submit-button" style = {{textDecoration: 'none'}}>Submit</Link> */}
                     <div>
-                        <button className="editButton" onClick={editItem}>
+                        {/* <button className="editButton" onClick={editItem}> */}
+                        <Link to="/addFood" state = {{name: props.name, tags: props.tags}} className = "editButton">
                             <img src={pen} className="penFormat" alt="pen"/>
                             <div className="editItem">
                                 Edit Item
                             </div>
-                        </button>
+                        </Link>
                     </div>
                     <div style={{paddingLeft: "6%"}} className ="inStock">
                         <span style={{paddingRight: "11%"}}>In Stock</span>

client/src/pages/AddFood.css

@@ -210,6 +210,12 @@ label, input {
 
 }
 
+.custom-dropdown {
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
+}
+
 @media screen and (orientation: portrait) {
     .add-food-component-container {
         flex-direction: column;

client/src/pages/AddFood.js

@@ -2,8 +2,10 @@ import './AddFood.css';
 import saveitembutton from './../images/saveitembutton.png';
 import Select, { NonceProvider } from 'react-select';
 import makeAnimated from 'react-select/animated';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import UploadImageButton from './../components/UploadImageButton.js';
+import { useLocation } from "react-router-dom";
+import Tags from '../components/Tags.js'
 
 const todayStock = [
     { value: 'in stock', label: 'In stock today' },
@@ -62,13 +64,53 @@ const customStyles = {
 }
 
 export default function AddFood() {
+
+    const location = useLocation();
+    const [edit, setEdit] = useState(true);
+    const [itemName, setItemName] = useState("");
+    // const [stockAvailability, setStockAvailability] = useState("");
+    const [tags, setTags] = useState([]);
+
+    useEffect(() => {
+        setItemName(location.state.name);
+        setTags(location.state.tags);
+
+        // setStockAvailability(location.state.name);
+        console.log(tags);
+        //console.log(stockAvailability);
+      });
+
+    function headerDisplay() {
+        if (edit) {
+            return (
+                <div>
+                <h1>Edit Item</h1>
+                <p>Edit an existing item in the stock directory.</p>
+                </div>   
+            )
+            }
+        return (
+            <div>
+                <h1>Add Item</h1>
+                <p>Add a new item to the stock directory.</p>
+            </div>
+            )
+        }
+
+    // const colourStyles = {
+    //     placeholder: (defaultStyles) => {
+    //         return {
+    //             ...defaultStyles,
+    //             display: flex,
+    //             flexDirection: row,
+    //         }
+    //     }
+    // }
+
     return(
         <div className = 'add-food-component-container'>
             <div className = 'add-food-component-header'>
-                <div>
-                    <h1>Add Item</h1>
-                    <p>Add a new item to the stock directory.</p>
-                </div>
+                {headerDisplay()}
             </div>
                 <div className = 'main-add-food-component-container'>
                     <div className = 'item-selections'> 
@@ -77,7 +119,7 @@ export default function AddFood() {
                                 <label className = "item-name-input">
                                     Item Name 
                                     </label>
-                                    <input className = "item-name-textbox" type="text" name="name" />
+                                    <input className = "item-name-textbox" placeholder={itemName} type="text" name="name" />
                             </form>
                         </div>
 
@@ -90,7 +132,7 @@ export default function AddFood() {
                                     styles={customStyles}
                                     closeMenuOnSelect={true}
                                     components={animatedComponents}
-                                    placeholder="Select..."
+                                    defaultValue="select..."
                                     options={todayStock}
                                 />
                             </div>
@@ -100,9 +142,13 @@ export default function AddFood() {
                             <label className = "item-name-input">Select Dietary Categories (Optional)</label>
                             <div>
                                 <Select className="custom-dropdown"
-                                    styles={customStyles}
+
                                     closeMenuOnSelect={true}
                                     components={animatedComponents}
+                                    placeholder = {tags.map((tag) => {
+                                        return (
+                                        <Tags name={tag} />
+                                    );})}
                                     isMulti
                                     options={dietaryCategories}
                                 />

client/src/pages/MobileUserNavbar.js

@@ -0,0 +1,54 @@
+import './MobNavbar.css';
+import bfpLogo from './../images/bfpLogo.svg';
+import xButton from './../images/isbees-x-symbol.svg';
+import groceries from './../images/navBarImage.png';
+import React, { useState } from 'react';
+import dropdownIcon from './../images/dropdown-icon.svg'
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
+function MobNavbar() {
+    const [dropdown, setDropdown] = useState(0);
+    function setTrue() {
+        setDropdown(true)
+    }
+    function setFalse() {
+        setDropdown(false)
+    }
+    if (dropdown) {
+        return (
+            <div className='canvas'>
+                <div className = "dropNavBar">
+                    <img src = {bfpLogo} className = "logo"></img>
+                    <button onClick={setFalse}>
+                        <img src = {xButton} className = "xButton" />
+                    </button>
+                </div>
+                <div className ='imageAndDropDowns'>
+                    <img src = {groceries} className = "dropDownLogo"></img>
+                    <div className='dropDownLinks'>
+                        <a href="https://www.berkeleyfoodpantry.org/aboutus" 
+                        target="_blank" rel="noopener noreferrer" className='dropDownText' onClick = {setFalse}>About the Pantry</a>
+                        <Link to = "/stockListingAdmin" onClick={setFalse} className = 'dropDownText'> View Today's Stock </Link>
+                        <a href="google.com" className='dropDownText'>Schedule Appointment</a>
+                        <Link to = "/adminLogin" onClick={setFalse} className = 'dropDownText'> Login </Link>
+                        {/* <a href="google.com" className='dropDownText'>Edit Today's Stock</a>
+                        <a href="google.com" className='dropDownText'>View Appointments</a>
+                        <a href="google.com" className='dropDownText'>Logout</a> */}
+                    </div>
+                </div>
+            </div>
+        )
+    } 
+    return (
+            <div className='navBar'>
+                <img src = {bfpLogo} className = "logo"></img>
+                <button onClick={setTrue}>
+                    <img src = {dropdownIcon} className = "icon"></img>
+                </button>
+            </div>
+
+    )
+
+}
+
+export default MobNavbar;

client/src/pages/UserNavbar.js

@@ -0,0 +1,17 @@
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+import './Navbar.css';
+import berkeleyfoodpantrylogo from './../images/berkeley-food-pantry-logo.png';
+
+export default function AdminLoginNavbar() {
+   return(
+      <div className= "navbarContainer">
+         <img src={berkeleyfoodpantrylogo} className = "navbarLogo" alt = "navbar logo"></img>
+            <ul className = "navbar-container"> 
+                  <Link to="https://www.berkeleyfoodpantry.org/aboutus" className = "headerTags" style={{ textDecoration: 'none'}} >About the Pantry</Link>
+                  <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }}>View Today's Stock</Link>
+                  <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>Schedule Appointment</Link>
+                  <Link to="/adminLogin" className = "headerTags" style={{ textDecoration: 'none' }}>Login</Link>
+            </ul>
+      </div>
+   )
+}