update group on drag and drop

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

@@ -12,7 +12,7 @@ type OverlayListItemProps = {
   index: number;
   moveUserOverlay: (dragIndex: number, hoverIndex: number) => void;
   userOverlay: MapOverlay;
-  updateUserOverlaysOrder: () => void;
+  updateUserOverlaysOrder: (overlay: MapOverlay, targetGroupId: number | null) => void;
 };
 
 export const UserOverlayListItem = ({
@@ -26,6 +26,8 @@ export const UserOverlayListItem = ({
     onDrop: updateUserOverlaysOrder,
     onHover: moveUserOverlay,
     index,
+    groupId: userOverlay.group,
+    overlay: userOverlay,
   });
 
   return (

src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlayListItem/hooks/useDragAndDrop.ts

 /* eslint-disable no-param-reassign */
 import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
+import { MapOverlay } from '@/types/models';
 
 const ITEM_TYPE = 'card';
 
 type UseDragAndDropProps = {
   index: number;
+  overlay: MapOverlay;
+  groupId: number | null;
   onHover: (dragIndex: number, hoverIndex: number) => void;
-  onDrop: () => void;
+  onDrop: (overlay: MapOverlay, targetGroupId: number | null) => void;
 };
 
 type UseDragAndDropReturn = {
@@ -19,10 +22,12 @@ export const useDragAndDrop = ({
   index,
   onDrop,
   onHover,
+  groupId,
+  overlay,
 }: UseDragAndDropProps): UseDragAndDropReturn => {
   const [{ isDragging }, dragRef] = useDrag({
     type: ITEM_TYPE,
-    item: { index },
+    item: { index, overlay, groupId },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
     }),
@@ -30,7 +35,7 @@ export const useDragAndDrop = ({
 
   const [, dropRef] = useDrop({
     accept: ITEM_TYPE,
-    hover: (item: { index: number }) => {
+    hover: (item: { index: number; groupId: number | null; overlay: MapOverlay }) => {
       const dragIndex = item.index;
       const hoverIndex = index;
 
@@ -38,8 +43,8 @@ export const useDragAndDrop = ({
 
       item.index = hoverIndex;
     },
-    drop() {
-      onDrop();
+    drop(item: { index: number; groupId: number | null; overlay: MapOverlay }) {
+      onDrop(item.overlay, groupId);
     },
   });
 

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

@@ -8,6 +8,7 @@ import {
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MapOverlay } from '@/types/models';
+import React from 'react';
 import { UserOverlayListItem } from './UserOverlayListItem';
 import { useUserOverlays } from './hooks/useUserOverlays';
 

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

@@ -186,7 +186,7 @@ describe('useUserOverlays', () => {
       moveUserOverlayListItem(0, 1);
     });
 
-    updateUserOverlaysOrder();
+    updateUserOverlaysOrder(FIRST_USER_OVERLAY, null);
 
     const actions = store.getActions();
 

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

@@ -11,7 +11,7 @@ type UseUserOverlaysReturn = {
   isPending: boolean;
   userOverlaysList: MapOverlay[];
   moveUserOverlayListItem: (dragIndex: number, hoverIndex: number) => void;
-  updateUserOverlaysOrder: () => void;
+  updateUserOverlaysOrder: (overlay: MapOverlay, targetGroupId: number | null) => void;
 };
 
 export const useUserOverlays = (
@@ -30,14 +30,24 @@ export const useUserOverlays = (
   }, [userOverlays]);
 
   const moveUserOverlayListItem = (dragIndex: number, hoverIndex: number): void => {
+    // eslint-disable-next-line no-console
     const updatedUserOverlays = moveArrayElement(userOverlaysList, dragIndex, hoverIndex);
     setUserOverlaysList(updatedUserOverlays);
   };
 
-  const updateUserOverlaysOrder = (): void => {
+  const updateUserOverlaysOrder = (overlay: MapOverlay, targetGroupId: number | null): void => {
     const reorderedUserOverlays = [];
     if (!userOverlays) return;
 
+    // eslint-disable-next-line no-console
+    console.log('update', overlay, targetGroupId);
+    if (targetGroupId !== overlay.group) {
+      const newOverlay = {
+        ...overlay,
+        group: targetGroupId,
+      };
+      reorderedUserOverlays.push(newOverlay);
+    }
     for (let index = 0; index < userOverlays.length; index += 1) {
       const userOverlay = userOverlays[index];
       const newOrderedUserOverlay = {
@@ -50,6 +60,8 @@ export const useUserOverlays = (
         reorderedUserOverlays.push(newOrderedUserOverlay);
       }
     }
+    // eslint-disable-next-line no-console
+    console.log(reorderedUserOverlays);
 
     dispatch(updateOverlays(reorderedUserOverlays));
   };