refactor: moved dnd part from Funnel into FunnelDnd

2025-08-06 18:21:07 +04:00
parent 96c53380e0
commit 4b843d8e5d
23 changed files with 410 additions and 287 deletions
--- a/src/app/deals/components/Funnel/Funnel.tsx
+++ b/src/app/deals/components/Funnel/Funnel.tsx
@ -0,0 +1,68 @@
+"use client";
+
+import React, { FC, ReactNode } from "react";
+import DealCard from "@/app/deals/components/DealCard/DealCard";
+import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
+import StatusColumnWrapper from "@/app/deals/components/StatusColumnWrapper/StatusColumnWrapper";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd";
+import FunnelDnd from "@/components/dnd/FunnelDnd/FunnelDnd";
+import { DealSchema, StatusSchema } from "@/lib/client";
+import { sortByLexorank } from "@/utils/lexorank";
+
+const Funnel: FC = () => {
+    const { deals } = useStatusesContext();
+
+    const {
+        sortedStatuses,
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        activeStatus,
+        activeDeal,
+    } = useDealsAndStatusesDnd();
+
+    return (
+        <FunnelDnd
+            containers={sortedStatuses}
+            items={deals}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+            getContainerId={(status: StatusSchema) => `${status.id}-status`}
+            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
+                sortByLexorank(
+                    items.filter(deal => deal.statusId === status.id)
+                )
+            }
+            renderContainer={(
+                status: StatusSchema,
+                funnelColumnComponent: ReactNode
+            ) => (
+                <StatusColumnWrapper
+                    status={status}
+                    isDragging={activeStatus?.id === status.id}>
+                    {funnelColumnComponent}
+                </StatusColumnWrapper>
+            )}
+            renderItem={(deal: DealSchema) => (
+                <DealContainer
+                    key={deal.id}
+                    deal={deal}
+                />
+            )}
+            activeContainer={activeStatus}
+            activeItem={activeDeal}
+            renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
+            renderContainerOverlay={(status: StatusSchema, children) => (
+                <StatusColumnWrapper
+                    status={status}
+                    isDragging>
+                    {children}
+                </StatusColumnWrapper>
+            )}
+        />
+    );
+};
+
+export default Funnel;