refactor: routes

client/src/features/auth/organisms/require-auth.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { LoadingIndicator } from '../../../shared/molecules/loading-indicator'
 import { setRedirectPath } from '../pages/callback'
 import { useAuth } from '..'
+import { Outlet } from 'react-router-dom'
 
-export const RequireAuth: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const RequireAuth: React.FC<PropsWithChildren> = ({ children }) => {
   const { isAuthenticated, isLoading, signIn } = useAuth()
 
   if (isAuthenticated) {
-    return <>{children}</>
+    return <>{children ?? <Outlet />}</>
   }
 
   if (!isLoading) {

client/src/router.tsx

@@ -22,20 +22,18 @@ export const router = createBrowserRouter([
         element: <Callback />,
       },
       {
-        path: '/room/new',
-        element: (
-          <RequireAuth>
-            <NewRoomPage />
-          </RequireAuth>
-        ),
-      },
-      {
-        path: '/room/:roomId',
-        element: (
-          <RequireAuth>
-            <RoomPage />
-          </RequireAuth>
-        ),
+        path: '/room',
+        element: <RequireAuth />,
+        children: [
+          {
+            path: 'new',
+            element: <NewRoomPage />,
+          },
+          {
+            path: ':roomId',
+            element: <RoomPage />,
+          },
+        ],
       },
     ],
   },

client/src/shared/navigation/organisms/header.tsx

@@ -19,9 +19,9 @@ import { useAuth } from '../../../features/auth'
 import { HeaderTemplate } from '../molecules/header-template'
 
 export const Header = () => {
-  const { isAuthenticated, isLoading: isLoadingAuth } = useAuth()
+  const { isAuthenticated } = useAuth()
   const { roomId } = useParams()
-  const { data: roomResponse } = useRoom(roomId, { enabled: !isLoadingAuth })
+  const { data: roomResponse } = useRoom(roomId, { enabled: isAuthenticated })
 
   const { isOpen, onOpen, onClose } = useDisclosure()