From 2e65bcbb5bc2b7e6434f90915f968a4f20dacfea Mon Sep 17 00:00:00 2001
From: bytevictor <victorgonzarg@gmail.com>
Date: Thu, 28 Mar 2024 23:07:56 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20shit:=20Made=20the=20tasks=20con?=
 =?UTF-8?q?sistent=20disabling=20SSR,=20can't=20figure=20out=20how=20to=20?=
 =?UTF-8?q?useLocalStorage=20with=20a=20useReducer=20without=20overriding?=
 =?UTF-8?q?=20the=20local,=20however=20this=20should=20be=20erased=20when?=
 =?UTF-8?q?=20the=20login=20+=20database=20is=20implemented.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Components/TasksApp/TaskApp.tsx               | 12 ++++++++----
 .../customHooks/useLocalStorageWithReducer.tsx    |  6 +++++-
 app/page.tsx                                      | 15 +++++++++++----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/Components/TasksApp/TaskApp.tsx b/app/Components/TasksApp/TaskApp.tsx
index ea7d69f..399894f 100644
--- a/app/Components/TasksApp/TaskApp.tsx
+++ b/app/Components/TasksApp/TaskApp.tsx
@@ -4,10 +4,15 @@ import { useEffect, useReducer } from "react";
 import AddTask from "./AddTask";
 import TaskList from "./TaskList";
 import useLocalStorageReducer from "@/app/_lib/customHooks/useLocalStorageWithReducer";
+import { v4 as uuid } from "uuid";
 
 export default function TaskApp() {
   //const [tasks, setTasks] = useLocalStorage("tasks", []);
-  const [tasks, dispatch] = useLocalStorageReducer(tasksReducer, "tasks", initialTasks);
+  const [tasks, dispatch] = useLocalStorageReducer(
+    tasksReducer,
+    "tasks",
+    initialTasks
+  );
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -26,7 +31,7 @@ export default function TaskApp() {
   function handleAddTask(text: any) {
     dispatch({
       type: "added",
-      id: nextId++,
+      id: uuid(),
       text: text,
       isNew: true,
     });
@@ -76,7 +81,7 @@ function tasksReducer(tasks: Array<any>, action: any) {
     case "changed": {
       return tasks.map((t: any) => {
         if (t.id === action.task.id) {
-          return {...action.task, isNew: false};
+          return { ...action.task, isNew: false };
         } else {
           return t;
         }
@@ -91,7 +96,6 @@ function tasksReducer(tasks: Array<any>, action: any) {
   }
 }
 
-let nextId = 3;
 const initialTasks = [
   { id: 0, text: "Philosopher’s Path", done: true, isNew: false },
   { id: 1, text: "Visit the temple", done: false, isNew: false },
diff --git a/app/_lib/customHooks/useLocalStorageWithReducer.tsx b/app/_lib/customHooks/useLocalStorageWithReducer.tsx
index 67b7f9a..0b71b16 100644
--- a/app/_lib/customHooks/useLocalStorageWithReducer.tsx
+++ b/app/_lib/customHooks/useLocalStorageWithReducer.tsx
@@ -1,12 +1,16 @@
 import { Reducer, ReducerWithoutAction, useEffect, useReducer } from "react";
+import useLocalStorage from "./useLocalStorageV2";
 
 export default function useLocalStorageReducer(
   reducer: Reducer<any, any>,
   key: string,
   initialState: Array<any>
 ) {
+  const [savedState, setSavedState] = useLocalStorage(key, initialState);
+
   const [state, dispatch] = useReducer(reducer, initialState, () => {
-    const persisted = localStorage.getItem(key);
+    const persisted = localStorage?.getItem(key);
+
     return persisted ? JSON.parse(persisted) : initialState;
   });
 
diff --git a/app/page.tsx b/app/page.tsx
index 6c91fec..3d976ef 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,18 @@
-import Image from "next/image";
-import { SoundButton } from "./Components/TasksApp/SoundButtonTest";
-import TaskApp from "./Components/TasksApp/TaskApp";
+import dynamic from "next/dynamic";
+
+
+//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/TaskApp"), {
+  ssr: false,
+});
+
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center lg:pt-0 lg:p-24 md:p-0 pt-0">
-      <TaskApp />
+        <TaskAppNoSSR />
     </main>
   );
 }