cleanup

src/StudioProjectLoader.tsx

@@ -11,6 +11,7 @@ import {
     UserInterfaceWithOutputSettings,
 } from './types/types';
 import { getDownloadLink } from './utils/documentExportHelper';
+import { SESSION_USER_INTEFACE_ID_KEY } from './utils/constants';
 
 export class StudioProjectLoader {
     private projectDownloadUrl?: string;
@@ -223,10 +224,11 @@ export class StudioProjectLoader {
             });
             return mappedOutputSettings;
         };
-
-        if (userInterfaceId) {
+        // userInterfaceID from projectConfig or session-stored userInterfaceId
+        const userInterface = userInterfaceId || sessionStorage.getItem(SESSION_USER_INTEFACE_ID_KEY);
+        if (userInterface) {
             const userInterfaceData: UserInterface = await axios
-                .get(`${this.graFxStudioEnvironmentApiBaseUrl}/user-interfaces/${userInterfaceId}`, {
+                .get(`${this.graFxStudioEnvironmentApiBaseUrl}/user-interfaces/${userInterface}`, {
                     headers: { Authorization: `Bearer ${this.authToken}` },
                 })
                 .then((res) => res.data)

src/components/navbar/navbarItems/useUserInterfaceSelector.tsx

@@ -14,7 +14,6 @@ const useUserInterfaceSelector = () => {
     const validUserInterfaceForTemplate = userInterfaces.find(
         (item) => item.id === sessionStorage.getItem(SESSION_USER_INTEFACE_ID_KEY),
     )?.id;
-
     const selectedUserInterface =
         validUserInterfaceForTemplate || selectedUserInterfaceId || userInterfaces.find((item) => item.default)?.id;
 

src/components/navbar/studioNavbar/useStudioNavbar.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@chili-publish/grafx-shared-components';
 import useNavbarDownloadBtn from '../navbarItems/useNavbarDownloadBtn';
 import useNavbarUndoRedoItems from '../navbarItems/useNavbarUndoRedo';
@@ -9,6 +9,7 @@ import useNavbarMenu from '../navbarItems/useNavbarMenu';
 import useNavbarModeToggle from '../navbarItems/useNavbarModeToggle';
 import useUserInterfaceSelector from '../navbarItems/useUserInterfaceSelector';
 import { ProjectConfig } from '../../../types/types';
+import { SESSION_USER_INTEFACE_ID_KEY } from '../../../utils/constants';
 
 interface INavbar {
     projectName: string | undefined;
@@ -26,10 +27,18 @@ const useStudioNavbar = ({
     onBackClick,
     onDownloadPanelOpen,
 }: INavbar) => {
+    const handleOnBack = useCallback(() => {
+        if (onBackClick) {
+            sessionStorage.removeItem(SESSION_USER_INTEFACE_ID_KEY);
+            return onBackClick?.();
+        }
+        return undefined;
+    }, [onBackClick]);
+    const { menuNavbarItem } = useNavbarMenu({ undoStackState, zoom, onBackClick: handleOnBack });
+
     const { undoRedoNavbarItem } = useNavbarUndoRedoItems(undoStackState);
     const { downloadNavbarItem } = useNavbarDownloadBtn(onDownloadPanelOpen);
     const { zoomNavbarItem } = useNavbarZoom(zoom);
-    const { menuNavbarItem } = useNavbarMenu({ undoStackState, zoom, onBackClick });
     const { modeToggleNavbarItem } = useNavbarModeToggle(projectConfig);
     const { userInterfaceDropdownNavbarItem } = useUserInterfaceSelector();
     const { mode } = useTheme();