add drag and drop

src/BoardContext.tsx

@@ -13,6 +13,7 @@ type TBoardContext = {
   boards: string[];
   addBoard: (board: string) => void;
   removeBoard: (board: string) => void;
+  reorderBoard: (from: string, to: string) => void;
 };
 
 type TBoardContextProviderProps = {
@@ -44,6 +45,21 @@ export function BoardContextProvider(props: TBoardContextProviderProps) {
     []
   );
 
+  const reorderBoard = useCallback(
+    (from: string, to: string) =>
+      setBoards((prevBoards) => {
+        const boards = [...prevBoards];
+        const fromIndex = boards.indexOf(from);
+        const toIndex = boards.indexOf(to);
+
+        boards.splice(fromIndex, 1);
+        boards.splice(toIndex, 0, from);
+
+        return boards;
+      }),
+    []
+  );
+
   useEffect(() => {
     localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(boards));
   }, [boards]);
@@ -54,6 +70,7 @@ export function BoardContextProvider(props: TBoardContextProviderProps) {
         boards,
         addBoard,
         removeBoard,
+        reorderBoard,
       }}
     >
       {props.children}

src/LanesContainer.tsx

@@ -2,6 +2,7 @@ import { ADD_BOARD_DIALOG_HEIGHT } from "./AddBoardDialog";
 import { useBoardContent } from "./useBoardContent";
 import { useBoardContext } from "./BoardContext";
 import { formatDate } from "./formatDate";
+import { DragEvent } from "react";
 
 export function LanesContainer() {
   const { boardContext } = useBoardContext();
@@ -30,6 +31,25 @@ function Lane(props: TLaneProps) {
   const { boardContext } = useBoardContext();
   const { boardContent, isLoading, loadMore } = useBoardContent(props.board);
 
+  function onDragStart(event: DragEvent<HTMLDivElement>) {
+    event.dataTransfer.setData("text/plain", props.board);
+  }
+
+  function onDragEnter(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+  }
+
+  function onDragOver(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+  }
+
+  function onDrop(event: DragEvent<HTMLDivElement>) {
+    const board = event.dataTransfer.getData("text/plain");
+    if (board !== props.board) {
+      boardContext.reorderBoard(board, props.board);
+    }
+  }
+
   return (
     <div
       className="Lane"
@@ -40,6 +60,11 @@ function Lane(props: TLaneProps) {
         borderRight: "1px solid var(--neutral-60)",
         overflowY: "scroll",
       }}
+      draggable
+      onDragStart={onDragStart}
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
     >
       <div
         style={{
@@ -63,7 +88,7 @@ function Lane(props: TLaneProps) {
         </button>
       </div>
 
-      <div>
+      <div style={{ backgroundColor: "var(--neutral-90)" }}>
         {boardContent.length > 0
           ? boardContent.map((item) => (
               <div key={item.name}>