navbar fully functional andadded logout component (that is also fully…

… functional). Totally responsive. Finishing night be completing user settings page now that it's easily accessible and able to be tested thanks to the previously stated milestone hit.

src/App.tsx

@@ -13,6 +13,7 @@ import Navbar from "../src/components/Navbar";
 import Register from "../src/components/Register";
 import VideoPost from "../src/components/VideoPost";
 import Settings from "../src/components/Settings";
+import Logout from "../src/components/Logout";
 
 export interface ABCtoken {
   isUserLoggedIn: boolean;
@@ -24,14 +25,14 @@ export interface ABCtoken {
 }
 
 export interface ABCuserInfo {
-  isAdmin: boolean | null;
-  setIsAdmin: (isAdmin: boolean | null) => void;
-  emailAddress: string;
-  setEmailAddress: (email: string) => void;
-  username: string;
-  setUsername: (username: string) => void;
-  id: string;
-  setId: (id: string) => void;
+	id: string;
+	isAdmin: boolean | null;
+	setIsAdmin: (isAdmin: boolean | null) => void;
+	emailAddress: string;
+	setEmailAddress: (email: string) => void;
+	username: string;
+	setUsername: (username: string) => void;
+	setId: (id: string) => void;
 }
 
 export interface ABCcalls {
@@ -127,6 +128,10 @@ const App = () => {
     setSessionToken(null);
     updateToken("");
     setIsUserLoggedIn(false);
+    setId("");
+    setIsAdmin(false);
+    setEmailAddress("");
+    setUsername("");
   };
 
   useEffect(() => {
@@ -136,15 +141,16 @@ const App = () => {
 
   return (
 		<>
-			<Navbar>
-				id={id}
+			<Navbar
+				isAdmin={isAdmin}
 				clearToken={clearToken}
 				emailAddress={emailAddress}
+				id={id}
 				sessionToken={sessionToken}
 				setSessionToken={setSessionToken}
 				isUserLoggedIn={isUserLoggedIn}
 				username={username}
-			</Navbar>
+			/>
 
 			<Routes>
 				<Route path="/" element={<Home />} />
@@ -199,11 +205,21 @@ const App = () => {
 					}
 				/>
 
+        <Route
+          path="/logout"
+          element={
+            <Logout
+              clearToken={clearToken}
+
+            />
+          }
+        />
+
 				<Route
 					path="/settings"
 					element={
-            <Settings
-              clearToken={clearToken}
+						<Settings
+							clearToken={clearToken}
 							id={id}
 							emailAddress={emailAddress}
 							setEmailAddress={setEmailAddress}

src/components/Logout.tsx

@@ -0,0 +1,40 @@
+// when this component mounts, it will instanstly run clearToken: ABCtoken["clearToken"] from App.tsx and return the user to "/"
+import React from "react";
+import { ABCtoken } from "../App";
+import { useNavigate } from "react-router-dom";
+
+
+interface LogoutProps {
+    clearToken: ABCtoken["clearToken"];
+}
+
+//TODO could style this into a cool looking page if I have time to.
+
+const Logout = (props: LogoutProps) => {
+    // On page loads, it tells the user "You are being logged out (countdown timer)." </br> "You will be redirected to the home page in 5 seconds."
+    // When the countdown timer reaches 0, it will run the clearToken function from App.tsx and return the user to "/".
+    const navigate = useNavigate();
+    const [countdown, setCountdown] = React.useState<number>(3);
+    const [countdownInterval, setCountdownInterval] = React.useState<number>(0);
+
+    React.useEffect(() => {
+        if (countdown > 0) {
+            setCountdownInterval(window.setInterval(() => {
+                setCountdown(countdown - 1);
+            }, 1000));
+        } else {
+            props.clearToken();
+            navigate("/");
+        }
+    }, [countdown, navigate, props]);
+
+    return (
+        <div className="logout-container">
+            <h1>You are being logged out.</h1>
+
+            <h2>Redirecting to the home page in {countdown} seconds.</h2>
+        </div>
+    );
+}
+
+export default Logout;