diff --git a/src/app/deals/components/DealContainer/DealContainer.tsx b/src/app/deals/components/DealContainer/DealContainer.tsx new file mode 100644 index 0000000..2346805 --- /dev/null +++ b/src/app/deals/components/DealContainer/DealContainer.tsx @@ -0,0 +1,21 @@ +import React, { FC, useMemo } from "react"; +import { Box } from "@mantine/core"; +import DealCard from "@/app/deals/components/DealCard/DealCard"; +import { SortableItem } from "@/components/SortableDnd/SortableItem"; +import { DealSchema } from "@/types/DealSchema"; + +type Props = { + deal: DealSchema; +}; + +const DealContainer: FC = ({ deal }) => { + const dealBody = useMemo(() => , [deal]); + + return ( + + {dealBody} + + ); +}; + +export default DealContainer; diff --git a/src/app/deals/components/StatusColumn/StatusColumn.tsx b/src/app/deals/components/StatusColumn/StatusColumn.tsx index 8a1d380..1d00219 100644 --- a/src/app/deals/components/StatusColumn/StatusColumn.tsx +++ b/src/app/deals/components/StatusColumn/StatusColumn.tsx @@ -5,23 +5,44 @@ import { verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { Box, Stack, Text } from "@mantine/core"; -import DealCard from "@/app/deals/components/DealCard/DealCard"; -import { SortableItem } from "@/components/SortableDnd/SortableItem"; +import DealContainer from "@/app/deals/components/DealContainer/DealContainer"; import { DealSchema } from "@/types/DealSchema"; +import { StatusSchema } from "@/types/StatusSchema"; import { sortByLexorank } from "@/utils/lexorank"; type BoardSectionProps = { id: string; - title: string; + status: StatusSchema; deals: DealSchema[]; isDragging?: boolean; }; -const StatusColumn = ({ id, title, deals, isDragging }: BoardSectionProps) => { +const StatusColumn = ({ id, status, deals, isDragging }: BoardSectionProps) => { const { setNodeRef } = useDroppable({ id }); - const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]); + const sortedDeals = useMemo( + () => sortByLexorank(deals.filter(deal => deal.statusId === status.id)), + [deals] + ); - console.log("rerender"); + const columnBody = useMemo(() => { + return ( + + + {sortedDeals.map(deal => ( + + ))} + + + ); + }, [sortedDeals]); return ( { userSelect: "none", opacity: isDragging ? 0.5 : 1, }}> - {title} + {status.name} - - - {sortedDeals.map(deal => ( - - - - - - ))} - - + {columnBody} ); }; diff --git a/src/app/deals/components/StatusColumns/StatusColumns.tsx b/src/app/deals/components/StatusColumns/StatusColumns.tsx index d87607e..6b7a9c2 100644 --- a/src/app/deals/components/StatusColumns/StatusColumns.tsx +++ b/src/app/deals/components/StatusColumns/StatusColumns.tsx @@ -19,7 +19,14 @@ const StatusColumns = () => { ); }; - return ; + const onStatusDragEnd = (statusId: number, lexorank: string) => {}; + + return ( + + ); }; export default StatusColumns; diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx index 173cbd6..0fd263d 100644 --- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx +++ b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx @@ -11,6 +11,7 @@ import { KeyboardSensor, Over, PointerSensor, + TouchSensor, useSensor, useSensors, } from "@dnd-kit/core"; @@ -36,25 +37,36 @@ type Props = { statusId: number, lexorank?: string ) => void; - onStatusDragEnd?: (statusId: number, newRank: string) => void; + onStatusDragEnd: (statusId: number, lexorank: string) => void; }; const StatusColumnsDnd: FC = props => { const { statuses, deals, setDeals, setStatuses } = useStatusesContext(); const [activeDeal, setActiveDeal] = useState(null); const [activeStatus, setActiveStatus] = useState(null); - const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]); + + const throttledSetStatuses = useMemo( + () => throttle(setStatuses, 200), + [setStatuses] + ); const throttledSetDeals = useMemo( () => throttle(setDeals, 200), [setDeals] ); + const sensorOptions = { + activationConstraint: { + distance: 5, + }, + }; + const sensors = useSensors( - useSensor(PointerSensor), + useSensor(PointerSensor, sensorOptions), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, - }) + }), + useSensor(TouchSensor, sensorOptions) ); const handleDragStart = ({ active }: DragStartEvent) => { @@ -131,7 +143,7 @@ const StatusColumnsDnd: FC = props => { const newRank = getNewStatusRank(activeStatusId, overStatusId); if (!newRank) return; - setStatuses(statuses => + throttledSetStatuses(statuses => statuses.map(status => status.id === activeStatusId ? { ...status, rank: newRank } @@ -317,10 +329,8 @@ const StatusColumnsDnd: FC = props => { id={`${status.id}-status`}> deal.statusId === status.id - )} + status={status} + deals={deals} isDragging={activeStatus?.id === status.id} /> @@ -332,7 +342,7 @@ const StatusColumnsDnd: FC = props => { ) : activeStatus ? ( deal.statusId ===