refactor: straightened logic, replaces throttle with mantine debounced

src/app/deals/hooks/useDealsAndStatusesDnd.ts

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core";
-import { throttle } from "lodash";
+import { useDebouncedCallback } from "@mantine/hooks";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
 import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
@@ -16,7 +16,7 @@ type Props = {
     onStatusDragEnd: (statusId: number, lexorank: string) => void;
 };
 
-const useDnd = (props: Props) => {
+const useDealsAndStatusesDnd = (props: Props) => {
     const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
     const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
     const { statuses, deals, setDeals, setStatuses } = useStatusesContext();
@@ -28,14 +28,8 @@ const useDnd = (props: Props) => {
         getNewStatusRank,
     } = useGetNewRank();
 
-    const throttledSetStatuses = useMemo(
-        () => throttle(setStatuses, 200),
-        [setStatuses]
-    );
-    const throttledSetDeals = useMemo(
-        () => throttle(setDeals, 200),
-        [setDeals]
-    );
+    const debouncedSetStatuses = useDebouncedCallback(setStatuses, 200);
+    const debouncedSetDeals = useDebouncedCallback(setDeals, 200);
 
     const getStatusByDealId = (dealId: number) => {
         const deal = deals.find(deal => deal.id === dealId);
@@ -49,9 +43,9 @@ const useDnd = (props: Props) => {
 
         if (typeof activeId === "string" && isStatusId(activeId)) {
             handleColumnDragOver(activeId, over);
-        } else {
-            handleDealDragOver(activeId, over);
+            return;
         }
+        handleDealDragOver(activeId, over);
     };
 
     const handleDealDragOver = (activeId: string | number, over: Over) => {
@@ -66,7 +60,7 @@ const useDnd = (props: Props) => {
         );
         if (!overStatusId) return;
 
-        throttledSetDeals(deals =>
+        debouncedSetDeals(deals =>
             deals.map(deal =>
                 deal.id === activeDealId
                     ? {
@@ -96,7 +90,7 @@ const useDnd = (props: Props) => {
         const newRank = getNewStatusRank(activeStatusId, overStatusId);
         if (!newRank) return;
 
-        throttledSetStatuses(statuses =>
+        debouncedSetStatuses(statuses =>
             statuses.map(status =>
                 status.id === activeStatusId
                     ? { ...status, lexorank: newRank }
@@ -132,20 +126,19 @@ const useDnd = (props: Props) => {
             deal => deal.id === overDealId
         );
 
-        let newLexorank;
         if (activeStatusId === overStatusId) {
-            newLexorank = getNewRankForSameStatus(
+            const newLexorank = getNewRankForSameStatus(
                 statusDeals,
                 overDealIndex,
                 activeDealId
             );
-        } else {
-            newLexorank = getNewRankForAnotherStatus(
-                statusDeals,
-                overDealIndex
-            );
+            return { overStatusId, newLexorank };
         }
 
+        const newLexorank = getNewRankForAnotherStatus(
+            statusDeals,
+            overDealIndex
+        );
         return { overStatusId, newLexorank };
     };
 
@@ -158,9 +151,9 @@ const useDnd = (props: Props) => {
 
         if (typeof activeId === "string" && isStatusId(activeId)) {
             handleStatusColumnDragEnd(activeId, over);
-        } else {
-            handleDealDragEnd(activeId, over);
+            return;
         }
+        handleDealDragEnd(activeId, over);
     };
 
     const handleStatusColumnDragEnd = (activeId: string, over: Over) => {
@@ -207,11 +200,12 @@ const useDnd = (props: Props) => {
             setActiveStatus(
                 statuses.find(status => status.id === statusId) ?? null
             );
-        } else {
-            setActiveDeal(
-                deals.find(deal => deal.id === (activeId as number)) ?? null
-            );
+            return;
         }
+
+        setActiveDeal(
+            deals.find(deal => deal.id === (activeId as number)) ?? null
+        );
     };
 
     return {
@@ -224,4 +218,4 @@ const useDnd = (props: Props) => {
     };
 };
 
-export default useDnd;
+export default useDealsAndStatusesDnd;