diff --git a/app/Components/TasksApp/TaskList.tsx b/app/Components/TasksApp/TaskList.tsx
index ad406f1..386965a 100644
--- a/app/Components/TasksApp/TaskList.tsx
+++ b/app/Components/TasksApp/TaskList.tsx
@@ -49,6 +49,8 @@ export default function TaskList({
setTasks(methodsClone);
}
+ console.log(tasks)
+
return (
);
}
+
+
+function isCurrentSecond(date: Date): boolean {
+ const currentDate = new Date();
+ return (
+ date.getFullYear() === currentDate.getFullYear() &&
+ date.getMonth() === currentDate.getMonth() &&
+ date.getDate() === currentDate.getDate() &&
+ date.getHours() === currentDate.getHours() &&
+ date.getMinutes() === currentDate.getMinutes() &&
+ date.getSeconds() === currentDate.getSeconds()
+ );
+}
\ No newline at end of file
diff --git a/app/Components/TasksApp/TaskPage.tsx b/app/Components/TasksApp/TaskPage.tsx
index 7d9307d..6a32067 100644
--- a/app/Components/TasksApp/TaskPage.tsx
+++ b/app/Components/TasksApp/TaskPage.tsx
@@ -1,19 +1,18 @@
"use client";
-import useLocalStorageReducer from "@/app/_lib/customHooks/useLocalStorageWithReducer";
+import { Task } from "@/app/_lib/_Tasks/TaskTypes";
import { useEffect } from "react";
import { v4 as uuid } from "uuid";
import AddTask from "./AddTask";
import TaskList from "./TaskList";
-export default function TaskPage() {
- //const [tasks, setTasks] = useLocalStorage("tasks", []);
- const [tasks, dispatch] = useLocalStorageReducer(
- tasksReducer,
- "tasks",
- initialTasks
- );
-
+export default function TaskPage({
+ tabtasks,
+ updateTasks,
+}: {
+ tabtasks: Array;
+ updateTasks: (tasks: Task[]) => void;
+}) {
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Enter") {
@@ -29,93 +28,46 @@ export default function TaskPage() {
}, []);
function handleAddTask(text: any) {
- dispatch({
- type: "added",
- id: uuid(),
- text: text,
- isNew: true,
- });
+ updateTasks(
+ [
+ {
+ id: uuid(),
+ text: text,
+ done: false,
+ date: new Date(),
+ },
+ ...tabtasks
+ ]
+ );
}
function handleChangeTask(task: any) {
- dispatch({
- type: "changed",
- task: task,
- });
+ updateTasks(
+ tabtasks.map((t: any) => {
+ if (t.id === task.id) {
+ return { ...task, isNew: false };
+ } else {
+ return t;
+ }
+ })
+ );
}
function handleDeleteTask(taskId: any) {
- dispatch({
- type: "deleted",
- id: taskId,
- });
+ updateTasks(tabtasks.filter((t: any) => t.id !== taskId));
}
- //Mimics setState
- function handleStateTask(tasks: any) {
- dispatch({
- type: "state",
- tasks: tasks,
- });
- }
+ console.log(tabtasks)
return (
<>
>
);
}
-
-
-
-function tasksReducer(tasks: Array, action: any) {
- switch (action.type) {
- case "added": {
- const newTasks = [
- {
- id: action.id,
- text: action.text,
- done: false,
- isNew: action.isNew,
- },
- ...tasks,
- ];
- return newTasks;
- }
- case "changed": {
- return tasks.map((t: any) => {
- if (t.id === action.task.id) {
- return { ...action.task, isNew: false };
- } else {
- return t;
- }
- });
- }
- 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: 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/TasksTab.tsx b/app/Components/TasksApp/_TaskApp.tsx
similarity index 65%
rename from app/Components/TasksApp/TasksTab.tsx
rename to app/Components/TasksApp/_TaskApp.tsx
index 453b6ff..404f56e 100644
--- a/app/Components/TasksApp/TasksTab.tsx
+++ b/app/Components/TasksApp/_TaskApp.tsx
@@ -1,22 +1,30 @@
"use client";
-import useLocalStorage from "@/app/_lib/customHooks/useLocalStorageV2";
+import { Tab, Task } from "@/app/_lib/_Tasks/TaskTypes";
import { PlusIcon } from "@/app/_lib/icons/PlusIcon";
-import TaskPage from "./TaskPage";
-import { useEffect, useState } from "react";
import { useDragAndDrop } from "@formkit/drag-and-drop/react";
-import { animations } from "@formkit/drag-and-drop";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { useEffect, useState } from "react";
+import TaskPage from "./TaskPage";
-interface TabInfo {
- id: number;
- name: string;
- taskList: any;
-}
+const initialTasks: Task[] = [
+ { id: '2', text: "Drink matcha", done: false, date: new Date() },
+ { id: '1', text: "Call grandma", done: false, date: new Date() },
+ {
+ id: '0',
+ text: "Contemplate the inevitable increase of entropy in the universe",
+ done: true,
+ date: new Date(),
+ },
+];
-const initialTabs: Array = [{ id: 0, name: "To-Do", taskList: [] }];
+const initialTabs: Array = [{ id: 0, name: "To-Do", tasks: initialTasks }];
-export default function TasksTab() {
- const [tabs, setTabs] = useLocalStorage("tabs", initialTabs);
+const tabAtom = atomWithStorage("tabs", initialTabs);
+
+export default function TaskApp() {
+ const [tabs, setTabs] = useAtom(tabAtom);
const [activeTab, setActiveTab] = useState(tabs[0].name);
@@ -24,11 +32,25 @@ export default function TasksTab() {
const newTab = {
id: tabs.length,
name: `Tab ${tabs.length + 1}`,
- taskList: [],
+ tasks: [],
};
setTabs([...tabs, newTab]);
}
+ function updateTasks(tabName: string, tasks: Task[]) {
+ const newTabs = tabs.map((tab) => {
+ if (tab.name === tabName) {
+ return { ...tab, tasks: tasks };
+ }
+ return tab;
+ });
+
+ setTabs(newTabs);
+ }
+
+ const activeTabTasks =
+ tabs.find((tab) => tab.name === activeTab)?.tasks || [];
+
return (
<>
@@ -40,7 +62,10 @@ export default function TasksTab() {
updateTabs={setTabs}
/>
-
+ updateTasks(activeTab, tasks)}
+ />
>
@@ -54,13 +79,13 @@ function TabsSelector({
setActiveTab,
updateTabs,
}: {
- tabsState: Array;
+ tabsState: Array;
activeTab: string;
addNewTab: () => void;
setActiveTab: (tabName: string) => void;
- updateTabs: (tabs: Array) => void;
+ updateTabs: (tabs: Array) => void;
}) {
- const [parent, tabs, setTabs] = useDragAndDrop(
+ const [parent, tabs, setTabs] = useDragAndDrop(
tabsState,
{
//There is a bug with the animation because when the useEffect reAsigns the tabs the animation re-renders
diff --git a/app/_lib/_Tasks/TaskTypes.ts b/app/_lib/_Tasks/TaskTypes.ts
new file mode 100644
index 0000000..966ae86
--- /dev/null
+++ b/app/_lib/_Tasks/TaskTypes.ts
@@ -0,0 +1,12 @@
+export interface Tab {
+ id: number;
+ name: string;
+ tasks: Task[];
+}
+
+export interface Task {
+ id: string;
+ text: string;
+ done: boolean;
+ date: Date;
+}
diff --git a/app/page.tsx b/app/page.tsx
index b9d05f7..6d349db 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,7 +6,7 @@ import { NextAuthProvider } from "./_lib/auth/AuthProvider";
//Using this just to be able to use localStorage is probably against the Geneva convention
//but if I spend any more hours trying to figure out how to use localStorage
//in Next.js with a useReducer hook I will kill myself
-const TaskAppNoSSR = dynamic(() => import("./Components/TasksApp/TasksTab"), {
+const TaskAppNoSSR = dynamic(() => import("./Components/TasksApp/_TaskApp"), {
ssr: false,
});