import { useMemo, useState } from "react"; import { DragOverEvent, DragStartEvent, Over } from "@dnd-kit/core"; 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"; import { DealSchema, StatusSchema } from "@/lib/client"; import { sortByLexorank } from "@/utils/lexorank"; const useDealsAndStatusesDnd = () => { const [activeDeal, setActiveDeal] = useState(null); const [activeStatus, setActiveStatus] = useState(null); const { statuses, deals, setDeals, setStatuses, updateDeal, updateStatus } = useStatusesContext(); const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]); const { getNewRankForSameStatus, getNewRankForAnotherStatus, getNewStatusRank, } = useGetNewRank(); const debouncedSetStatuses = useDebouncedCallback(setStatuses, 200); const debouncedSetDeals = useDebouncedCallback(setDeals, 200); 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); return; } 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; debouncedSetDeals(deals => deals.map(deal => deal.id === activeDealId ? { ...deal, statusId: overStatusId, lexorank: newLexorank || deal.lexorank, } : 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; debouncedSetStatuses(statuses => statuses.map(status => status.id === activeStatusId ? { ...status, lexorank: newRank } : status ) ); }; const getDropTarget = ( overId: string | number, activeDealId: number, activeStatusId: number, isOnDragEnd: boolean = false ) => { if (typeof overId === "string") { return { overStatusId: getStatusId(overId), newLexorank: undefined, }; } const overDealId = Number(overId); const overStatusId = getStatusByDealId(overDealId)?.id; if (!overStatusId || (!isOnDragEnd && activeDealId === overDealId)) { return { overStatusId: undefined, newLexorank: undefined }; } const statusDeals = sortByLexorank( deals.filter(deal => deal.statusId === overStatusId) ); const overDealIndex = statusDeals.findIndex( deal => deal.id === overDealId ); if (activeStatusId === overStatusId) { const newLexorank = getNewRankForSameStatus( statusDeals, overDealIndex, activeDealId ); return { overStatusId, newLexorank }; } const 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); return; } 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) return; const newRank = getNewStatusRank(activeStatusId, overStatusId); if (!newRank) return; onStatusDragEnd?.(activeStatusId, newRank); }; const onStatusDragEnd = (statusId: number, lexorank: string) => { updateStatus.mutate({ path: { statusId, }, body: { status: { lexorank, }, }, }); }; 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, true ); if (!overStatusId) return; onDealDragEnd(activeDealId, overStatusId, newLexorank); }; const onDealDragEnd = ( dealId: number, statusId: number, lexorank?: string ) => { updateDeal.mutate({ path: { dealId, }, body: { deal: { statusId, lexorank, }, }, }); }; 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 ); return; } setActiveDeal( deals.find(deal => deal.id === (activeId as number)) ?? null ); }; return { sortedStatuses, handleDragStart, handleDragOver, handleDragEnd, activeStatus, activeDeal, }; }; export default useDealsAndStatusesDnd;