From 8d57316516fa567cfcf176da9c3401638d6f6486 Mon Sep 17 00:00:00 2001
From: John Brunton <john_brunton@live.co.uk>
Date: Sat, 31 Aug 2024 17:38:03 +0100
Subject: [PATCH] refactor: routes

---
 .../features/auth/organisms/require-auth.tsx  |  7 ++---
 client/src/router.tsx                         | 26 +++++++++----------
 .../shared/navigation/organisms/header.tsx    |  4 +--
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/client/src/features/auth/organisms/require-auth.tsx b/client/src/features/auth/organisms/require-auth.tsx
index bce30a5f..636261f8 100644
--- a/client/src/features/auth/organisms/require-auth.tsx
+++ b/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) {
diff --git a/client/src/router.tsx b/client/src/router.tsx
index 2f42e047..9cfa4f02 100644
--- a/client/src/router.tsx
+++ b/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 />,
+          },
+        ],
       },
     ],
   },
diff --git a/client/src/shared/navigation/organisms/header.tsx b/client/src/shared/navigation/organisms/header.tsx
index a4959ddf..9905937c 100644
--- a/client/src/shared/navigation/organisms/header.tsx
+++ b/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()