made some improvement

my-app/src/App.js

@@ -1,12 +1,13 @@
 import React from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import Login from "./components/Login";
-// import Header from './components/Header';
-import PrivateRoute from "./components/PrivateRoute";
-import PlantList from "./components/PlantList";
-import CreateNewUser from "./components/CreateNewUser";
-// import AddNewPlant from "./components/AddNewPlant";
+
+import Login from './components/Login';
+import Header from './components/Header';
+import PrivateRoute from './components/PrivateRoute';
+import PlantList from './components/PlantList';
+import CreateNewUser from './components/CreateNewUser';
+import AddNewPlant from './components/AddNewPlant';
 // import UpdatePlant from './components/UpdatePlant';
 // import UpdateUserForm from './components/UpdateUserForm';
 
@@ -23,23 +24,22 @@ import "./App.css";
 import "./css/Login.css";
 import "./css/FakePlantCard.css";
 import "./css/PlantList.css";
-// import "./css/Header.css";
+import "./css/Header.css";
 
 const App = () => {
   return (
     <Router>
       <div className="App">
-        {/* <header>
+        <header>
           <Header />
-        </header> */}
+        </header>
         <main>
           <Route exact path="/" component={Login} />
           <Route path="/signup" component={CreateNewUser} />
           <PrivateRoute path="/plantlist" component={PlantList} />
           {/* <PrivateRoute path="/updatePlant" component={UpdatePlant} /> 
-          <PrivateRoute path="/updateUser" component={UpdateUserForm} /> 
-          <PrivateRoute path="/addPlant" component={AddNewPlant} /> */}
-        </main>
+          <PrivateRoute path="/updateUser" component={UpdateUserForm} />   */}
+          <PrivateRoute path="/addPlant" component={AddNewPlant} />   
       </div>
     </Router>
   );

my-app/src/components/AddPlantForm.js

@@ -0,0 +1,127 @@
+import React from 'react';
+
+const AddPlantForm = ({plantid, editing, editPlant, deletePlant}) => {
+    const handleClick = (e) => {
+        e.stopPropagation();
+        deletePlant(color);
+    }
+
+
+    return(<li data-testid="plant" onClick={() => editPlant(plantid)}>
+        <span>
+        {
+            editing && (<span className="delete" onClick={handleClick}>x</span>)
+        }
+        {` ${plantid.plantid}`}
+        </span>
+
+    </li>);
+}
+
+export default AddPlantForm;
+
+
+
+// import { axiosWithAuth } from '../utils/axiosWithAuth';
+
+// const initalPlant = {
+//     nickname: "",
+//     species: "",
+//     h20: '',
+//     plantimg: "",
+//     user: {
+//       username: "",
+//       primaryemail: ''
+//     }
+//   }
+
+// const AddPlantForm = (props) => {
+//    const {plantsArray, updatePlants } = props;
+//    const [values, setValues] = useState(initalPlant)
+
+//     const handleChanges = (e) => {
+//         e.persist();
+//         if(e.target.name === "username"){
+//             setValues({
+//                 ...values,
+//                 user: {username: e.target.value}
+
+//             })
+//         } else {
+//             const {name, value} = e.target;
+//             setValues({
+//                 ...values,
+//                 [name]: value
+//             })
+//         }
+//     }
+
+//     const postNewPlant = (newPlant) => {
+//         axiosWithAuth()
+//         .post('/users/plants', newPlant)
+//         .then((res) => {
+//             console.log(res)
+//             updatePlants(res.data)
+//         })
+//         .catch((err) => {
+//             console.log(err)
+//         })
+//     }
+
+//     const submitValues = e => {
+//         e.preventDefault()
+//         const newPlant = {
+//             id: Math.random(),
+//             nickname: values.nickname.trim(),
+//             species: values.species.trim(),
+//             h20: values.h20.trim(),
+//             plantimg: values.plantimg.trim(),
+//             // user: {
+//             //     username: values.username.trim(),
+//             //     primaryemail: values.primaryemail.trim()
+//             // }
+//         }
+//         postNewPlant(newPlant)
+//         setValues(initalPlant)
+//     }
+//     return(
+//         <div>
+//             <h2>Add form:</h2>
+//             <form className = 'Plant-form' onSubmit = {submitValues}>
+//                 <label>Color: 
+//                     <input 
+//                         type = 'text'
+//                         name = 'nickname'
+//                         onChange = {handleChanges}
+//                         value = {values.nickname}
+//                         placeholder = 'enter name'
+//                     />
+//                 </label>
+//                 <label>Species: 
+//                     <input 
+//                         type = 'text'
+//                         name = 'species'
+//                         onChange = {handleChanges}
+//                         value = {values.species}
+//                         placeholder = 'enter species'
+//                     />
+//                 </label>
+
+//                 <label>Amount of water: 
+//                     <input 
+//                         type = 'text'
+//                         name = 'H20'
+//                         onChange = {handleChanges}
+//                         value = {values.h20}
+//                         placeholder = 'enter h20'
+//                     />
+//                 </label>
+
+//                 <button>Submit</button>
+//             </form>
+//         </div>
+//     )
+
+// }
+
+// export default AddPlantForm;

my-app/src/components/EditMenu.js

@@ -1,7 +1,9 @@
 import React from 'react';
+// import AddPlantForm from './AddPlantForm';
 
- const EditMenu = ({plantToEdit, saveEdit, setPlantToEdit, setEditing }) => {
+ const EditMenu = ({plantToEdit, saveEdit, setPlantToEdit, setEditing, updatePlants, plantsArray }) => {
      return(
+       <div>
      <form onSubmit={saveEdit}>
          <div className="form-group">
            <label htmlFor="nickname">Nickname: </label>
@@ -41,7 +43,10 @@ import React from 'react';
              <button onClick={() => setEditing(false)}>Cancel</button>
          </div>
      </form>
+  {/* <AddPlantForm  updatePlants={updatePlants} plantsArray={plantsArray}/> */}
+  </div>
      )
+
  }
 
  export default EditMenu;

my-app/src/components/Header.js

@@ -1,28 +1,28 @@
-// import React from "react";
-// import { NavLink } from "react-router-dom";
+import React from "react";
+import { NavLink } from "react-router-dom";
 
-// const Header = () => {
-//   return (
-//     <div className="container">
-//       <NavLink to="#" className="logo">
-//         My Plant App
-//       </NavLink>
-//       <nav className="navbar">
-//         {/*Add any nav links here if needed*/}
-//         <NavLink to="/" className="home-btn">
-//           Home
-//         </NavLink>
-//         {/* <Switch>
-//           <Route path="/plantlist">
-//             <NavLink to="/" className="signout-btn">
-//               Sign out
-//             </NavLink>
-//           </Route>
-//         </Switch> */}
+const Header = () => {
+  return (
+    <div className="container">
+      <NavLink to="#" className="logo">
+        My Plant App
+      </NavLink>
+      <nav className="navbar">
+        {/*Add any nav links here if needed*/}
+        {/* <NavLink to="/" className="home-btn">
+          Home
+        </NavLink> */}
+        {/* <Switch>
+          <Route path="/plantlist">
+            <NavLink to="/" className="signout-btn">
+              Sign out
+            </NavLink>
+          </Route>
+        </Switch> */}
 
-//       </nav>
-//     </div>
-//   );
-// };
+      </nav>
+    </div>
+  );
+};
 
-// export default Header;
+export default Header;

my-app/src/components/PlantArray.js

@@ -30,9 +30,10 @@ import React, { useState } from 'react';
          .patch(`/users/plants/${plantToEdit.plantid}`, plantToEdit)
          .then((res)=> {
              console.log(res)
+             setEditing(false)
              const newPlant = plantsArray.map((plant) => {
-                 if(plant.plantid === plantToEdit.plantid){
-                     return plantToEdit
+                 if(plant.plantid === res.plantid){
+                     return res
                  } else {
                      return plant
                  }
@@ -49,7 +50,9 @@ import React, { useState } from 'react';
          .delete(`/users/plants${plant.plantid}`)
          .then((res) => {
              console.log("delete plant res", res)
-             updatePlants(plantsArray.filter((plant) => plant.plantid !== res.data))
+             const newPlantDelete = plantsArray.filter(plant => plant.plantid !== res.data)
+             updatePlants(newPlantDelete)
+            //  updatePlants(plantsArray.filter((plant) => plant.plantid !== res.data))
          })
          .catch((err) => {
              console.log(err)
@@ -74,7 +77,7 @@ import React, { useState } from 'react';
                  </li>
              ))}
          </ul>
-         { editing && <EditMenu plantToEdit={plantToEdit} saveEdit={saveEdit} setPlantToEdit={setPlantToEdit}/>}
+         { editing && <EditMenu plantsArray={plantsArray} updatePlants={updatePlants} plantToEdit={plantToEdit} saveEdit={saveEdit} setPlantToEdit={setPlantToEdit}/>}
      </div>
      )
  }

my-app/src/components/PlantList.js

@@ -80,6 +80,7 @@ import React, { useEffect, useState } from "react";
        }) : null} */}
        </ul>
        <PlantArray plantsArray={plantList} updatePlants={setPlantList}/>
+
        <div>
          <button onClick={logout}>Logout</button>
          <button onClick={addPlant}>Add New Plant</button>