From 7ccf0e5b29cbe0cbd447a07e2ed4e0e1c994bda5 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Tue, 1 Apr 2025 22:05:54 +0200
Subject: [PATCH] Refactor with Outlet

---
 ui/src/App.tsx                       | 40 ++++++----------------------
 ui/src/components/ProtectedRoute.tsx |  9 +++----
 ui/src/components/PublicRoute.tsx    | 12 +++------
 3 files changed, 16 insertions(+), 45 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 0dbd599..1236ac7 100644
--- a/ui/src/App.tsx
+++ b/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>
diff --git a/ui/src/components/ProtectedRoute.tsx b/ui/src/components/ProtectedRoute.tsx
index 210cecf..a42904d 100644
--- a/ui/src/components/ProtectedRoute.tsx
+++ b/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()}
     </>
   );
diff --git a/ui/src/components/PublicRoute.tsx b/ui/src/components/PublicRoute.tsx
index affff35..ea70549 100644
--- a/ui/src/components/PublicRoute.tsx
+++ b/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()}
     </>
   );