From d3061d97265e4da165a8ec870604639e41491fdf Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Tue, 1 Apr 2025 18:33:57 +0200
Subject: [PATCH] Improve flow

---
 ui/src/App.tsx                       |  2 +-
 ui/src/components/ProtectedRoute.tsx | 12 +++++++++---
 ui/src/pages/landing.tsx             |  1 +
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index c883797..322f4c0 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -26,7 +26,7 @@ export const App = () => {
               <Route
                 path="/"
                 element={
-                  <ProtectedRoute to="/landing">
+                  <ProtectedRoute to="/login">
                     <TabloPage />
                   </ProtectedRoute>
                 }
diff --git a/ui/src/components/ProtectedRoute.tsx b/ui/src/components/ProtectedRoute.tsx
index ffd179e..64042e6 100644
--- a/ui/src/components/ProtectedRoute.tsx
+++ b/ui/src/components/ProtectedRoute.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useEffect } from "react";
 import { useSession } from "../contexts/SessionContext";
 import { useNavigate } from "react-router-dom";
+
 interface ProtectedRouteProps {
   children: ReactNode;
   to?: string;
@@ -9,11 +10,16 @@ interface ProtectedRouteProps {
 export const ProtectedRoute = ({ children, to }: ProtectedRouteProps) => {
   const { session } = useSession();
   const navigate = useNavigate();
-
   useEffect(() => {
-    let timer = setTimeout(() => {
+    const timer = setTimeout(() => {
       if (!session) {
-        navigate(to ?? "/landing");
+        const isFirstTimeUser =
+          localStorage.getItem("xtablo-has-seen-landing-page") === null;
+        if (isFirstTimeUser) {
+          navigate("/landing");
+        } else {
+          navigate(to ?? "/login");
+        }
       }
     }, 300);
     return () => clearTimeout(timer);
diff --git a/ui/src/pages/landing.tsx b/ui/src/pages/landing.tsx
index 75e43f4..535b13a 100644
--- a/ui/src/pages/landing.tsx
+++ b/ui/src/pages/landing.tsx
@@ -5,6 +5,7 @@ import logo from "../assets/icon.jpg";
 import { Header } from "../components/header";
 
 export const LandingPage = () => {
+  localStorage.setItem("xtablo-has-seen-landing-page", "true");
   return (
     <>
       <Header />