refactor: straightened logic, replaces throttle with mantine debounced

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> = props => {
         handleDragEnd,
         activeStatus,
         activeDeal,
-    } = useDnd(props);
+    } = useDealsAndStatusesDnd(props);
 
     const sensors = useDndSensors();
 

src/app/deals/contexts/ProjectsContext.tsx

@@ -35,12 +35,12 @@ const useProjectsContextState = () => {
                         project => project.id === selectedProject.id
                     ) ?? null
                 );
-            } else {
+                return;
-                setSelectedProject(projects[0]);
             }
-        } else {
+            setSelectedProject(projects[0]);
-            setSelectedProject(null);
+            return;
         }
+        setSelectedProject(null);
     }, [projects]);
 
     return {

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(
+    const debouncedSetStatuses = useDebouncedCallback(setStatuses, 200);
-        () => throttle(setStatuses, 200),
+    const debouncedSetDeals = useDebouncedCallback(setDeals, 200);
-        [setStatuses]
-    );
-    const throttledSetDeals = useMemo(
-        () => throttle(setDeals, 200),
-        [setDeals]
-    );
 
     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 {
+            return;
-            handleDealDragOver(activeId, over);
         }
+        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 {
+            return { overStatusId, newLexorank };
-            newLexorank = getNewRankForAnotherStatus(
-                statusDeals,
-                overDealIndex
-            );
         }
 
+        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 {
+            return;
-            handleDealDragEnd(activeId, over);
         }
+        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 {
+            return;
-            setActiveDeal(
-                deals.find(deal => deal.id === (activeId as number)) ?? null
-            );
         }
+
+        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;

src/components/Welcome/Welcome.tsx

@@ -1,31 +0,0 @@
-import { Anchor, Text, Title } from "@mantine/core";
-
-export function Welcome() {
-    return (
-        <>
-            <Title
-                ta="center"
-                mt={100}
-                className={"font-bold underline"}>
-                Welcome to Mantine
-            </Title>
-            <Text
-                c="dimmed"
-                ta="center"
-                size="lg"
-                maw={580}
-                mx="auto"
-                mt="xl">
-                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{" "}
-                <Anchor
-                    href="https://mantine.dev/guides/next/"
-                    size="lg">
-                    this guide
-                </Anchor>
-                . To get started edit page.tsx file.
-            </Text>
-        </>
-    );
-}

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]);

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]);

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]);