Merge pull request #744 from actiontech/refactor/zone

Refactor/zone

Author: LZS911

packages/base/src/page/AvailabilityZone/AvailabilityZoneWrapper/index.tsx

@@ -51,12 +51,12 @@ const AvailabilityZoneWrapper: React.FC = () => {
     }
   };
   const isZoneConfigured = !!availabilityZoneOptions?.length;
-  const isMemoriredZoneNotInOptions = useMemo(
+  const isMemoriedZoneNotInOptions = useMemo(
     () =>
       !availabilityZoneOptions?.some((v) => v.value === availabilityZone?.uid),
     [availabilityZoneOptions, availabilityZone]
   );
-  if (isZoneConfigured && isMemoriredZoneNotInOptions) {
+  if (isZoneConfigured && isMemoriedZoneNotInOptions) {
     return (
       <BasicModal
         title={t('availabilityZone.wrapper.modalTitle')}

packages/base/src/page/Nav/SideMenu/__tests__/index.test.tsx

@@ -168,17 +168,4 @@ describe('test Base/Nav/SideMenu/index', () => {
     await act(async () => jest.advanceTimersByTime(3000));
     expect(getUserOpPermissionSpy).toHaveBeenCalled();
   });
-
-  it('should set availability zone when DMS_SYNC_CURRENT_AVAILABILITY_ZONE event is emitted', async () => {
-    const setAvailabilityZoneSpy = jest.fn();
-    mockUseRecentlySelectedZone({
-      setAvailabilityZone: setAvailabilityZoneSpy
-    });
-    baseSuperRender(<SideMenu />);
-    await act(async () => jest.advanceTimersByTime(3000));
-    sharedEventEmitter.emit(
-      sharedEmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE
-    );
-    expect(setAvailabilityZoneSpy).toHaveBeenCalledTimes(1);
-  });
 });

packages/base/src/page/Nav/SideMenu/index.tsx

@@ -27,8 +27,6 @@ import { EmptyBox } from '@actiontech/dms-kit';
 import useRecentlySelectedZone from '@actiontech/dms-kit/es/features/useRecentlySelectedZone';
 import useFetchPermissionData from '../../../hooks/useFetchPermissionData';
 import { updateUserOperationPermissions } from '../../../store/permission';
-import sharedEmitterKey from '@actiontech/dms-kit/es/data/EmitterKey';
-import { eventEmitter as sharedEventEmitter } from '@actiontech/dms-kit/es/utils/EventEmitter';
 
 const SideMenu: React.FC = () => {
   const navigate = useTypedNavigate();
@@ -38,7 +36,6 @@ const SideMenu: React.FC = () => {
     useFetchPermissionData();
   const {
     verifyRecentlySelectedZoneRecord,
-    setAvailabilityZone,
     availabilityZone,
     updateRecentlySelectedZone
   } = useRecentlySelectedZone();
@@ -178,14 +175,6 @@ const SideMenu: React.FC = () => {
     return unsubscribe;
   }, [refreshZoneTips]);
 
-  useEffect(() => {
-    const { unsubscribe } = sharedEventEmitter.subscribe(
-      sharedEmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE,
-      setAvailabilityZone
-    );
-    return unsubscribe;
-  }, [setAvailabilityZone]);
-
   useEffect(() => {
     const { unsubscribe } = EventEmitter.subscribe(
       EmitterKey.DMS_Sync_Project_Archived_Status,

packages/base/src/store/availabilityZone/index.ts

@@ -8,16 +8,12 @@ type AvailabilityZoneReduxState = {
   modalStatus: ModalStatus;
   selectAvailabilityZone: IGateway | null;
   availabilityZoneTips: IUidWithName[];
-  // memorizedAvailabilityZone: IUidWithName | undefined;
-  // recentlySelectedZoneRecord: IUidWithName[];
 };
 
 const initialState: AvailabilityZoneReduxState = {
   modalStatus: {},
   selectAvailabilityZone: null,
   availabilityZoneTips: []
-  // memorizedAvailabilityZone: undefined,
-  // recentlySelectedZoneRecord: []
 };
 
 const dmsAvailabilityZone = createSlice({
@@ -40,22 +36,6 @@ const dmsAvailabilityZone = createSlice({
     ) {
       state.availabilityZoneTips = availabilityZoneTips;
     },
-    // updateMemorizedAvailabilityZone(
-    //   state,
-    //   {
-    //     payload: { memorizedAvailabilityZone }
-    //   }: PayloadAction<{ memorizedAvailabilityZone: IUidWithName | undefined }>
-    // ) {
-    //   state.memorizedAvailabilityZone = memorizedAvailabilityZone;
-    // },
-    // updateRecentlySelectedZoneRecord(
-    //   state,
-    //   {
-    //     payload: { recentlySelectedZoneRecord }
-    //   }: PayloadAction<{ recentlySelectedZoneRecord: IUidWithName[] }>
-    // ) {
-    //   state.recentlySelectedZoneRecord = recentlySelectedZoneRecord;
-    // },
     ...commonModalReducer()
   }
 });
@@ -65,8 +45,6 @@ export const {
   initModalStatus: initAvailabilityZoneModalStatus,
   updateModalStatus: updateAvailabilityZoneModalStatus,
   updateAvailabilityZoneTips
-  // updateMemorizedAvailabilityZone,
-  // updateRecentlySelectedZoneRecord
 } = dmsAvailabilityZone.actions;
 
 export default dmsAvailabilityZone.reducer;

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

@@ -1,4 +1,4 @@
-import { act } from '@testing-library/react';
+import { act, cleanup } from '@testing-library/react';
 import { superRenderHook } from '../../../testUtil/superRender';
 import useRecentlySelectedZone, {
   DEFAULT_MAX_SELECTED_ZONE_NUMBER
@@ -49,7 +49,7 @@ describe('useRecentlySelectedZone', () => {
   });
 
   it('should update record: move to front, unique, trim to max, and emit', () => {
-    const eventEmtterSpy = jest.spyOn(eventEmitter, 'emit');
+    const eventEmitterSpy = jest.spyOn(eventEmitter, 'emit');
     const { result } = superRenderHook(() => useRecentlySelectedZone<Zone>());
     const z1 = { uid: 'u1', name: 'zone-1' };
     const z2 = { uid: 'u2', name: 'zone-2' };
@@ -69,10 +69,12 @@ describe('useRecentlySelectedZone', () => {
     expect(saved[0]).toEqual(z4);
     expect(saved).toHaveLength(DEFAULT_MAX_SELECTED_ZONE_NUMBER);
     expect(saved.map((i: Zone) => i.uid)).toEqual(['u4', 'u1', 'u3']);
-    expect(eventEmtterSpy).toHaveBeenCalledWith(
+    expect(eventEmitterSpy).toHaveBeenCalledWith(
       EmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE,
       z4
     );
+
+    eventEmitterSpy.mockRestore();
   });
 
   it('should verify: remove current when not in tips', () => {
@@ -141,4 +143,14 @@ describe('useRecentlySelectedZone', () => {
     );
     expect(saved).toEqual([]);
   });
+
+  it('should set availability zone when DMS_SYNC_CURRENT_AVAILABILITY_ZONE event is emitted', async () => {
+    const zone = { uid: 'u1', name: 'zone-1' };
+    const { result } = superRenderHook(() => useRecentlySelectedZone<Zone>());
+    expect(result.current.availabilityZone).toBeUndefined();
+    act(() =>
+      eventEmitter.emit(EmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE, zone)
+    );
+    expect(result.current.availabilityZone).toEqual(zone);
+  });
 });

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

@@ -36,18 +36,18 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
       setAvailabilityZone(zone);
       const parsedData = getStorageZoneRecord();
       eventEmitter.emit(EmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE, zone);
-      const currentReocrd = cloneDeep(parsedData);
-      if (currentReocrd.some((v) => v.uid === zone.uid)) {
-        remove(currentReocrd, (v) => v.uid === zone.uid);
+      const currentRecord = cloneDeep(parsedData);
+      if (currentRecord.some((v) => v.uid === zone.uid)) {
+        remove(currentRecord, (v) => v.uid === zone.uid);
       }
 
-      currentReocrd.unshift(zone);
+      currentRecord.unshift(zone);
 
-      if (currentReocrd.length > DEFAULT_MAX_SELECTED_ZONE_NUMBER) {
-        currentReocrd.pop();
+      if (currentRecord.length > DEFAULT_MAX_SELECTED_ZONE_NUMBER) {
+        currentRecord.pop();
       }
 
-      setStorageRecentlySelectedZoneRecord(currentReocrd);
+      setStorageRecentlySelectedZoneRecord(currentRecord);
     },
     [
       setAvailabilityZone,
@@ -61,13 +61,13 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
     const parsedData = getStorageZoneRecord();
     if (!zoneTips?.some((v) => v.uid === availabilityZone?.uid)) {
       setAvailabilityZone(undefined);
-      const currentReocrd = cloneDeep(parsedData);
-      currentReocrd.forEach((i) => {
+      const currentRecord = cloneDeep(parsedData);
+      currentRecord.forEach((i) => {
         if (i.uid === availabilityZone?.uid) {
-          remove(currentReocrd, (v) => v.uid === i.uid);
+          remove(currentRecord, (v) => v.uid === i.uid);
         }
       });
-      setStorageRecentlySelectedZoneRecord(currentReocrd);
+      setStorageRecentlySelectedZoneRecord(currentRecord);
     }
 
     // 如果当前选择的区域在已配置的区域中存在，但是name不相同，则更新name
@@ -78,13 +78,13 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
       )
     ) {
       const name = zoneTips.find((v) => v.uid === availabilityZone?.uid)?.name;
-      const currentReocrd = cloneDeep(parsedData);
-      currentReocrd.forEach((i) => {
+      const currentRecord = cloneDeep(parsedData);
+      currentRecord.forEach((i) => {
         if (i.uid === availabilityZone?.uid) {
           i.name = name;
         }
       });
-      setStorageRecentlySelectedZoneRecord(currentReocrd);
+      setStorageRecentlySelectedZoneRecord(currentRecord);
     }
   };
 
@@ -104,6 +104,14 @@ const useRecentlySelectedZone = <T extends { uid?: string; name?: string }>({
     }
   }, [initializeAvailabilityZone, manualInit]);
 
+  useEffect(() => {
+    const { unsubscribe } = eventEmitter.subscribe(
+      EmitterKey.DMS_SYNC_CURRENT_AVAILABILITY_ZONE,
+      setAvailabilityZone
+    );
+    return unsubscribe;
+  }, [setAvailabilityZone]);
+
   return {
     availabilityZone,
     updateRecentlySelectedZone,