From 4b843d8e5dc73e7694c3a2f10b6d9569ff845834 Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Wed, 6 Aug 2025 18:21:07 +0400 Subject: [PATCH] refactor: moved dnd part from Funnel into FunnelDnd --- .../deals/components/DealCard/DealCard.tsx | 1 + .../DealContainer/DealContainer.tsx | 2 +- .../components/DndOverlay/DndOverlay.tsx | 36 ----- src/app/deals/components/Funnel/Funnel.tsx | 68 ++++++++++ .../components/StatusColumn/StatusColumn.tsx | 67 ---------- .../StatusColumnWrapper.tsx | 33 +++++ .../StatusColumns/StatusColumns.tsx | 76 ----------- .../StatusColumnsDnd/StatusColumnsDnd.tsx | 80 ----------- src/app/deals/contexts/StatusesContext.tsx | 56 +++++++- src/app/deals/hooks/useDealsAndStatusesDnd.ts | 49 +++++-- src/app/deals/page.tsx | 4 +- src/components/dnd/FunnelDnd/FunnelColumn.tsx | 42 ++++++ src/components/dnd/FunnelDnd/FunnelDnd.tsx | 126 ++++++++++++++++++ .../dnd/FunnelDnd/FunnelOverlay.tsx | 30 +++++ src/components/dnd/FunnelDnd/index.ts | 3 + .../dnd/SortableDnd/SortableDnd.tsx | 6 +- .../dnd/SortableDnd/SortableOverlay.tsx | 2 +- .../DragHandle.tsx | 2 +- .../SortableItem.tsx | 6 +- .../SortableItemContext.tsx | 0 src/components/dnd/SortableItem/index.ts | 3 + src/components/dnd/types/types.ts | 3 + src/hey-api-config.ts | 2 +- 23 files changed, 410 insertions(+), 287 deletions(-) delete mode 100644 src/app/deals/components/DndOverlay/DndOverlay.tsx create mode 100644 src/app/deals/components/Funnel/Funnel.tsx delete mode 100644 src/app/deals/components/StatusColumn/StatusColumn.tsx create mode 100644 src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx delete mode 100644 src/app/deals/components/StatusColumns/StatusColumns.tsx delete mode 100644 src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx create mode 100644 src/components/dnd/FunnelDnd/FunnelColumn.tsx create mode 100644 src/components/dnd/FunnelDnd/FunnelDnd.tsx create mode 100644 src/components/dnd/FunnelDnd/FunnelOverlay.tsx create mode 100644 src/components/dnd/FunnelDnd/index.ts rename src/components/dnd/{SortableDnd => SortableItem}/DragHandle.tsx (87%) rename src/components/dnd/{SortableDnd => SortableItem}/SortableItem.tsx (93%) rename src/components/dnd/{SortableDnd => SortableItem}/SortableItemContext.tsx (100%) create mode 100644 src/components/dnd/SortableItem/index.ts create mode 100644 src/components/dnd/types/types.ts diff --git a/src/app/deals/components/DealCard/DealCard.tsx b/src/app/deals/components/DealCard/DealCard.tsx index 872b5d0..d423232 100644 --- a/src/app/deals/components/DealCard/DealCard.tsx +++ b/src/app/deals/components/DealCard/DealCard.tsx @@ -6,6 +6,7 @@ type Props = { }; const DealCard = ({ deal }: Props) => { + console.log("deal"); return {deal.name}; }; diff --git a/src/app/deals/components/DealContainer/DealContainer.tsx b/src/app/deals/components/DealContainer/DealContainer.tsx index 9798aeb..f594c06 100644 --- a/src/app/deals/components/DealContainer/DealContainer.tsx +++ b/src/app/deals/components/DealContainer/DealContainer.tsx @@ -1,8 +1,8 @@ import React, { FC, useMemo } from "react"; import { Box } from "@mantine/core"; import DealCard from "@/app/deals/components/DealCard/DealCard"; +import SortableItem from "@/components/dnd/SortableItem"; import { DealSchema } from "@/lib/client"; -import { SortableItem } from "@/components/dnd/SortableDnd/SortableItem"; type Props = { deal: DealSchema; diff --git a/src/app/deals/components/DndOverlay/DndOverlay.tsx b/src/app/deals/components/DndOverlay/DndOverlay.tsx deleted file mode 100644 index 369a08d..0000000 --- a/src/app/deals/components/DndOverlay/DndOverlay.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; -import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core"; -import DealCard from "@/app/deals/components/DealCard/DealCard"; -import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn"; -import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import { DealSchema, StatusSchema } from "@/lib/client"; - -type Props = { - activeDeal: DealSchema | null; - activeStatus: StatusSchema | null; -}; - -const DndOverlay = ({ activeStatus, activeDeal }: Props) => { - const { deals } = useStatusesContext(); - - return ( - -
- {activeDeal ? ( - - ) : activeStatus ? ( - deal.statusId === activeStatus.id - )} - isDragging - /> - ) : null} -
- - ); -}; - -export default DndOverlay; diff --git a/src/app/deals/components/Funnel/Funnel.tsx b/src/app/deals/components/Funnel/Funnel.tsx new file mode 100644 index 0000000..4bbc3c2 --- /dev/null +++ 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 ( + `${status.id}-status`} + getItemsByContainer={(status: StatusSchema, items: DealSchema[]) => + sortByLexorank( + items.filter(deal => deal.statusId === status.id) + ) + } + renderContainer={( + status: StatusSchema, + funnelColumnComponent: ReactNode + ) => ( + + {funnelColumnComponent} + + )} + renderItem={(deal: DealSchema) => ( + + )} + activeContainer={activeStatus} + activeItem={activeDeal} + renderItemOverlay={(deal: DealSchema) => } + renderContainerOverlay={(status: StatusSchema, children) => ( + + {children} + + )} + /> + ); +}; + +export default Funnel; diff --git a/src/app/deals/components/StatusColumn/StatusColumn.tsx b/src/app/deals/components/StatusColumn/StatusColumn.tsx deleted file mode 100644 index 65e6fe2..0000000 --- a/src/app/deals/components/StatusColumn/StatusColumn.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useMemo } from "react"; -import { useDroppable } from "@dnd-kit/core"; -import { - SortableContext, - verticalListSortingStrategy, -} from "@dnd-kit/sortable"; -import { Box, Stack, Text } from "@mantine/core"; -import DealContainer from "@/app/deals/components/DealContainer/DealContainer"; -import { DealSchema, StatusSchema } from "@/lib/client"; -import { sortByLexorank } from "@/utils/lexorank"; - -type Props = { - id: string; - status: StatusSchema; - deals: DealSchema[]; - isDragging?: boolean; -}; - -const StatusColumn = ({ id, status, deals, isDragging }: Props) => { - const { setNodeRef } = useDroppable({ id }); - const sortedDeals = useMemo( - () => sortByLexorank(deals.filter(deal => deal.statusId === status.id)), - [deals] - ); - - const columnBody = useMemo(() => { - return ( - - - {sortedDeals.map(deal => ( - - ))} - - - ); - }, [sortedDeals]); - - return ( - - - {status.name} - - {columnBody} - - ); -}; - -export default StatusColumn; diff --git a/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx b/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx new file mode 100644 index 0000000..30962e8 --- /dev/null +++ b/src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx @@ -0,0 +1,33 @@ +import React, { ReactNode } from "react"; +import { Box, Text } from "@mantine/core"; +import { StatusSchema } from "@/lib/client"; + +type Props = { + status: StatusSchema; + isDragging?: boolean; + children: ReactNode; +}; + +const StatusColumnWrapper = ({ status, children, isDragging = false }: Props) => { + return ( + + + {status.name} + + {children} + + ); +}; + +export default StatusColumnWrapper; diff --git a/src/app/deals/components/StatusColumns/StatusColumns.tsx b/src/app/deals/components/StatusColumns/StatusColumns.tsx deleted file mode 100644 index cbf3209..0000000 --- a/src/app/deals/components/StatusColumns/StatusColumns.tsx +++ /dev/null @@ -1,76 +0,0 @@ -"use client"; - -import { useMutation } from "@tanstack/react-query"; -import StatusColumnsDnd from "@/app/deals/components/StatusColumnsDnd/StatusColumnsDnd"; -import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import { - updateDealMutation, - updateStatusMutation, -} from "@/lib/client/@tanstack/react-query.gen"; -import { notifications } from "@/lib/notifications"; - -const StatusColumns = () => { - const { refetchStatuses, refetchDeals } = useStatusesContext(); - - const updateStatus = useMutation({ - ...updateStatusMutation(), - onError: error => { - console.error(error); - notifications.error({ - message: error.response?.data?.detail as string | undefined, - }); - refetchStatuses(); - }, - }); - - const updateDeals = useMutation({ - ...updateDealMutation(), - onError: error => { - console.error(error); - notifications.error({ - message: error.response?.data?.detail as string | undefined, - }); - refetchDeals(); - }, - }); - - const onDealDragEnd = ( - dealId: number, - statusId: number, - lexorank?: string - ) => { - updateDeals.mutate({ - path: { - dealId, - }, - body: { - deal: { - statusId, - lexorank, - }, - }, - }); - }; - - const onStatusDragEnd = (statusId: number, lexorank: string) => { - updateStatus.mutate({ - path: { - statusId, - }, - body: { - status: { - lexorank, - }, - }, - }); - }; - - return ( - - ); -}; - -export default StatusColumns; diff --git a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx b/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx deleted file mode 100644 index 1d3c080..0000000 --- a/src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx +++ /dev/null @@ -1,80 +0,0 @@ -"use client"; - -import React, { FC } from "react"; -import { closestCorners, DndContext } from "@dnd-kit/core"; -import { - horizontalListSortingStrategy, - SortableContext, -} from "@dnd-kit/sortable"; -import { Group, ScrollArea } from "@mantine/core"; -import DndOverlay from "@/app/deals/components/DndOverlay/DndOverlay"; -import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn"; -import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; -import useDealsAndStatusesDnd from "@/app/deals/hooks/useDealsAndStatusesDnd"; -import { SortableItem } from "@/components/dnd/SortableDnd/SortableItem"; -import useDndSensors from "../../hooks/useSensors"; - -type Props = { - onDealDragEnd: ( - dealId: number, - statusId: number, - lexorank?: string - ) => void; - onStatusDragEnd: (statusId: number, lexorank: string) => void; -}; - -const StatusColumnsDnd: FC = props => { - const { deals } = useStatusesContext(); - - const { - sortedStatuses, - handleDragStart, - handleDragOver, - handleDragEnd, - activeStatus, - activeDeal, - } = useDealsAndStatusesDnd(props); - - const sensors = useDndSensors(); - - return ( - - - `${status.id}-status`)} - strategy={horizontalListSortingStrategy}> - - {sortedStatuses.map(status => ( - - - - ))} - - - - - - ); -}; - -export default StatusColumnsDnd; diff --git a/src/app/deals/contexts/StatusesContext.tsx b/src/app/deals/contexts/StatusesContext.tsx index 4530b7a..6ab7d3d 100644 --- a/src/app/deals/contexts/StatusesContext.tsx +++ b/src/app/deals/contexts/StatusesContext.tsx @@ -1,17 +1,43 @@ "use client"; import React, { createContext, FC, useContext, useEffect } from "react"; +import { useMutation, UseMutationResult } from "@tanstack/react-query"; +import { AxiosError } from "axios"; import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; -import { DealSchema, StatusSchema } from "@/lib/client"; import useDealsList from "@/hooks/useDealsList"; import useStatusesList from "@/hooks/useStatusesList"; +import { + DealSchema, + HttpValidationError, + Options, + StatusSchema, + UpdateDealData, + UpdateDealResponse, + UpdateStatusData, + UpdateStatusResponse, +} from "@/lib/client"; +import { + updateDealMutation, + updateStatusMutation, +} from "@/lib/client/@tanstack/react-query.gen"; +import { notifications } from "@/lib/notifications"; type StatusesContextState = { statuses: StatusSchema[]; setStatuses: React.Dispatch>; + updateStatus: UseMutationResult< + UpdateStatusResponse, + AxiosError, + Options + >; + refetchStatuses: () => void; deals: DealSchema[]; setDeals: React.Dispatch>; - refetchStatuses: () => void; + updateDeal: UseMutationResult< + UpdateDealResponse, + AxiosError, + Options + >; refetchDeals: () => void; }; @@ -39,12 +65,36 @@ const useStatusesContextState = () => { refetchStatuses(); }, [selectedBoard]); + const updateStatus = useMutation({ + ...updateStatusMutation(), + onError: error => { + console.error(error); + notifications.error({ + message: error.response?.data?.detail as string | undefined, + }); + refetchStatuses(); + }, + }); + + const updateDeal = useMutation({ + ...updateDealMutation(), + onError: error => { + console.error(error); + notifications.error({ + message: error.response?.data?.detail as string | undefined, + }); + refetchDeals(); + }, + }); + return { statuses, setStatuses, + updateStatus, + refetchStatuses, deals, setDeals, - refetchStatuses, + updateDeal, refetchDeals, }; }; diff --git a/src/app/deals/hooks/useDealsAndStatusesDnd.ts b/src/app/deals/hooks/useDealsAndStatusesDnd.ts index 51968af..266cf79 100644 --- a/src/app/deals/hooks/useDealsAndStatusesDnd.ts +++ b/src/app/deals/hooks/useDealsAndStatusesDnd.ts @@ -7,19 +7,11 @@ import { getStatusId, isStatusId } from "@/app/deals/utils/statusId"; import { DealSchema, StatusSchema } from "@/lib/client"; import { sortByLexorank } from "@/utils/lexorank"; -type Props = { - onDealDragEnd: ( - dealId: number, - statusId: number, - lexorank?: string - ) => void; - onStatusDragEnd: (statusId: number, lexorank: string) => void; -}; - -const useDealsAndStatusesDnd = (props: Props) => { +const useDealsAndStatusesDnd = () => { const [activeDeal, setActiveDeal] = useState(null); const [activeStatus, setActiveStatus] = useState(null); - const { statuses, deals, setDeals, setStatuses } = useStatusesContext(); + const { statuses, deals, setDeals, setStatuses, updateDeal, updateStatus } = + useStatusesContext(); const sortedStatuses = useMemo(() => sortByLexorank(statuses), [statuses]); const { @@ -173,7 +165,20 @@ const useDealsAndStatusesDnd = (props: Props) => { const newRank = getNewStatusRank(activeStatusId, overStatusId); if (!newRank) return; - props.onStatusDragEnd?.(activeStatusId, newRank); + onStatusDragEnd?.(activeStatusId, newRank); + }; + + const onStatusDragEnd = (statusId: number, lexorank: string) => { + updateStatus.mutate({ + path: { + statusId, + }, + body: { + status: { + lexorank, + }, + }, + }); }; const handleDealDragEnd = (activeId: number | string, over: Over) => { @@ -189,7 +194,25 @@ const useDealsAndStatusesDnd = (props: Props) => { ); if (!overStatusId) return; - props.onDealDragEnd(activeDealId, overStatusId, newLexorank); + onDealDragEnd(activeDealId, overStatusId, newLexorank); + }; + + const onDealDragEnd = ( + dealId: number, + statusId: number, + lexorank?: string + ) => { + updateDeal.mutate({ + path: { + dealId, + }, + body: { + deal: { + statusId, + lexorank, + }, + }, + }); }; const handleDragStart = ({ active }: DragStartEvent) => { diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx index a6f4a3b..6af09ce 100644 --- a/src/app/deals/page.tsx +++ b/src/app/deals/page.tsx @@ -1,7 +1,7 @@ import { Divider } from "@mantine/core"; import Boards from "@/app/deals/components/Boards/Boards"; +import Funnel from "@/app/deals/components/Funnel/Funnel"; 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"; @@ -18,7 +18,7 @@ export default function DealsPage() { - + diff --git a/src/components/dnd/FunnelDnd/FunnelColumn.tsx b/src/components/dnd/FunnelDnd/FunnelColumn.tsx new file mode 100644 index 0000000..53e6052 --- /dev/null +++ b/src/components/dnd/FunnelDnd/FunnelColumn.tsx @@ -0,0 +1,42 @@ +import React, { ReactNode } from "react"; +import { useDroppable } from "@dnd-kit/core"; +import { + SortableContext, + verticalListSortingStrategy, +} from "@dnd-kit/sortable"; +import { Stack } from "@mantine/core"; +import { BaseDraggable } from "@/components/dnd/types/types"; + +type Props = { + id: string; + items: TItem[]; + renderItem: (item: TItem) => ReactNode; + children?: ReactNode; +}; + +const FunnelColumn = ({ + id, + items, + renderItem, + children, +}: Props) => { + const { setNodeRef } = useDroppable({ id }); + + return ( + <> + {children} + + + {items.map(renderItem)} + + + + ); +}; + +export default FunnelColumn; diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx new file mode 100644 index 0000000..bdd5683 --- /dev/null +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -0,0 +1,126 @@ +"use client"; + +import React, { ReactNode } from "react"; +import { + closestCorners, + DndContext, + DragEndEvent, + DragOverEvent, + DragStartEvent, +} from "@dnd-kit/core"; +import { + horizontalListSortingStrategy, + SortableContext, +} from "@dnd-kit/sortable"; +import { Group, ScrollArea } from "@mantine/core"; +import useDndSensors from "@/app/deals/hooks/useSensors"; +import SortableItem from "@/components/dnd/SortableItem"; +import { BaseDraggable } from "@/components/dnd/types/types"; +import FunnelColumn from "./FunnelColumn"; +import FunnelOverlay from "./FunnelOverlay"; + +type Props = { + containers: TContainer[]; + items: TItem[]; + onDragStart: (event: DragStartEvent) => void; + onDragOver: (event: DragOverEvent) => void; + onDragEnd: (event: DragEndEvent) => void; + renderContainer: (container: TContainer, children: ReactNode) => ReactNode; + renderContainerOverlay: ( + container: TContainer, + children: ReactNode + ) => ReactNode; + renderItem: (item: TItem) => ReactNode; + renderItemOverlay: (item: TItem) => ReactNode; + getContainerId: (container: TContainer) => string; + getItemsByContainer: (container: TContainer, items: TItem[]) => TItem[]; + activeContainer: TContainer | null; + activeItem: TItem | null; +}; + +const FunnelDnd = < + TContainer extends BaseDraggable, + TItem extends BaseDraggable, +>({ + containers, + items, + onDragStart, + onDragOver, + onDragEnd, + renderContainer, + renderContainerOverlay, + renderItem, + renderItemOverlay, + getContainerId, + getItemsByContainer, + activeContainer, + activeItem, +}: Props) => { + const sensors = useDndSensors(); + + return ( + + + + + {containers.map(container => { + const containerItems = getItemsByContainer( + container, + items + ); + const containerId = getContainerId(container); + return ( + + {renderContainer( + container, + + )} + + ); + })} + { + const containerItems = getItemsByContainer( + container, + items + ); + const containerId = getContainerId(container); + return renderContainerOverlay( + container, + + ); + }} + renderItem={renderItemOverlay} + /> + + + + + ); +}; + +export default FunnelDnd; diff --git a/src/components/dnd/FunnelDnd/FunnelOverlay.tsx b/src/components/dnd/FunnelDnd/FunnelOverlay.tsx new file mode 100644 index 0000000..5290b4e --- /dev/null +++ b/src/components/dnd/FunnelDnd/FunnelOverlay.tsx @@ -0,0 +1,30 @@ +import React, { ReactNode } from "react"; +import { defaultDropAnimation, DragOverlay } from "@dnd-kit/core"; + +type Props = { + activeContainer: TContainer | null; + activeItem: TItem | null; + renderContainer: (container: TContainer) => ReactNode; + renderItem: (item: TItem) => ReactNode; +}; + +const FunnelOverlay = ({ + activeContainer, + activeItem, + renderContainer, + renderItem, +}: Props) => { + return ( + +
+ {activeItem + ? renderItem(activeItem) + : activeContainer + ? renderContainer(activeContainer) + : null} +
+ + ); +}; + +export default FunnelOverlay; diff --git a/src/components/dnd/FunnelDnd/index.ts b/src/components/dnd/FunnelDnd/index.ts new file mode 100644 index 0000000..7ce9f44 --- /dev/null +++ b/src/components/dnd/FunnelDnd/index.ts @@ -0,0 +1,3 @@ +import FunnelDnd from "./FunnelDnd"; + +export default FunnelDnd; diff --git a/src/components/dnd/SortableDnd/SortableDnd.tsx b/src/components/dnd/SortableDnd/SortableDnd.tsx index 56b73af..b5016be 100644 --- a/src/components/dnd/SortableDnd/SortableDnd.tsx +++ b/src/components/dnd/SortableDnd/SortableDnd.tsx @@ -12,8 +12,8 @@ import { SortableContext } from "@dnd-kit/sortable"; import { LexoRank } from "lexorank"; import { Box, Group } from "@mantine/core"; import useDndSensors from "@/app/deals/hooks/useSensors"; -import { SortableItem } from "@/components/dnd/SortableDnd/SortableItem"; import { SortableOverlay } from "@/components/dnd/SortableDnd/SortableOverlay"; +import SortableItem from "@/components/dnd/SortableItem"; import { getNewLexorank, sortByLexorank } from "@/utils/lexorank"; type BaseItem = { @@ -119,9 +119,7 @@ const SortableDnd = ({ -
- {activeItem ? renderItem(activeItem) : null} -
+ {activeItem ? renderItem(activeItem) : null} ); diff --git a/src/components/dnd/SortableDnd/SortableOverlay.tsx b/src/components/dnd/SortableDnd/SortableOverlay.tsx index 1021528..90baa10 100644 --- a/src/components/dnd/SortableDnd/SortableOverlay.tsx +++ b/src/components/dnd/SortableDnd/SortableOverlay.tsx @@ -18,7 +18,7 @@ const dropAnimationConfig: DropAnimation = { export function SortableOverlay({ children }: PropsWithChildren) { return ( - {children} +
{children}
 ); } diff --git a/src/components/dnd/SortableDnd/DragHandle.tsx b/src/components/dnd/SortableItem/DragHandle.tsx similarity index 87% rename from src/components/dnd/SortableDnd/DragHandle.tsx rename to src/components/dnd/SortableItem/DragHandle.tsx index 6d2c0d7..dd103a0 100644 --- a/src/components/dnd/SortableDnd/DragHandle.tsx +++ b/src/components/dnd/SortableItem/DragHandle.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties, ReactNode, useContext } from "react"; -import SortableItemContext from "@/components/dnd/SortableDnd/SortableItemContext"; +import SortableItemContext from "@/components/dnd/SortableItem/SortableItemContext"; type Props = { children: ReactNode; diff --git a/src/components/dnd/SortableDnd/SortableItem.tsx b/src/components/dnd/SortableItem/SortableItem.tsx similarity index 93% rename from src/components/dnd/SortableDnd/SortableItem.tsx rename to src/components/dnd/SortableItem/SortableItem.tsx index 11dc0e5..aa64746 100644 --- a/src/components/dnd/SortableDnd/SortableItem.tsx +++ b/src/components/dnd/SortableItem/SortableItem.tsx @@ -1,7 +1,7 @@ import React, { CSSProperties, PropsWithChildren, useMemo } from "react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; -import DragHandle from "@/components/dnd/SortableDnd/DragHandle"; +import DragHandle from "./DragHandle"; import SortableItemContext from "./SortableItemContext"; type Props = { @@ -10,7 +10,7 @@ type Props = { dragHandleStyle?: CSSProperties; }; -export const SortableItem = ({ +const SortableItem = ({ children, itemStyle, id, @@ -52,3 +52,5 @@ export const SortableItem = ({ ); }; + +export default SortableItem; diff --git a/src/components/dnd/SortableDnd/SortableItemContext.tsx b/src/components/dnd/SortableItem/SortableItemContext.tsx similarity index 100% rename from src/components/dnd/SortableDnd/SortableItemContext.tsx rename to src/components/dnd/SortableItem/SortableItemContext.tsx diff --git a/src/components/dnd/SortableItem/index.ts b/src/components/dnd/SortableItem/index.ts new file mode 100644 index 0000000..6d4c298 --- /dev/null +++ b/src/components/dnd/SortableItem/index.ts @@ -0,0 +1,3 @@ +import SortableItem from "./SortableItem"; + +export default SortableItem; diff --git a/src/components/dnd/types/types.ts b/src/components/dnd/types/types.ts new file mode 100644 index 0000000..9122003 --- /dev/null +++ b/src/components/dnd/types/types.ts @@ -0,0 +1,3 @@ +export type BaseDraggable = { + id: number; +}; diff --git a/src/hey-api-config.ts b/src/hey-api-config.ts index fb4eacc..bcd9242 100644 --- a/src/hey-api-config.ts +++ b/src/hey-api-config.ts @@ -2,5 +2,5 @@ import type { CreateClientConfig } from "@/lib/client/client.gen"; export const createClientConfig: CreateClientConfig = config => ({ ...config, - baseUrl: process.env.NEXT_PUBLIC_API_URL, + baseURL: process.env.NEXT_PUBLIC_API_URL, });