after overlay is edited refresh the list

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx

@@ -7,8 +7,9 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { authenticatedUserSelector, loadingUserSelector } from '@/redux/user/user.selectors';
 import { Button } from '@/shared/Button';
 import { userOverlaysDataSelector } from '@/redux/overlays/overlays.selectors';
-import { overlayGroupsSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
 import React from 'react';
+import { overlayGroupsSelector } from '@/redux/overlayGroup/overlayGroup.selectors';
+import { OverlayGroup } from '@/types/models';
 import { UserOverlaysGroup } from './UserOverlaysGroup';
 
 export const UserOverlays = (): JSX.Element => {
@@ -51,12 +52,12 @@ export const UserOverlays = (): JSX.Element => {
               Add overlay
             </Button>
           </div>
-          {overlayGroups.map(group => (
+          {overlayGroups.map((group: OverlayGroup) => (
             <UserOverlaysGroup
               key={group.id}
               groupName={group.name}
               groupId={group.id}
-              overlays={(userOverlays || []).filter(overlay => overlay.group === group.id)}
+              overlays={userOverlays.filter(overlay => overlay.group === group.id)}
             />
           ))}
         </>

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/hooks/useUserOverlays.test.ts

@@ -86,9 +86,12 @@ describe('useUserOverlays', () => {
     const FIRST_USER_OVERLAY = overlayFixture;
     const SECOND_USER_OVERLAY = overlayFixture;
 
+    const overlays = [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY];
+    const reversedOverlays = [SECOND_USER_OVERLAY, FIRST_USER_OVERLAY];
+
     const page = {
       ...overlaysPageFixture,
-      data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
+      data: overlays,
     };
     mockedAxiosNewClient
       .onGet(
@@ -111,7 +114,7 @@ describe('useUserOverlays', () => {
       overlays: {
         ...OVERLAYS_INITIAL_STATE_MOCK,
         userOverlays: {
-          data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
+          data: overlays,
           loading: 'idle',
           error: DEFAULT_ERROR,
         },
@@ -122,7 +125,7 @@ describe('useUserOverlays', () => {
       result: {
         current: { moveUserOverlayListItem, userOverlaysList },
       },
-    } = renderHook(() => useUserOverlays([FIRST_USER_OVERLAY, SECOND_USER_OVERLAY], null), {
+    } = renderHook(() => useUserOverlays(overlays, null), {
       wrapper: Wrapper,
     });
 
@@ -130,7 +133,7 @@ describe('useUserOverlays', () => {
       moveUserOverlayListItem(0, 1);
     });
 
-    expect(userOverlaysList).toEqual([SECOND_USER_OVERLAY, FIRST_USER_OVERLAY]);
+    expect(userOverlaysList).toEqual(reversedOverlays);
   });
   it('calls updateOverlays on calling updateUserOverlaysOrder', async () => {
     const FIRST_USER_OVERLAY = { ...overlayFixture, order: 1, id: 12 };
@@ -169,11 +172,13 @@ describe('useUserOverlays', () => {
       },
     });
 
+    const originalOverlays = [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY];
+
     const {
       result: {
         current: { moveUserOverlayListItem, updateUserOverlaysOrder },
       },
-    } = renderHook(() => useUserOverlays([FIRST_USER_OVERLAY, SECOND_USER_OVERLAY], null), {
+    } = renderHook(() => useUserOverlays(originalOverlays, null), {
       wrapper: Wrapper,
     });
 

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/hooks/useUserOverlays.ts

@@ -4,7 +4,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { loadingUserOverlaysSelector } from '@/redux/overlays/overlays.selectors';
 import { updateOverlays } from '@/redux/overlays/overlays.thunks';
 import { MapOverlay } from '@/types/models';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { moveArrayElement } from '../UserOverlaysGroup.utils';
 
 type UseUserOverlaysReturn = {
@@ -19,10 +19,16 @@ export const useUserOverlays = (
   groupId: number | null,
 ): UseUserOverlaysReturn => {
   const dispatch = useAppDispatch();
-  const [userOverlaysList, setUserOverlaysList] = useState<MapOverlay[]>(userOverlays);
+  const [userOverlaysList, setUserOverlaysList] = useState<MapOverlay[]>([]);
   const loadingUserOverlays = useAppSelector(loadingUserOverlaysSelector);
   const isPending = loadingUserOverlays === 'pending';
 
+  useEffect(() => {
+    if (userOverlays) {
+      setUserOverlaysList(userOverlays);
+    }
+  }, [userOverlays]);
+
   const moveUserOverlayListItem = (dragIndex: number, hoverIndex: number): void => {
     const updatedUserOverlays = moveArrayElement(userOverlaysList, dragIndex, hoverIndex);
     setUserOverlaysList(updatedUserOverlays);

src/redux/overlays/overlays.selectors.ts

@@ -31,7 +31,7 @@ export const loadingUserOverlaysSelector = createSelector(
 
 export const userOverlaysDataSelector = createSelector(
   userOverlaysSelector,
-  overlays => overlays.data,
+  overlays => overlays.data || [],
 );
 
 export const userOverlaysIdsAndOrderSelector = createSelector(