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() {
- + + +