feat: boards with statuses fetch

src/components/SortableDnd/SortableDnd.tsx

@@ -7,34 +7,25 @@ import React, {
     useMemo,
     useState,
 } from "react";
-import {
-    Active,
-    DndContext,
-    DragEndEvent,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
-} from "@dnd-kit/core";
-import {
-    SortableContext,
-    sortableKeyboardCoordinates,
-} from "@dnd-kit/sortable";
+import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
 import { LexoRank } from "lexorank";
-import { Group } from "@mantine/core";
+import { Box, Group } from "@mantine/core";
+import useDndSensors from "@/app/deals/hooks/useSensors";
 import { SortableItem } from "@/components/SortableDnd/SortableItem";
 import { SortableOverlay } from "@/components/SortableDnd/SortableOverlay";
 import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
 
 type BaseItem = {
     id: number;
-    rank: string;
+    lexorank: string;
 };
 
 type Props<T extends BaseItem> = {
     initialItems: T[];
     renderItem: (item: T) => ReactNode;
     onDragEnd: (itemId: number, newLexorank: string) => void;
+    onItemClick: (item: T) => void;
     rowStyle?: CSSProperties;
     itemStyle?: CSSProperties;
 };
@@ -43,6 +34,7 @@ const SortableDnd = <T extends BaseItem>({
     initialItems,
     renderItem,
     onDragEnd,
+    onItemClick,
     rowStyle,
     itemStyle,
 }: Props<T>) => {
@@ -57,12 +49,7 @@ const SortableDnd = <T extends BaseItem>({
         setItems(sortByLexorank(initialItems));
     }, [initialItems]);
 
-    const sensors = useSensors(
-        useSensor(PointerSensor),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-        })
-    );
+    const sensors = useDndSensors();
 
     const onDragEndLocal = ({ active, over }: DragEndEvent) => {
         if (over && active.id !== over?.id && activeItem) {
@@ -81,10 +68,12 @@ const SortableDnd = <T extends BaseItem>({
             }
 
             const leftLexorank: LexoRank | null =
-                leftIndex >= 0 ? LexoRank.parse(items[leftIndex].rank) : null;
+                leftIndex >= 0
+                    ? LexoRank.parse(items[leftIndex].lexorank)
+                    : null;
             const rightLexorank: LexoRank | null =
                 rightIndex < items.length
-                    ? LexoRank.parse(items[rightIndex].rank)
+                    ? LexoRank.parse(items[rightIndex].lexorank)
                     : null;
 
             const newLexorank = getNewLexorank(
@@ -92,7 +81,7 @@ const SortableDnd = <T extends BaseItem>({
                 rightLexorank
             ).toString();
 
-            items[activeIndex].rank = newLexorank;
+            items[activeIndex].lexorank = newLexorank;
             onDragEnd(items[activeIndex].id, newLexorank);
             const sortedItems = sortByLexorank(items);
             setItems([...sortedItems]);
@@ -112,12 +101,19 @@ const SortableDnd = <T extends BaseItem>({
                     style={rowStyle}
                     role="application">
                     {items.map((item, index) => (
-                        <SortableItem
+                        <Box
                             key={index}
-                            itemStyle={itemStyle}
-                            id={item.id}>
-                            {renderItem(item)}
-                        </SortableItem>
+                            onClick={e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onItemClick(item);
+                            }}>
+                            <SortableItem
+                                itemStyle={itemStyle}
+                                id={item.id}>
+                                {renderItem(item)}
+                            </SortableItem>
+                        </Box>
                     ))}
                 </Group>
             </SortableContext>

src/components/SortableDnd/SortableItem.tsx

@@ -9,7 +9,11 @@ type Props = {
     itemStyle?: CSSProperties;
 };
 
-export const SortableItem = ({ children, id }: PropsWithChildren<Props>) => {
+export const SortableItem = ({
+    children,
+    itemStyle,
+    id,
+}: PropsWithChildren<Props>) => {
     const {
         attributes,
         isDragging,
@@ -33,6 +37,7 @@ export const SortableItem = ({ children, id }: PropsWithChildren<Props>) => {
         opacity: isDragging ? 0.4 : undefined,
         transform: CSS.Translate.toString(transform),
         transition,
+        ...itemStyle,
     };
 
     return (