diff --git a/app/Components/TasksApp/TaskApp.tsx b/app/Components/TasksApp/TaskApp.tsx
index 42e022f..724070e 100644
--- a/app/Components/TasksApp/TaskApp.tsx
+++ b/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 (
<>
@@ -67,15 +76,14 @@ function tasksReducer(tasks: Array, 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,6 +98,9 @@ function tasksReducer(tasks: Array, 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);
}
@@ -97,7 +108,12 @@ function tasksReducer(tasks: Array, action: any) {
}
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,
+ },
];
diff --git a/app/Components/TasksApp/TaskList.tsx b/app/Components/TasksApp/TaskList.tsx
index 903d04e..64d5f8b 100644
--- a/app/Components/TasksApp/TaskList.tsx
+++ b/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(null);
+
+ const dragTask = useRef(0);
+ const draggedOverTaskIndex = useRef(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 (
- {[...tasks].reverse().map((task: any) => (
- -
+ {tasks.map((task: any, index: number) => (
+
- (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
+ >
))}
@@ -98,8 +138,10 @@ function Task({
);
}
return (
-