Fixes for Navigation

apps/backend/src/router/auth.ts

@@ -47,7 +47,10 @@ router.get('/logout', (req: Request, res: Response) => {
       res.status(500).json({ error: 'Failed to log out' });
     } else {
       res.clearCookie('jwt');
-      res.redirect('http://localhost:5173/');
+      res.json({
+        message: 'Logged Out!',
+        success: true,
+      });
     }
   });
 });

apps/frontend/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@repo/store": "*",
     "@repo/ui": "*",
+    "axios": "^1.6.8",
     "chess.js": "^1.0.0-beta.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

apps/frontend/src/App.tsx

@@ -5,7 +5,6 @@ import { Game } from './screens/Game';
 import Login from './screens/Login';
 import { Suspense } from 'react';
 import { RecoilRoot } from 'recoil';
-import { useUser } from '@repo/store/useUser';
 import { Loader } from './components/Loader';
 import { Layout } from './layout';
 
@@ -22,19 +21,12 @@ function App() {
 }
 
 function AuthApp() {
-  const user = useUser();
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Layout children={<Landing />} />} />
-        <Route
-          path="/login"
-          element={<Login />}
-        />
-        <Route
-          path="/game/:gameId"
-          element={<Layout children={<Game />} />}
-        />
+        <Route path="/login" element={<Login />} />
+        <Route path="/game/:gameId" element={<Layout children={<Game />} />} />
       </Routes>
     </BrowserRouter>
   );

apps/frontend/src/components/constants/side-nav.tsx

@@ -1,26 +1,13 @@
+import { logout } from '@/services/auth';
 import { PuzzleIcon, LogInIcon, LogOutIcon, SettingsIcon } from 'lucide-react';
-const BACKEND_URL =
-  import.meta.env.VITE_APP_BACKEND_URL ?? 'http://localhost:3000';
+
 export const UpperNavItems = [
   {
     title: 'Play',
     icon: PuzzleIcon,
     href: '/game/random',
     color: 'text-green-500',
   },
-  //
-  // {
-  //   title: 'Puzzles',
-  //   icon: PuzzleIcon,
-  //   href: '/',
-  //   color: 'text-sky-500',
-  // },
-  // {
-  //   title: 'Learn',
-  //   icon: PuzzleIcon,
-  //   href: '/',
-  //   color: 'text-sky-500',
-  // },
 ];
 
 export const LowerNavItems = [
@@ -33,8 +20,9 @@ export const LowerNavItems = [
   {
     title: 'Logout',
     icon: LogOutIcon,
-    href: `${BACKEND_URL}/logout`,
+    href: '/logout',
     color: 'text-green-500',
+    action: 'logout',
   },
   {
     title: 'Settings',

apps/frontend/src/components/side-nav.tsx

@@ -1,25 +1,29 @@
 import { cn } from '@/lib/utils';
 import { useSidebar } from '@/hooks/useSidebar';
 import { buttonVariants } from '@/components/ui/button';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from '@/components/subnav-accordian';
-import { useEffect, useState } from 'react';
+import { SyntheticEvent, useEffect, useState } from 'react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { type LucideIcon } from 'lucide-react';
-import { useUser } from '@repo/store/useUser';
+import { api } from '@/lib/api';
+import { useRecoilState } from 'recoil';
+import { userAtom } from '../../../../packages/store/src/atoms/user';
+import { LANDING_PAGE } from '@/constants/routes';
 
 export interface NavItem {
   title: string;
-  href: string;
+  href?: string;
   icon: LucideIcon;
   color?: string;
   isChidren?: boolean;
   children?: NavItem[];
+  action?: string;
 }
 
 interface SideNavProps {
@@ -29,7 +33,8 @@ interface SideNavProps {
 }
 
 export function SideNav({ items, setOpen, className }: SideNavProps) {
-  const user = useUser();
+  const [user, setUser] = useRecoilState(userAtom);
+  const navigate = useNavigate();
   const location = useLocation();
   const { isOpen } = useSidebar();
   const [openItem, setOpenItem] = useState('');
@@ -44,6 +49,30 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
     }
   }, [isOpen]);
 
+  const handleLogout = async () => {
+    await api.get('/auth/logout/');
+    // Perform Cleanup
+    setUser(null);
+    navigate(LANDING_PAGE);
+  };
+
+  const executeAction = (action: string) => {
+    switch (action) {
+      case 'logout':
+        handleLogout();
+        break;
+      default:
+        console.error('Invalid Action Identifier');
+    }
+  };
+
+  const handleNavItemClick = (event: SyntheticEvent, navItem: NavItem) => {
+    event.preventDefault();
+    if (setOpen) setOpen(false);
+    if (navItem.action) executeAction(navItem.action);
+    else if (navItem.href) navigate(navItem.href);
+  };
+
   return (
     <nav className="dark">
       {items.map((item) =>
@@ -79,14 +108,12 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
                   <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
                 )}
               </AccordionTrigger>
-              <AccordionContent className="mt-2 space-y-4 pb-1">
+              <AccordionContent className="mt-2 space-y-4 pb-1 cursor-pointer">
                 {item.children?.map((child) => (
                   <a
                     key={child.title}
                     href={child.href}
-                    onClick={() => {
-                      if (setOpen) setOpen(false);
-                    }}
+                    onClick={(event) => handleNavItemClick(event, child)}
                     className={cn(
                       buttonVariants({ variant: 'ghost' }),
                       'group relative flex h-12 justify-start gap-x-3',
@@ -121,9 +148,7 @@ export function SideNav({ items, setOpen, className }: SideNavProps) {
             <a
               key={item.title}
               href={item.href}
-              onClick={() => {
-                if (setOpen) setOpen(false);
-              }}
+              onClick={(event) => handleNavItemClick(event, item)}
               className={cn(
                 buttonVariants({ variant: 'ghost' }),
                 'group relative flex h-12 justify-start',

apps/frontend/src/constants/endpoints.ts

@@ -0,0 +1,3 @@
+export const BACKEND_URL =
+  import.meta.env.VITE_APP_BACKEND_URL ?? 'http://localhost:3000';
+export const WS_URL = import.meta.env.VITE_APP_WS_URL ?? 'ws://localhost:8080';

apps/frontend/src/constants/routes.ts

@@ -0,0 +1,4 @@
+// ROUTES
+export const LANDING_PAGE = '/';
+export const LOGIN = '/login';
+export const GAME = '/game';

apps/frontend/src/hooks/useSocket.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useUser } from '@repo/store/useUser';
-
-const WS_URL = import.meta.env.VITE_APP_WS_URL ?? 'ws://localhost:8080';
+import { WS_URL } from '@/constants/endpoints';
 
 export const useSocket = () => {
   const [socket, setSocket] = useState<WebSocket | null>(null);

apps/frontend/src/lib/api.ts

@@ -0,0 +1,13 @@
+import { BACKEND_URL } from '@/constants/endpoints';
+import axios, { CreateAxiosDefaults } from 'axios';
+
+const config: CreateAxiosDefaults = {
+  baseURL: BACKEND_URL,
+  timeout: 8000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  withCredentials: true,
+};
+
+export const api = axios.create(config);

apps/frontend/src/screens/Game.tsx

@@ -33,7 +33,6 @@ export interface GameResult {
   by: string;
 }
 
-
 const GAME_TIME_MS = 10 * 60 * 1000;
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -60,10 +59,7 @@ export const Game = () => {
   const [added, setAdded] = useState(false);
   const [started, setStarted] = useState(false);
   const [gameMetadata, setGameMetadata] = useState<Metadata | null>(null);
-  const [result, setResult] = useState<
-    GameResult
-    | null
-  >(null);
+  const [result, setResult] = useState<GameResult | null>(null);
   const [player1TimeConsumed, setPlayer1TimeConsumed] = useState(0);
   const [player2TimeConsumed, setPlayer2TimeConsumed] = useState(0);
 
@@ -79,8 +75,7 @@ export const Game = () => {
     if (!user) {
       window.location.href = '/login';
     }
-  }, [user])
-
+  }, [user]);
 
   useEffect(() => {
     if (!socket) {
@@ -131,8 +126,12 @@ export const Game = () => {
           break;
 
         case GAME_ENDED:
-          const wonBy = message.payload.status === 'COMPLETED' ? 
-            message.payload.result !== 'DRAW' ? 'CheckMate' : 'Draw' : 'Timeout';
+          const wonBy =
+            message.payload.status === 'COMPLETED'
+              ? message.payload.result !== 'DRAW'
+                ? 'CheckMate'
+                : 'Draw'
+              : 'Timeout';
           setResult({
             result: message.payload.result,
             by: wonBy,
@@ -148,8 +147,7 @@ export const Game = () => {
             blackPlayer: message.payload.blackPlayer,
             whitePlayer: message.payload.whitePlayer,
           });
-
-
+
           break;
 
         case USER_TIMEOUT:
@@ -227,7 +225,7 @@ export const Game = () => {
   };
 
   if (!socket) return <div>Connecting...</div>;
-
+  if (!user) return;
   return (
     <div className="">
       {result && (
@@ -270,9 +268,7 @@ export const Game = () => {
                     )}
                   </div>
                   <div>
-                    <div
-                      className={`w-full flex justify-center text-white`}
-                    >
+                    <div className={`w-full flex justify-center text-white`}>
                       <ChessBoard
                         started={started}
                         gameId={gameId ?? ''}

apps/frontend/src/screens/Login.tsx

@@ -1,9 +1,7 @@
 import Google from '../assets/google.png';
 import Github from '../assets/github.png';
 import { useNavigate } from 'react-router-dom';
-
-const BACKEND_URL =
-  import.meta.env.VITE_APP_BACKEND_URL ?? 'http://localhost:3000';
+import { BACKEND_URL } from '@/constants/endpoints';
 
 const Login = () => {
   const navigate = useNavigate();

apps/ws/src/SocketManager.ts

@@ -58,14 +58,9 @@ export class SocketManager {
       console.error('User was not interested in any room?');
       return;
     }
-    const room = this.interestedSockets.get(roomId) || []
-    const remainingUsers = room.filter(u =>
-      u.userId !== user.userId
-    )
-    this.interestedSockets.set(
-      roomId,
-      remainingUsers
-    );
+    const room = this.interestedSockets.get(roomId) || [];
+    const remainingUsers = room.filter((u) => u.userId !== user.userId);
+    this.interestedSockets.set(roomId, remainingUsers);
     if (this.interestedSockets.get(roomId)?.length === 0) {
       this.interestedSockets.delete(roomId);
     }

packages/store/src/atoms/user.ts

@@ -8,7 +8,7 @@ export interface User {
   name: string;
 }
 
-export const userAtom = atom<User>({
+export const userAtom = atom<User | null>({
   key: 'user',
   default: selector({
     key: 'user/default',