refactor: refactoring of deals and statuses dnd

src/app/deals/hooks/useDnd.ts

@@ -0,0 +1,226 @@
+import { useMemo, useState } from "react";
+import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core";
+import { throttle } from "lodash";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
+import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
+import { DealSchema } from "@/types/DealSchema";
+import { StatusSchema } from "@/types/StatusSchema";
+import { sortByLexorank } from "@/utils/lexorank";
+
+type Props = {
+    onDealDragEnd: (
+        dealId: number,
+        statusId: number,
+        lexorank?: string
+    ) => void;
+    onStatusDragEnd: (statusId: number, lexorank: string) => void;
+};
+
+const useDnd = (props: Props) => {
+    const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
+    const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(null);
+    const { statuses, deals, setDeals, setStatuses } = useStatusesContext();
+    const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]);
+
+    const {
+        getNewRankForSameStatus,
+        getNewRankForAnotherStatus,
+        getNewStatusRank,
+    } = useGetNewRank();
+
+    const throttledSetStatuses = useMemo(
+        () => throttle(setStatuses, 200),
+        [setStatuses]
+    );
+    const throttledSetDeals = useMemo(
+        () => throttle(setDeals, 200),
+        [setDeals]
+    );
+
+    const getStatusByDealId = (dealId: number) => {
+        const deal = deals.find(deal => deal.id === dealId);
+        if (!deal) return;
+        return statuses.find(status => status.id === deal.statusId);
+    };
+
+    const handleDragOver = ({ active, over }: DragOverEvent) => {
+        if (!over) return;
+        const activeId = active.id as string | number;
+
+        if (typeof activeId === "string" && isStatusId(activeId)) {
+            handleColumnDragOver(activeId, over);
+        } else {
+            handleDealDragOver(activeId, over);
+        }
+    };
+
+    const handleDealDragOver = (activeId: string | number, over: Over) => {
+        const activeDealId = Number(activeId);
+        const activeStatusId = getStatusByDealId(activeDealId)?.id;
+        if (!activeStatusId) return;
+
+        const { overStatusId, newLexorank } = getDropTarget(
+            over.id,
+            activeDealId,
+            activeStatusId
+        );
+        if (!overStatusId) return;
+
+        throttledSetDeals(deals =>
+            deals.map(deal =>
+                deal.id === activeDealId
+                    ? {
+                          ...deal,
+                          statusId: overStatusId,
+                          rank: newLexorank || deal.rank,
+                      }
+                    : deal
+            )
+        );
+    };
+
+    const handleColumnDragOver = (activeId: string, over: Over) => {
+        const activeStatusId = getStatusId(activeId);
+        let overStatusId: number;
+
+        if (typeof over.id === "string" && isStatusId(over.id)) {
+            overStatusId = getStatusId(over.id);
+        } else {
+            const deal = deals.find(deal => deal.id === over.id);
+            if (!deal) return;
+            overStatusId = deal.statusId;
+        }
+
+        if (!overStatusId || activeStatusId === overStatusId) return;
+
+        const newRank = getNewStatusRank(activeStatusId, overStatusId);
+        if (!newRank) return;
+
+        throttledSetStatuses(statuses =>
+            statuses.map(status =>
+                status.id === activeStatusId
+                    ? { ...status, rank: newRank }
+                    : status
+            )
+        );
+    };
+
+    const getDropTarget = (
+        overId: string | number,
+        activeDealId: number,
+        activeStatusId: number
+    ) => {
+        if (typeof overId === "string") {
+            return {
+                overStatusId: getStatusId(overId),
+                newLexorank: undefined,
+            };
+        }
+
+        const overDealId = Number(overId);
+        const overStatusId = getStatusByDealId(overDealId)?.id;
+
+        if (!overStatusId || activeDealId === overDealId) {
+            return { overStatusId: undefined, newLexorank: undefined };
+        }
+
+        const statusDeals = sortByLexorank(
+            deals.filter(deal => deal.statusId === overStatusId)
+        );
+        const overDealIndex = statusDeals.findIndex(
+            deal => deal.id === overDealId
+        );
+
+        let newLexorank;
+        if (activeStatusId === overStatusId) {
+            newLexorank = getNewRankForSameStatus(
+                statusDeals,
+                overDealIndex,
+                activeDealId
+            );
+        } else {
+            newLexorank = getNewRankForAnotherStatus(
+                statusDeals,
+                overDealIndex
+            );
+        }
+
+        return { overStatusId, newLexorank };
+    };
+
+    const handleDragEnd = ({ active, over }: DragOverEvent) => {
+        setActiveDeal(null);
+        setActiveStatus(null);
+        if (!over) return;
+
+        const activeId: string | number = active.id;
+
+        if (typeof activeId === "string" && isStatusId(activeId)) {
+            handleStatusColumnDragEnd(activeId, over);
+        } else {
+            handleDealDragEnd(activeId, over);
+        }
+    };
+
+    const handleStatusColumnDragEnd = (activeId: string, over: Over) => {
+        const activeStatusId = getStatusId(activeId);
+        let overStatusId: number;
+
+        if (typeof over.id === "string" && isStatusId(over.id)) {
+            overStatusId = getStatusId(over.id);
+        } else {
+            const deal = deals.find(deal => deal.statusId === over.id);
+            if (!deal) return;
+            overStatusId = deal.statusId;
+        }
+
+        if (!overStatusId || activeStatusId === overStatusId) return;
+
+        const newRank = getNewStatusRank(activeStatusId, overStatusId);
+        if (!newRank) return;
+
+        props.onStatusDragEnd?.(activeStatusId, newRank);
+    };
+
+    const handleDealDragEnd = (activeId: number | string, over: Over) => {
+        const activeDealId = Number(activeId);
+        const activeStatusId = getStatusByDealId(activeDealId)?.id;
+        if (!activeStatusId) return;
+
+        const { overStatusId, newLexorank } = getDropTarget(
+            over.id,
+            activeDealId,
+            activeStatusId
+        );
+        if (!overStatusId) return;
+
+        props.onDealDragEnd(activeDealId, overStatusId, newLexorank);
+    };
+
+    const handleDragStart = ({ active }: DragStartEvent) => {
+        const activeId = active.id as string | number;
+
+        if (typeof activeId === "string" && isStatusId(activeId)) {
+            const statusId = getStatusId(activeId);
+            setActiveStatus(
+                statuses.find(status => status.id === statusId) ?? null
+            );
+        } else {
+            setActiveDeal(
+                deals.find(deal => deal.id === (activeId as number)) ?? null
+            );
+        }
+    };
+
+    return {
+        sortedStatuses,
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        activeStatus,
+        activeDeal,
+    };
+};
+
+export default useDnd;

src/app/deals/hooks/useGetNewRank.ts

@@ -0,0 +1,78 @@
+import { LexoRank } from "lexorank";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { DealSchema } from "@/types/DealSchema";
+import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
+
+const useGetNewRank = () => {
+    const { deals, statuses } = useStatusesContext();
+
+    const getNewRankForSameStatus = (
+        statusDeals: DealSchema[],
+        overDealIndex: number,
+        activeDealId: number
+    ) => {
+        const activeDealIndex = statusDeals.findIndex(
+            deal => deal.id === activeDealId
+        );
+        const [leftIndex, rightIndex] =
+            overDealIndex < activeDealIndex
+                ? [overDealIndex - 1, overDealIndex]
+                : [overDealIndex, overDealIndex + 1];
+
+        const leftLexorank =
+            leftIndex >= 0 ? LexoRank.parse(deals[leftIndex].rank) : null;
+        const rightLexorank =
+            rightIndex < deals.length
+                ? LexoRank.parse(deals[rightIndex].rank)
+                : null;
+
+        return getNewLexorank(leftLexorank, rightLexorank).toString();
+    };
+
+    const getNewRankForAnotherStatus = (
+        statusDeals: DealSchema[],
+        overDealIndex: number
+    ) => {
+        const leftLexorank =
+            overDealIndex > 0
+                ? LexoRank.parse(statusDeals[overDealIndex - 1].rank)
+                : null;
+        const rightLexorank = LexoRank.parse(statusDeals[overDealIndex].rank);
+
+        return getNewLexorank(leftLexorank, rightLexorank).toString();
+    };
+
+    const getNewStatusRank = (activeStatusId: number, overStatusId: number) => {
+        const sortedStatusList = sortByLexorank(statuses);
+        const overIndex = sortedStatusList.findIndex(
+            s => s.id === overStatusId
+        );
+        const activeIndex = sortedStatusList.findIndex(
+            s => s.id === activeStatusId
+        );
+
+        if (overIndex === -1 || activeIndex === -1) return null;
+
+        const [leftIndex, rightIndex] =
+            overIndex < activeIndex
+                ? [overIndex - 1, overIndex]
+                : [overIndex, overIndex + 1];
+
+        const leftLexorank =
+            leftIndex >= 0 ? LexoRank.parse(statuses[leftIndex].rank) : null;
+        const rightLexorank =
+            rightIndex < statuses.length
+                ? LexoRank.parse(statuses[rightIndex].rank)
+                : null;
+
+        return getNewLexorank(leftLexorank, rightLexorank).toString();
+    };
+
+    return {
+        getNewRankForSameStatus,
+        getNewRankForAnotherStatus,
+        getNewStatusRank,
+    };
+};
+
+export default useGetNewRank;

src/app/deals/hooks/useSensors.ts

@@ -0,0 +1,26 @@
+import {
+    KeyboardSensor,
+    PointerSensor,
+    TouchSensor,
+    useSensor,
+    useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+const useDndSensors = () => {
+    const sensorOptions = {
+        activationConstraint: {
+            distance: 5,
+        },
+    };
+
+    return useSensors(
+        useSensor(PointerSensor, sensorOptions),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+        useSensor(TouchSensor, sensorOptions)
+    );
+};
+
+export default useDndSensors;