✨ feat: Added Drag&Drop functionality

app/Components/TasksApp/TaskApp.tsx

@@ -51,11 +51,20 @@ export default function TaskApp() {
     });
   }
 
+  //Mimics setState
+  function handleStateTask(tasks: any) {
+    dispatch({
+      type: "state",
+      tasks: tasks,
+    });
+  }
+
   return (
     <>
       <AddTask onAddTask={handleAddTask} />
       <TaskList
         tasks={tasks}
+        setTasks={handleStateTask}
         onChangeTask={handleChangeTask}
         onDeleteTask={handleDeleteTask}
       />
@@ -67,15 +76,14 @@ function tasksReducer(tasks: Array<any>, action: any) {
   switch (action.type) {
     case "added": {
       const newTasks = [
-        ...tasks,
         {
           id: action.id,
           text: action.text,
           done: false,
           isNew: action.isNew,
         },
+        ...tasks,
       ];
-      //setSavedTasks(newTasks);
       return newTasks;
     }
     case "changed": {
@@ -90,14 +98,22 @@ function tasksReducer(tasks: Array<any>, action: any) {
     case "deleted": {
       return tasks.filter((t: any) => t.id !== action.id);
     }
+    case "state": {
+      return [...action.tasks];
+    }
     default: {
       throw Error("Unknown action: " + action.type);
     }
   }
 }
 
 const initialTasks = [
-  { id: 0, text: "Contemplate the inevitable increase of entropy in the universe", done: true, isNew: false },
-  { id: 1, text: "Call grandma", done: false, isNew: false },
   { id: 2, text: "Drink matcha", done: false, isNew: false },
+  { id: 1, text: "Call grandma", done: false, isNew: false },
+  {
+    id: 0,
+    text: "Contemplate the inevitable increase of entropy in the universe",
+    done: true,
+    isNew: false,
+  },
 ];

app/Components/TasksApp/TaskList.tsx

@@ -1,22 +1,62 @@
 import DragIcon from "@/app/_lib/icons/DragIcon";
 import TrashIcon from "@/app/_lib/icons/TrashIcon";
-import { useState } from "react";
+import { animations } from "@formkit/drag-and-drop";
+import { dragAndDrop, useDragAndDrop } from "@formkit/drag-and-drop/react";
+import clsx from "clsx";
+import { useRef, useState } from "react";
 
 export default function TaskList({
   tasks,
+  setTasks,
   onChangeTask,
   onDeleteTask,
 }: {
   tasks: any;
+  setTasks: any;
   onChangeTask: any;
   onDeleteTask: any;
 }) {
+  const listRef = useRef(null);
+
+  const [draggedOverTask, setDraggedOverTask] = useState<number | null>(null);
+
+  const dragTask = useRef<number>(0);
+  const draggedOverTaskIndex = useRef<number>(0);
+
+  function handleDragEnter(index: number) {
+    draggedOverTaskIndex.current = index;
+    setDraggedOverTask(index);
+  }
+
+  function handleSort() {
+    setDraggedOverTask(null);
+    const methodsClone = [...tasks];
+    const temp = methodsClone[dragTask.current];
+    methodsClone[dragTask.current] = methodsClone[draggedOverTaskIndex.current];
+    methodsClone[draggedOverTaskIndex.current] = temp;
+    setTasks(methodsClone);
+  }
+
   return (
     <ul
+      ref={listRef}
       className="lg:w-3/4 w-full mt-24 flex justify-center flex-col"
     >
-      {[...tasks].reverse().map((task: any) => (
-        <li className="flex flex-row w-full p-2 hover:bg-base-200 rounded-md" key={task.id}>
+      {tasks.map((task: any, index: number) => (
+        <li
+          onDragStart={() => (dragTask.current = index)}
+          onDragEnter={() => handleDragEnter(index)}
+          onDragEnd={handleSort}
+          onDragOver={(e) => e.preventDefault()}
+          className={clsx(
+            "flex flex-row w-full p-2 hover:bg-base-200 rounded-md",
+            {
+              "border-dashed border border-primary": index == draggedOverTask,
+            }
+          )}
+          key={task.id}
+          draggable
+        >
           <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
         </li>
       ))}
@@ -98,8 +138,10 @@ function Task({
     );
   }
   return (
-    <label className="w-full grid grid-cols-6 grid-rows-1">
-      <DragIcon/>
+    <div className="w-full grid grid-cols-6 grid-rows-1">
+      <div className="drag-handle flex cursor-grab">
+        <DragIcon />
+      </div>
 
       <input
         className="checkbox self-center checkbox-lg ml-4 lg:ml-0"
@@ -128,6 +170,6 @@ function Task({
       >
         <TrashIcon />
       </button>
-    </label>
+    </div>
   );
 }