finish login, logout, session context

frontend/src/App.tsx

@@ -1,11 +1,27 @@
 import "./styles/App.css";
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import MainSearch from './components/MainSearch';
+import { SessionContext, destroySessionCookie, getSessionCookie } from "./contexts/session";
+import { useState, useEffect, useContext } from "react";
 
 export default function App() {
+  const [session, setSession] = useState(getSessionCookie());
+  const navigate = useNavigate();
+
+  // Redirect to login if session is undefined
+  useEffect(
+    () => {
+      setSession(getSessionCookie());
+      if (session === undefined) {
+        navigate("/login");
+      }
+    },
+    [session, navigate]
+  ); 
 
   return (
     <>
+      <SessionContext.Provider value={session}>
           <Navbar />
           <div className="App" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '90vh' , gap: 15}}>
             <img
@@ -17,15 +33,24 @@ export default function App() {
             />
             <MainSearch />
           </div>
+        </SessionContext.Provider>
     </>
   )
 }
-
 function Navbar() {
+  const session = useContext(SessionContext);
+
+  const links = session ? (
+    <>
+      <Link to="/">Home</Link>
+      <Link to="/login" onClick={destroySessionCookie}>Logout</Link>
+    </>
+  ): (
+      <Link to="/login">Login</Link>
+  )
   return (
     <nav>
-      <Link to="/">Home</Link>
+     {links}
-      <Link to="/logout">Logout</Link>
     </nav>
   );
 }

frontend/src/contexts/session.ts

@@ -0,0 +1,17 @@
+import React from "react";
+
+type SessionContextType = string | undefined;
+
+export const getSessionCookie = () => {
+    const sessionCookie = document.cookie
+        .split('; ')
+        .find(row => row.startsWith('token='))
+        ?.split('=')[1];
+    return sessionCookie;
+}
+export const destroySessionCookie = () => {
+    document.cookie = "token=; Max-Age=0;"
+}
+
+export const SessionContext = React.createContext<SessionContextType>(getSessionCookie());
+

frontend/src/hooks/sessionRedirect.ts

@@ -0,0 +1,14 @@
+import { useEffect, useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { SessionContext } from "../contexts/session";
+
+export const useSessionRedirect = () => {
+  const session = useContext(SessionContext);
+  const navigate = useNavigate();
+  // Redirect to home if session is defined
+  useEffect(() => {
+    if (session !== undefined) {
+        navigate('/');
+    }
+  }, [session, navigate])
+}

frontend/src/screens/Login.tsx

@@ -1,8 +1,13 @@
-import { Link } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 import "../styles/Login.css"
 import { FormEvent } from "react";
+import { useSessionRedirect } from "../hooks/sessionRedirect";
 
 export default function Login() {
+  const navigate = useNavigate();
+  
+  useSessionRedirect();
+
   function handleSubmit(e: FormEvent) {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -16,6 +21,9 @@ export default function Login() {
         },
         body: JSON.stringify({ username, password }),
     })
+    .then(() => {
+      navigate('/');
+    })
     .catch((error) => {
         console.error('Error:', error);
     });

frontend/src/screens/Signup.tsx

@@ -1,7 +1,11 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import "../styles/Login.css"
 import { FormEvent } from "react";
+import { useSessionRedirect } from "../hooks/sessionRedirect";
 export default function Signup() {
+    const navigate = useNavigate();
+    useSessionRedirect();
+
     function handleSubmit(e: FormEvent) {
         e.preventDefault();
         const formData = new FormData(e.target as HTMLFormElement);
@@ -16,8 +20,8 @@ export default function Signup() {
             body: JSON.stringify({ email, username, password }),
         })
         .then(response => response.json())
-        .then(data => {
+        .then(() => {
-            console.log('Success:', data);
+            navigate('/login');
         })
         .catch((error) => {
             console.error('Error:', error);