fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimization of render during dnd

Browse Source
This commit is contained in:
AlexSserb
2025-08-02 09:56:35 +04:00
parent 586af488da
commit 8ae198897d
4 changed files with 78 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/deals/components/DealContainer/DealContainer.tsx Normal file
View File

@ -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<Props> = ({ deal }) => {
const dealBody = useMemo(() => <DealCard deal={deal} />, [deal]);
return (
<Box>
<SortableItem id={deal.id}>{dealBody}</SortableItem>
</Box>
);
};
export default DealContainer;

52
src/app/deals/components/StatusColumn/StatusColumn.tsx
View File

@ -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 (
<SortableContext
id={id}
items={sortedDeals}
strategy={verticalListSortingStrategy}>
<Stack
gap={"xs"}
ref={setNodeRef}>
{sortedDeals.map(deal => (
<DealContainer
key={deal.id}
deal={deal}
/>
))}
</Stack>
</SortableContext>
);
}, [sortedDeals]);
return (
<Box
@ -37,24 +58,9 @@ const StatusColumn = ({ id, title, deals, isDragging }: BoardSectionProps) => {
userSelect: "none",
opacity: isDragging ? 0.5 : 1,
}}>
{title}
{status.name}
</Text>
<SortableContext
id={id}
items={sortedDeals}
strategy={verticalListSortingStrategy}>
<Stack
gap={"xs"}
ref={setNodeRef}>
{sortedDeals.map(deal => (
<Box key={deal.id}>
<SortableItem id={deal.id}>
<DealCard deal={deal} />
</SortableItem>
</Box>
))}
</Stack>
</SortableContext>
{columnBody}
</Box>
);
};

9
src/app/deals/components/StatusColumns/StatusColumns.tsx
View File

@ -19,7 +19,14 @@ const StatusColumns = () => {
);
};
return <StatusColumnsDnd onDealDragEnd={onDealDragEnd} />;
const onStatusDragEnd = (statusId: number, lexorank: string) => {};
return (
<StatusColumnsDnd
onDealDragEnd={onDealDragEnd}
onStatusDragEnd={onStatusDragEnd}
/>
);
};
export default StatusColumns;

30
src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx
View File

@ -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> = props => {
const { statuses, deals, setDeals, setStatuses } = useStatusesContext();
const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
const [activeStatus, setActiveStatus] = useState<StatusSchema | null>(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> = 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> = props => {
id={`${status.id}-status`}>
<StatusColumn
id={`${status.id}-status`}
title={status.name}
deals={deals.filter(
deal => deal.statusId === status.id
)}
status={status}
deals={deals}
isDragging={activeStatus?.id === status.id}
/>
</SortableItem>
@ -332,7 +342,7 @@ const StatusColumnsDnd: FC<Props> = props => {
) : activeStatus ? (
<StatusColumn
id={`${activeStatus.id}-status`}
title={activeStatus.name}
status={activeStatus}
deals={deals.filter(
deal =>
deal.statusId ===