From abbf782945392fcd3c90b7d96dd16e277f7d003d Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Tue, 5 Aug 2025 17:47:39 +0400 Subject: [PATCH] refactor: straightened logic, replaces throttle with mantine debounced --- .../StatusColumnsDnd/StatusColumnsDnd.tsx | 4 +- src/app/deals/contexts/ProjectsContext.tsx | 8 +-- .../{useDnd.ts => useDealsAndStatusesDnd.ts} | 50 ++++++++----------- src/components/Welcome/Welcome.tsx | 31 ------------ src/hooks/useBoardsList.ts | 4 +- src/hooks/useDealsList.ts | 4 +- src/hooks/useStatusesList.ts | 4 +- 7 files changed, 37 insertions(+), 68 deletions(-) rename src/app/deals/hooks/{useDnd.ts => useDealsAndStatusesDnd.ts} (87%) delete mode 100644 src/components/Welcome/Welcome.tsx diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx index ad4452f..f95e21e 100644 --- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx +++ b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx @@ -10,7 +10,7 @@ import { Group, ScrollArea } from "@mantine/core"; import DndOverlay from "@/app/deals/components/DndOverlay/DndOverlay"; import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import useDnd from "@/app/deals/hooks/useDnd"; +import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd"; import { SortableItem } from "@/components/SortableDnd/SortableItem"; import useDndSensors from "../../hooks/useSensors"; @@ -33,7 +33,7 @@ const StatusColumnsDnd: FC = props => { handleDragEnd, activeStatus, activeDeal, - } = useDnd(props); + } = useDealsAndStatusesDnd(props); const sensors = useDndSensors(); diff --git a/src/app/deals/contexts/ProjectsContext.tsx b/src/app/deals/contexts/ProjectsContext.tsx index 89d4399..902db2d 100644 --- a/src/app/deals/contexts/ProjectsContext.tsx +++ b/src/app/deals/contexts/ProjectsContext.tsx @@ -35,12 +35,12 @@ const useProjectsContextState = () => { project => project.id === selectedProject.id ) ?? null ); - } else { - setSelectedProject(projects[0]); + return; } - } else { - setSelectedProject(null); + setSelectedProject(projects[0]); + return; } + setSelectedProject(null); }, [projects]); return { diff --git a/src/app/deals/hooks/useDnd.ts b/src/app/deals/hooks/useDealsAndStatusesDnd.ts similarity index 87% rename from src/app/deals/hooks/useDnd.ts rename to src/app/deals/hooks/useDealsAndStatusesDnd.ts index 7829729..b573ed1 100644 --- a/src/app/deals/hooks/useDnd.ts +++ b/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(null); const [activeStatus, setActiveStatus] = useState(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; diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx deleted file mode 100644 index d744829..0000000 --- a/src/components/Welcome/Welcome.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Anchor, Text, Title } from "@mantine/core"; - -export function Welcome() { - return ( - <> - - Welcome to Mantine - - - This starter Next.js project includes a minimal setup for server - side rendering, if you want to learn more on Mantine + Next.js - integration follow{" "} - - this guide - - . To get started edit page.tsx file. - - - ); -} diff --git a/src/hooks/useBoardsList.ts b/src/hooks/useBoardsList.ts index 456424f..cd387d5 100644 --- a/src/hooks/useBoardsList.ts +++ b/src/hooks/useBoardsList.ts @@ -18,7 +18,9 @@ const useBoardsList = ({ projectId }: Props) => { useEffect(() => { if (projectId === undefined) { setBoards([]); - } else if (data?.boards) { + return; + } + if (data?.boards) { setBoards(data.boards); } }, [data?.boards, projectId]); diff --git a/src/hooks/useDealsList.ts b/src/hooks/useDealsList.ts index 53eb2cd..40c64c1 100644 --- a/src/hooks/useDealsList.ts +++ b/src/hooks/useDealsList.ts @@ -18,7 +18,9 @@ const useDealsList = ({ boardId }: Props) => { useEffect(() => { if (boardId === undefined) { setDeals([]); - } else if (data?.deals) { + return; + } + if (data?.deals) { setDeals(data.deals); } }, [data?.deals, boardId]); diff --git a/src/hooks/useStatusesList.ts b/src/hooks/useStatusesList.ts index 1fd8e94..13cd4df 100644 --- a/src/hooks/useStatusesList.ts +++ b/src/hooks/useStatusesList.ts @@ -18,7 +18,9 @@ const useStatusesList = ({ boardId }: Props) => { useEffect(() => { if (boardId === undefined) { setStatuses([]); - } else if (data?.statuses) { + return; + } + if (data?.statuses) { setStatuses(data.statuses); } }, [data?.statuses, boardId]);