diff --git a/src/app/deals/components/Boards/Boards.tsx b/src/app/deals/components/Boards/Boards.tsx
index 6630c75..2e72a49 100644
--- a/src/app/deals/components/Boards/Boards.tsx
+++ b/src/app/deals/components/Boards/Boards.tsx
@@ -14,7 +14,9 @@ const Boards = () => {
return ;
};
- const onDragEnd = (itemId: number, newLexorank: string) => {};
+ const onDragEnd = (itemId: number, newLexorank: string) => {
+ console.log("onDragEnd:", itemId, newLexorank);
+ };
return (
{
const { setNodeRef } = useDroppable({ id });
- const [sortedDeals, setSortedDeals] = useState([]);
- useEffect(() => {
- setSortedDeals(sortByLexorank(deals));
- }, [deals]);
+ const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]);
return (
diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
index dd1b13c..311d8e8 100644
--- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
+++ b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
@@ -18,7 +18,7 @@ import { LexoRank } from "lexorank";
import { Group } from "@mantine/core";
import DealCard from "@/app/deals/components/DealCard/DealCard";
import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import { DealSchema } from "@/types/DealSchema";
import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
@@ -31,8 +31,8 @@ type Props = {
};
const StatusColumnsDnd: FC = props => {
- const { statuses, deals, setDeals } = useBoardsContext();
- const [activeDealId, setActiveDealId] = useState(null);
+ const { statuses, deals, setDeals } = useStatusesContext();
+ const [activeDeal, setActiveDeal] = useState(null);
const sensors = useSensors(
useSensor(PointerSensor),
@@ -42,7 +42,9 @@ const StatusColumnsDnd: FC = props => {
);
const handleDragStart = ({ active }: DragStartEvent) => {
- setActiveDealId(active.id as number);
+ setActiveDeal(
+ deals.find(deal => deal.id === (active.id as number)) ?? null
+ );
};
const getStatusByDealId = (dealId: number) => {
@@ -158,7 +160,7 @@ const StatusColumnsDnd: FC = props => {
};
const handleDragEnd = ({ active, over }: DragOverEvent) => {
- setActiveDealId(null);
+ setActiveDeal(null);
if (!over?.id) return;
const activeDealId = Number(active.id);
@@ -175,10 +177,6 @@ const StatusColumnsDnd: FC = props => {
props.onDealDragEnd(activeDealId, overStatusId, newLexorank);
};
- const deal = activeDealId
- ? deals.find(deal => deal.id === activeDealId)
- : null;
-
return (
= props => {
/>
))}
- {deal ? : null}
+ {activeDeal ? : null}
diff --git a/src/app/deals/contexts/BoardsContext.tsx b/src/app/deals/contexts/BoardsContext.tsx
index 8e0f890..afdc0e6 100644
--- a/src/app/deals/contexts/BoardsContext.tsx
+++ b/src/app/deals/contexts/BoardsContext.tsx
@@ -9,21 +9,13 @@ import React, {
} from "react";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import useBoards from "@/app/deals/hooks/useBoards";
-import useDeals from "@/app/deals/hooks/useDeals";
-import useStatuses from "@/app/deals/hooks/useStatuses";
import { BoardSchema } from "@/types/BoardSchema";
-import { DealSchema } from "@/types/DealSchema";
-import { StatusSchema } from "@/types/StatusSchema";
type BoardsContextState = {
boards: BoardSchema[];
setBoards: React.Dispatch>;
selectedBoard: BoardSchema | null;
setSelectedBoard: React.Dispatch>;
- statuses: StatusSchema[];
- setStatuses: React.Dispatch>;
- deals: DealSchema[];
- setDeals: React.Dispatch>;
};
const BoardsContext = createContext(undefined);
@@ -34,8 +26,6 @@ const useBoardsContextState = () => {
null
);
const { selectedProject: project } = useProjectsContext();
- const { statuses, setStatuses } = useStatuses();
- const { deals, setDeals } = useDeals();
useEffect(() => {
if (boards.length > 0 && selectedBoard === null) {
@@ -58,10 +48,6 @@ const useBoardsContextState = () => {
setBoards,
selectedBoard,
setSelectedBoard,
- statuses,
- setStatuses,
- deals,
- setDeals,
};
};
diff --git a/src/app/deals/contexts/StatusesContext.tsx b/src/app/deals/contexts/StatusesContext.tsx
new file mode 100644
index 0000000..3d8f8a9
--- /dev/null
+++ b/src/app/deals/contexts/StatusesContext.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React, { createContext, FC, useContext } from "react";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import useDeals from "@/app/deals/hooks/useDeals";
+import useStatuses from "@/app/deals/hooks/useStatuses";
+import { DealSchema } from "@/types/DealSchema";
+import { StatusSchema } from "@/types/StatusSchema";
+
+type StatusesContextState = {
+ statuses: StatusSchema[];
+ setStatuses: React.Dispatch>;
+ deals: DealSchema[];
+ setDeals: React.Dispatch>;
+};
+
+const StatusesContext = createContext(
+ undefined
+);
+
+const useStatusesContextState = () => {
+ const { statuses, setStatuses } = useStatuses();
+ const { deals, setDeals } = useDeals();
+ const { selectedBoard } = useBoardsContext();
+
+ return {
+ statuses,
+ setStatuses,
+ deals,
+ setDeals,
+ };
+};
+
+type StatusesContextProviderProps = {
+ children: React.ReactNode;
+};
+
+export const StatusesContextProvider: FC = ({
+ children,
+}) => {
+ const state = useStatusesContextState();
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useStatusesContext = () => {
+ const context = useContext(StatusesContext);
+ if (!context) {
+ throw new Error(
+ "useStatusesContext must be used within a StatusesContextProvider"
+ );
+ }
+ return context;
+};
diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index da6665f..7fcc6be 100644
--- a/src/app/deals/page.tsx
+++ b/src/app/deals/page.tsx
@@ -4,6 +4,7 @@ import Header from "@/app/deals/components/Header/Header";
import StatusColumns from "@/app/deals/components/StatusColumns/StatusColumns";
import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
+import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
import PageBlock from "@/components/PageBlock/PageBlock";
import PageContainer from "@/components/PageContainer/PageContainer";
@@ -16,7 +17,9 @@ export default function DealsPage() {
-
+
+
+