Merge pull request #38 from igh9410/dev

Frontend routing bug fix

Author: igh9410

frontend/src/features/lobby/components/Lobby.tsx

@@ -11,10 +11,20 @@ import {
 } from '@/shad-cn-ui/components/ui/table';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { fetchUserFn } from '@features/user';
 
 export function Lobby() {
   const { chatRooms, isLoading, error } = useChatRoomList();
   const navigate = useNavigate();
+  const { data } = useQuery({
+    queryKey: ['users'],
+    queryFn: fetchUserFn,
+  });
+  if (data === null) {
+    // If data is null, then the user is first logging in, redirecting to sign up page
+    navigate('/signup');
+  }
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false); // Modal State for Create Room
 

frontend/src/hooks/useSignUp.tsx

@@ -1,4 +1,5 @@
-import { signUpFn } from '@features/user';
+import { fetchUserFn, signUpFn } from '@features/user';
+import { queryClient } from '@lib/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -9,9 +10,19 @@ export const useSignUp = () => {
     isLoading,
     error,
   } = useMutation(signUpFn, {
-    onSuccess: () => {
-      // Success actions
-      navigate('/');
+    onSuccess: async () => {
+      try {
+        // Fetch the latest user data after successful sign-up
+        const userData = await fetchUserFn();
+
+        // Update the 'users' query data with the newly fetched user data
+        queryClient.setQueryData(['users'], userData);
+
+        // Navigate to the desired route
+        navigate('/');
+      } catch (error) {
+        console.error('Error during post-sign-up user fetch:', error);
+      }
     },
     onError: (error) => {
       // Error actions

frontend/src/pages/ChatRoomPage/ChatRoom.tsx

@@ -1,25 +1,14 @@
 import { ChatArea, InputArea, MessageType } from '@features/chat';
-import { fetchUserFn } from '@features/user';
-
-import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import styles from './ChatRoom.module.scss';
 
 export function ChatRoom() {
   const [messages, setMessages] = useState<MessageType[]>([]);
-  const { data } = useQuery({
-    queryKey: ['users'],
-    queryFn: fetchUserFn,
-  });
+
   const { id } = useParams(); // id is the chat room ID from the URL
   const chatRoomId = id || '';
-  const navigate = useNavigate();
 
-  if (data === null) {
-    // If data is null, then the user is first logging in, redirecting to sign up page
-    navigate('/signup');
-  }
   const handleNewMessage = (text: string) => {
     const newMessage: MessageType = {
       sender: 'sent',

frontend/src/providers/Routes.tsx

@@ -1,8 +1,22 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import {
+  Navigate,
+  Outlet,
+  RouterProvider,
+  createBrowserRouter,
+  redirect,
+} from 'react-router-dom';
 import { Root } from '@pages';
 import { ChatRoom } from '@pages/ChatRoomPage';
 import { SignUp } from '@pages/SignUpPage';
 import { RenewLobby } from '@pages/RenewLobbyPage';
+import { useUsers } from '@hooks';
+
+const ProtectedRoutes = () => {
+  const { data: userData, isLoading } = useUsers();
+  if (isLoading) return null;
+
+  return userData ? <Outlet /> : <Navigate to="/signup" />;
+};
 
 export function Routes() {
   const router = createBrowserRouter([
@@ -11,14 +25,18 @@ export function Routes() {
       element: <Root />,
       children: [
         {
-          path: '/',
-          element: <RenewLobby />,
+          element: <ProtectedRoutes />, // Wrap the children with ProtectedRoute
+          children: [
+            {
+              index: true,
+              element: <RenewLobby />,
+            },
+            {
+              path: 'chats/:id',
+              element: <ChatRoom />,
+            },
+          ],
         },
-        {
-          path: '/chats/:id',
-          element: <ChatRoom />,
-        },
-
         {
           path: '/signup',
           element: <SignUp />,