refactor: moved logic from columns to table

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -1,14 +1,41 @@
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { IconMoodSad } from "@tabler/icons-react";
 import { Group, Pagination, Stack, Text } from "@mantine/core";
 import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
+import { useDrawersContext } from "@/drawers/DrawersContext";
+import { DealSchema } from "@/lib/client";
 
 const DealsTable: FC = () => {
-    const { deals, paginationInfo, page, setPage, dealsFiltersForm } =
+    const {
-        useDealsContext();
+        deals,
-    const columns = useDealsTableColumns();
+        paginationInfo,
+        page,
+        setPage,
+        dealsFiltersForm,
+        dealsCrud,
+    } = useDealsContext();
+    const { selectedProject } = useProjectsContext();
+    const { openDrawer } = useDrawersContext();
+
+    const onEditClick = useCallback(
+        (deal: DealSchema) => {
+            if (!selectedProject) return;
+            openDrawer({
+                key: "dealEditorDrawer",
+                props: {
+                    deal,
+                    dealsCrud,
+                    project: selectedProject,
+                },
+            });
+        },
+        [openDrawer, dealsCrud]
+    );
+
+    const columns = useDealsTableColumns({ onEditClick });
 
     return (
         <Stack

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -1,33 +1,15 @@
-import { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { IconEdit } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
 import { ActionIcon, Tooltip } from "@mantine/core";
-import { useDealsContext } from "@/app/deals/contexts/DealsContext";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";
 
-const useDealsTableColumns = () => {
+type Props = {
-    const { selectedProject } = useProjectsContext();
+    onEditClick: (deal: DealSchema) => void;
-    const { dealsCrud } = useDealsContext();
+};
-    const { openDrawer } = useDrawersContext();
-
-    const onEditDeal = useCallback(
-        (deal: DealSchema) => {
-            if (!selectedProject) return;
-            openDrawer({
-                key: "dealEditorDrawer",
-                props: {
-                    deal,
-                    dealsCrud,
-                    project: selectedProject,
-                },
-            });
-        },
-        [openDrawer, dealsCrud]
-    );
 
+const useDealsTableColumns = ({ onEditClick }: Props) => {
     return useMemo(
         () =>
             [
@@ -42,7 +24,7 @@ const useDealsTableColumns = () => {
                             <ActionIcon
                                 bdrs={"md"}
                                 size={"lg"}
-                                onClick={() => onEditDeal(deal)}
+                                onClick={() => onEditClick(deal)}
                                 variant={"default"}>
                                 <IconEdit />
                             </ActionIcon>
@@ -65,7 +47,7 @@ const useDealsTableColumns = () => {
                     sortable: true,
                 },
             ] as DataTableColumn<DealSchema>[],
-        [onEditDeal]
+        [onEditClick]
     );
 };