Feat/12496 make it possible to open two different layout sets in two …

…different windows (#12857)

* make it possible to open two different layout sets in two different windows

frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutSetName.test.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { useSelectedFormLayoutSetName } from './';
 import { layoutSet1NameMock, layoutSetsMock } from '../testing/layoutMock';
-import { renderHook } from '@testing-library/react';
+import { renderHook, waitFor } from '@testing-library/react';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { ServicesContextProvider } from 'app-shared/contexts/ServicesContext';
 import { queriesMock } from 'app-shared/mocks/queriesMock';
@@ -11,6 +11,7 @@ import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import type { QueryClient } from '@tanstack/react-query';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { app, org } from '@studio/testing/testids';
+import { typedLocalStorage } from 'app-shared/utils/webStorage';
 
 // Test data:
 const selectedLayoutSet = layoutSet1NameMock;
@@ -57,4 +58,40 @@ describe('useSelectedFormLayoutSetName', () => {
 
     expect(result.current.selectedFormLayoutSetName).toEqual(selectedLayoutSet);
   });
+
+  it('Should initialize state with local storage value', async () => {
+    const storageKey = 'selectedFormLayoutSetName';
+    typedLocalStorage.setItem(storageKey, selectedLayoutSet);
+
+    const client = createQueryClientMock();
+    client.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock);
+
+    const { result } = renderHook(() => useSelectedFormLayoutSetName(), {
+      wrapper: ({ children }) => {
+        return wrapper({ children, client });
+      },
+    });
+
+    expect(result.current.selectedFormLayoutSetName).toEqual(selectedLayoutSet);
+  });
+
+  it('Should update local storage based on the state', async () => {
+    const storageKey = 'selectedFormLayoutSetName';
+    const newLayoutSetName = 'newLayoutSet';
+
+    const client = createQueryClientMock();
+    client.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock);
+
+    const { result } = renderHook(() => useSelectedFormLayoutSetName(), {
+      wrapper: ({ children }) => {
+        return wrapper({ children, client });
+      },
+    });
+
+    await waitFor(() => {
+      result.current.setSelectedFormLayoutSetName(newLayoutSetName);
+    });
+
+    expect(typedLocalStorage.getItem(storageKey)).toEqual(newLayoutSetName);
+  });
 });

frontend/packages/ux-editor/src/hooks/useSelectedFormLayoutSetName.ts

@@ -1,22 +1,26 @@
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { useLayoutSetsQuery } from 'app-shared/hooks/queries/useLayoutSetsQuery';
-import { useReactiveLocalStorage } from 'app-shared/hooks/useReactiveLocalStorage';
+import { useEffect, useState } from 'react';
+import { typedLocalStorage } from 'app-shared/utils/webStorage';
 
 export type UseSelectedFormLayoutSetNameResult = {
   selectedFormLayoutSetName: string;
   setSelectedFormLayoutSetName: (layoutName: string) => void;
-  removeSelectedFormLayoutSetName: () => void;
 };
 
 export const useSelectedFormLayoutSetName = (): UseSelectedFormLayoutSetNameResult => {
   const { org, app } = useStudioUrlParams();
   const { data: layoutSets } = useLayoutSetsQuery(org, app);
 
-  const [
-    selectedFormLayoutSetNameState,
-    setSelectedFormLayoutSetName,
-    removeSelectedFormLayoutSetName,
-  ] = useReactiveLocalStorage('layoutSet/' + app, undefined);
+  const storageKey: string = 'selectedFormLayoutSetName';
+  const [selectedFormLayoutSetNameState, setSelectedFormLayoutSetName] = useState(
+    typedLocalStorage.getItem<string>(storageKey),
+  );
+
+  useEffect(() => {
+    if (selectedFormLayoutSetNameState)
+      typedLocalStorage.setItem<string>(storageKey, selectedFormLayoutSetNameState);
+  }, [selectedFormLayoutSetNameState]);
 
   let selectedFormLayoutSetName: string;
 
@@ -31,6 +35,5 @@ export const useSelectedFormLayoutSetName = (): UseSelectedFormLayoutSetNameResu
   return {
     selectedFormLayoutSetName,
     setSelectedFormLayoutSetName,
-    removeSelectedFormLayoutSetName,
   };
 };