Merge pull request #749 from actiontech/fix/issue-2552

[fix](useRecentlySelectedZone): Fix the initialization issue of state

Author: LZS911

packages/base/src/page/Nav/SideMenu/UserMenu/components/UserNavigate.tsx

@@ -52,9 +52,7 @@ const UserNavigate: React.FC<Props> = ({
   const [open, setOpen] = useState(false);
 
   //# if [ee]
-  const { clearRecentlySelectedZone } = useRecentlySelectedZone({
-    manualInit: true
-  });
+  const { clearRecentlySelectedZone } = useRecentlySelectedZone();
   //# endif
 
   const logout = () => {

packages/base/src/testUtils/mockHooks/data.tsx

@@ -10,7 +10,6 @@ export const mockUseRecentlySelectedZoneData = {
   availabilityZone: undefined,
   updateRecentlySelectedZone: jest.fn(),
   setAvailabilityZone: jest.fn(),
-  initializeAvailabilityZone: jest.fn(),
   verifyRecentlySelectedZoneRecord: jest.fn(),
   clearRecentlySelectedZone: jest.fn()
 };

packages/dms-kit/src/features/useRecentlySelectedZone/__tests__/index.test.ts

@@ -18,7 +18,7 @@ describe('useRecentlySelectedZone', () => {
     localStorage.setItem(StorageKey.DMS_AVAILABILITY_ZONE, JSON.stringify([]));
   });
 
-  it('should initialize from storage when manualInit is false (default)', () => {
+  it('should initialize from storage', () => {
     const initial: Zone[] = [
       { uid: 'u1', name: 'zone-1' },
       { uid: 'u2', name: 'zone-2' }
@@ -32,22 +32,6 @@ describe('useRecentlySelectedZone', () => {
     expect(result.current.availabilityZone).toEqual(initial[0]);
   });
 
-  it('should not auto initialize when manualInit is true', () => {
-    const initial: Zone[] = [{ uid: 'u1', name: 'zone-1' }];
-    localStorage.setItem(
-      StorageKey.DMS_AVAILABILITY_ZONE,
-      JSON.stringify(initial)
-    );
-
-    const { result } = superRenderHook(() =>
-      useRecentlySelectedZone<Zone>({ manualInit: true })
-    );
-    expect(result.current.availabilityZone).toBeUndefined();
-
-    act(() => result.current.initializeAvailabilityZone());
-    expect(result.current.availabilityZone).toEqual(initial[0]);
-  });
-
   it('should update record: move to front, unique, trim to max, and emit', () => {
     const eventEmitterSpy = jest.spyOn(eventEmitter, 'emit');
     const { result } = superRenderHook(() => useRecentlySelectedZone<Zone>());

packages/dms-kit/src/features/useRecentlySelectedZone/index.ts

@@ -7,10 +7,22 @@ import { eventEmitter } from '../../utils/EventEmitter';
 
 export const DEFAULT_MAX_SELECTED_ZONE_NUMBER = 3;
 
-const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
-  manualInit = false
-}: { manualInit?: boolean } = {}) => {
-  const [availabilityZone, setAvailabilityZone] = useState<T>();
+const useRecentlySelectedZone = <
+  T extends { uid?: string; name?: string }
+>() => {
+  const [availabilityZone, setAvailabilityZone] = useState<T | undefined>(
+    () => {
+      const data = LocalStorageWrapper.get(StorageKey.DMS_AVAILABILITY_ZONE);
+      try {
+        const parsedData: T[] = JSON.parse(data || '[]');
+        return parsedData?.[0] ?? undefined;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        return undefined;
+      }
+    }
+  );
 
   const setStorageRecentlySelectedZoneRecord = useCallback((record: T[]) => {
     LocalStorageWrapper.set(
@@ -88,22 +100,11 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
     }
   };
 
-  const initializeAvailabilityZone = useCallback(() => {
-    const parsedData = getStorageZoneRecord();
-    setAvailabilityZone(parsedData?.[0] ?? undefined);
-  }, [getStorageZoneRecord]);
-
   const clearRecentlySelectedZone = useCallback(() => {
     setAvailabilityZone(undefined);
     setStorageRecentlySelectedZoneRecord([]);
   }, [setAvailabilityZone, setStorageRecentlySelectedZoneRecord]);
 
-  useEffect(() => {
-    if (!manualInit) {
-      initializeAvailabilityZone();
-    }
-  }, [initializeAvailabilityZone, manualInit]);
-
   useEffect(() => {
     const { unsubscribe } = eventEmitter.subscribe(
       EmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE,
@@ -115,7 +116,6 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
   return {
     availabilityZone,
     updateRecentlySelectedZone,
-    initializeAvailabilityZone,
     verifyRecentlySelectedZoneRecord,
     clearRecentlySelectedZone,
     setAvailabilityZone