💩 shit: Made the tasks consistent disabling SSR, can't figure out how…

… to useLocalStorage with a useReducer without overriding the local, however this should be erased when the login + database is implemented.

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 },

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;
   });
 

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>
   );
 }