From 83371717ce4edee858ec083e563327cddeba02eb Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 8 Oct 2024 08:37:40 +0200
Subject: [PATCH] fix: fix merge

---
 .../personalDashboard/PersonalDashboard.tsx   | 107 ++++++++++++++----
 1 file changed, 82 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 59988783499b..ad4235a15014 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -8,16 +8,13 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import React, { type FC, useEffect, useState } from 'react';
+import React, { type FC, useEffect } from 'react';
 import LinkIcon from '@mui/icons-material/ArrowForward';
 import { WelcomeDialog } from './WelcomeDialog';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard';
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
-import type {
-    PersonalDashboardSchema,
-    PersonalDashboardSchemaProjectsItem,
-} from '../../openapi';
+import type { PersonalDashboardSchemaProjectsItem } from '../../openapi';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
 import { usePersonalDashboardProjectDetails } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboardProjectDetails';
 import HelpOutline from '@mui/icons-material/HelpOutline';
@@ -55,15 +52,29 @@ export const StyledCardTitle = styled('div')<{ lines?: number }>(
         wordBreak: 'break-word',
     }),
 );
-
 const FlagListItem: FC<{
     flag: { name: string; project: string; type: string };
     selected: boolean;
     onClick: () => void;
 }> = ({ flag, selected, onClick }) => {
+    const activeFlagRef = useRef<HTMLLIElement>(null);
+
+    useEffect(() => {
+        if (activeFlagRef.current) {
+            activeFlagRef.current.scrollIntoView({
+                block: 'nearest',
+                inline: 'start',
+            });
+        }
+    }, []);
     const IconComponent = getFeatureTypeIcons(flag.type);
     return (
-        <ListItem key={flag.name} disablePadding={true} sx={{ mb: 1 }}>
+        <ListItem
+            key={flag.name}
+            disablePadding={true}
+            sx={{ mb: 1 }}
+            ref={selected ? activeFlagRef : null}
+        >
             <ListItemButton
                 sx={listItemStyle}
                 selected={selected}
@@ -88,18 +99,70 @@ const FlagListItem: FC<{
     );
 };
 
-const useActiveProject = (projects: PersonalDashboardSchemaProjectsItem[]) => {
-    const [activeProject, setActiveProject] = useState(projects[0]?.id);
+const useDashboardState = (
+    projects: PersonalDashboardSchemaProjectsItem[],
+    flags: PersonalDashboardSchemaFlagsItem[],
+) => {
+    type State = {
+        activeProject: string | undefined;
+        activeFlag: PersonalDashboardSchemaFlagsItem | undefined;
+    };
+
+    const defaultState = {
+        activeProject: undefined,
+        activeFlag: undefined,
+    };
+
+    const [state, setState] = useLocalStorageState<State>(
+        'personal-dashboard:v1',
+        defaultState,
+    );
 
     useEffect(() => {
-        if (!activeProject && projects.length > 0) {
-            setActiveProject(projects[0].id);
+        const setDefaultFlag =
+            flags.length &&
+            (!state.activeFlag ||
+                !flags.some((flag) => flag.name === state.activeFlag?.name));
+        const setDefaultProject =
+            projects.length &&
+            (!state.activeProject ||
+                !projects.some(
+                    (project) => project.id === state.activeProject,
+                ));
+
+        if (setDefaultFlag || setDefaultProject) {
+            setState({
+                activeFlag: setDefaultFlag ? flags[0] : state.activeFlag,
+                activeProject: setDefaultProject
+                    ? projects[0].id
+                    : state.activeProject,
+            });
         }
-    }, [JSON.stringify(projects)]);
+    });
 
-    return [activeProject, setActiveProject] as const;
-};
+    const { activeFlag, activeProject } = state;
+
+    const setActiveFlag = (flag: PersonalDashboardSchemaFlagsItem) => {
+        setState({
+            ...state,
+            activeFlag: flag,
+        });
+    };
 
+    const setActiveProject = (projectId: string) => {
+        setState({
+            ...state,
+            activeProject: projectId,
+        });
+    };
+
+    return {
+        activeFlag,
+        setActiveFlag,
+        activeProject,
+        setActiveProject,
+    };
+};
 export const PersonalDashboard = () => {
     const { user } = useAuthUser();
 
@@ -110,22 +173,16 @@ export const PersonalDashboard = () => {
         refetch: refetchDashboard,
         loading: personalDashboardLoading,
     } = usePersonalDashboard();
-    const [activeFlag, setActiveFlag] = useState<
-        PersonalDashboardSchema['flags'][0] | null
-    >(null);
-    useEffect(() => {
-        if (personalDashboard?.flags.length) {
-            setActiveFlag(personalDashboard.flags[0]);
-        }
-    }, [JSON.stringify(personalDashboard?.flags)]);
+
+    const projects = personalDashboard?.projects || [];
+
+    const { activeProject, setActiveProject, activeFlag, setActiveFlag } =
+        useDashboardState(projects, personalDashboard?.flags ?? []);
 
     const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
         'open' | 'closed'
     >('welcome-dialog:v1', 'open');
 
-    const projects = personalDashboard?.projects || [];
-    const [activeProject, setActiveProject] = useActiveProject(projects);
-
     const {
         personalDashboardProjectDetails,
         loading: loadingDetails,