Refactor with Outlet

ui/src/App.tsx

@@ -24,40 +24,16 @@ export const App = () => {
             )}
           >
             <Routes>
-              <Route
-                index
-                element={
-                  <ProtectedRoute fallback="/login">
-                    <TabloPage />
-                  </ProtectedRoute>
-                }
-              />
+              <Route path="/" element={<ProtectedRoute fallback="/login" />}>
+                <Route index element={<TabloPage />} />
+              </Route>
               <Route path="login-with-oauth" element={<OAuthSigninPage />} />
               <Route path="landing" element={<LandingPage />} />
-              <Route
-                path="login"
-                element={
-                  <PublicRoute>
-                    <LoginPage />
-                  </PublicRoute>
-                }
-              />
-              <Route
-                path="signup"
-                element={
-                  <PublicRoute>
-                    <SignUpPage />
-                  </PublicRoute>
-                }
-              />
-              <Route
-                path="reset-password"
-                element={
-                  <PublicRoute>
-                    <ResetPasswordPage />
-                  </PublicRoute>
-                }
-              />
+              <Route element={<PublicRoute />}>
+                <Route path="login" element={<LoginPage />} />
+                <Route path="signup" element={<SignUpPage />} />
+                <Route path="reset-password" element={<ResetPasswordPage />} />
+              </Route>
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
             <style>

ui/src/components/ProtectedRoute.tsx

@@ -1,14 +1,13 @@
-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSession } from "../contexts/SessionContext";
-import { Navigate } from "react-router-dom";
+import { Navigate, Outlet } from "react-router-dom";
 import { match } from "ts-pattern";
 
 interface ProtectedRouteProps {
-  children: ReactNode;
   fallback?: string;
 }
 
-export const ProtectedRoute = ({ children, fallback }: ProtectedRouteProps) => {
+export const ProtectedRoute = ({ fallback }: ProtectedRouteProps) => {
   const { session } = useSession();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -50,7 +49,7 @@ export const ProtectedRoute = ({ children, fallback }: ProtectedRouteProps) => {
         .with("should-redirect", () => (
           <Navigate to={fallback ?? "/login"} replace />
         ))
-        .with("should-pass", () => children)
+        .with("should-pass", () => <Outlet />)
         .exhaustive()}
     </>
   );

ui/src/components/PublicRoute.tsx

@@ -1,13 +1,9 @@
-import { ReactNode, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSession } from "../contexts/SessionContext";
-import { Navigate } from "react-router-dom";
+import { Navigate, Outlet } from "react-router-dom";
 import { match } from "ts-pattern";
 
-interface PublicRouteProps {
-  children: ReactNode;
-}
-
-export const PublicRoute = ({ children }: PublicRouteProps) => {
+export const PublicRoute = () => {
   const { session } = useSession();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -37,7 +33,7 @@ export const PublicRoute = ({ children }: PublicRouteProps) => {
           </div>
         ))
         .with("should-redirect", () => <Navigate to="/" replace />)
-        .with("should-pass", () => children)
+        .with("should-pass", () => <Outlet />)
         .exhaustive()}
     </>
   );