From a0c415877efa2d9a93555bf7df224616e94d3ca2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 10 Oct 2024 14:47:46 +0200
Subject: [PATCH] refactor: use splash api to store splash state

---
 .../personalDashboard/PersonalDashboard.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 76c89c72604f..288bd1f32dca 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -36,6 +36,8 @@ import {
 import { ContentGridNoProjects } from './ContentGridNoProjects';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi';
+import { useAuthSplash } from 'hooks/api/getters/useAuth/useAuthSplash';
 
 export const StyledCardTitle = styled('div')<{ lines?: number }>(
     ({ theme, lines = 2 }) => ({
@@ -265,6 +267,8 @@ const NoActiveFlagsInfo = styled('div')(({ theme }) => ({
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
     const { trackEvent } = usePlausibleTracker();
+    const { setSplashSeen } = useSplashApi();
+    const { splash } = useAuthSplash();
 
     const name = user?.name;
 
@@ -285,7 +289,7 @@ export const PersonalDashboard = () => {
 
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'open' | 'closed'
-    >('welcome-dialog:v1', 'open');
+    >('welcome-dialog:v1', splash?.personalDashboard ? 'closed' : 'open');
 
     const { personalDashboardProjectDetails, error: detailsError } =
         usePersonalDashboardProjectDetails(activeProject);
@@ -299,9 +303,6 @@ export const PersonalDashboard = () => {
         !detailsError && activeProjectStage === 'loading',
     );
 
-    const [createFlagDialogOpen, setCreateFlagDialogOpen] =
-        React.useState(false);
-
     return (
         <MainContent>
             <WelcomeSection>
@@ -449,7 +450,10 @@ export const PersonalDashboard = () => {
             </SectionAccordion>
             <WelcomeDialog
                 open={welcomeDialog === 'open'}
-                onClose={() => setWelcomeDialog('closed')}
+                onClose={() => {
+                    setSplashSeen('personalDashboard');
+                    setWelcomeDialog('closed');
+                }}
             />
         </MainContent>
     );