link logic for navbar, prop clean up in login, logout function in app

client/src/components/App.js

@@ -6,7 +6,7 @@ import NavBar from "./NavBar";
 import Home from "./Home";
 import LogIn from "./LogIn";
 import SignUp from "./SignUp";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router-dom";
 
 export const UserContext = createContext();
 
@@ -15,6 +15,8 @@ function App() {
   const [avatar, setAvatar] = useState(null);
   const [errors, setErrors] = useState([]);
 
+  const navigate = useNavigate();
+
   // fetch current user else no user logged in
   useEffect(() => {
     fetch("/me").then((resp) => {
@@ -55,9 +57,19 @@ function App() {
     setCurrentUser({ ...currentUser, recipes: newRecipes });
   }
 
+  function handleLogOut() {
+    fetch("/logout", {
+      method: "DELETE",
+    });
+    setCurrentUser({});
+    navigate("/");
+  }
+
   return (
     <div>
-      <UserContext.Provider value={{ currentUser, setCurrentUser, avatar }}>
+      <UserContext.Provider
+        value={{ currentUser, setCurrentUser, avatar, handleLogOut }}
+      >
         <NavBar />
         <Routes>
           <Route

client/src/components/LogIn.js

@@ -1,11 +1,13 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { UserContext } from "./App";
 
-function LogIn({ setCurrentUser, setRecipes }) {
+function LogIn() {
   const [login, setLogin] = useState({
     username: "",
     password: "",
   });
+  const { setCurrentUser } = useContext(UserContext);
   const navigate = useNavigate();
 
   function handleInputChange(e) {
@@ -22,7 +24,6 @@ function LogIn({ setCurrentUser, setRecipes }) {
       if (resp.ok) {
         resp.json().then((loggedInUser) => {
           setCurrentUser(loggedInUser);
-          setRecipes(loggedInUser.recipes);
           navigate("/");
         });
       } else {

client/src/components/NavBar.js

@@ -1,17 +1,27 @@
-import React from "react"
-import { Link } from 'react-router-dom'
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { UserContext } from "./App";
 
 function NavBar() {
+  const { currentUser, handleLogOut } = useContext(UserContext);
   return (
-    <nav id="navigation" >
-      <Link to="/">Home</Link>
-      <Link to="/randomrecipe">Random Recipe</Link>
-      <Link to="/recipebook">Your Recipe Book</Link>
-      <Link to="/recipeform">Add Recipe</Link>
-      <Link to="/login">Log In</Link>
-      <Link to="/signup">Sign Up</Link>
+    <nav id='navigation'>
+      <Link to='/'>Home</Link>
+      {currentUser.id ? (
+        <>
+          <Link to='/randomrecipe'>Random Recipe</Link>
+          <Link to='/recipebook'>Your Recipe Book</Link>
+          <Link to='/recipeform'>Add Recipe</Link>
+          <button onClick={handleLogOut}>Log out</button>
+        </>
+      ) : (
+        <>
+          <Link to='/login'>Log In</Link>
+          <Link to='/signup'>Sign Up</Link>
+        </>
+      )}
     </nav>
-  )
+  );
 }
 
-export default NavBar
+export default NavBar;

client/src/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./components/App";
 import reportWebVitals from "./reportWebVitals";