✨ feat: Added task persistency using localstorage and custom hook with reducer.

Author: bytevictor

app/Components/TasksApp/TaskApp.tsx

@@ -3,9 +3,11 @@
 import { useEffect, useReducer } from "react";
 import AddTask from "./AddTask";
 import TaskList from "./TaskList";
+import useLocalStorageReducer from "@/app/_lib/customHooks/useLocalStorageWithReducer";
 
 export default function TaskApp() {
-  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
+  //const [tasks, setTasks] = useLocalStorage("tasks", []);
+  const [tasks, dispatch] = useLocalStorageReducer(tasksReducer, "tasks", initialTasks);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -56,10 +58,10 @@ export default function TaskApp() {
   );
 }
 
-function tasksReducer(tasks: any, action: any) {
+function tasksReducer(tasks: Array<any>, action: any) {
   switch (action.type) {
     case "added": {
-      return [
+      const newTasks = [
         ...tasks,
         {
           id: action.id,
@@ -68,11 +70,13 @@ function tasksReducer(tasks: any, action: any) {
           isNew: action.isNew,
         },
       ];
+      //setSavedTasks(newTasks);
+      return newTasks;
     }
     case "changed": {
       return tasks.map((t: any) => {
         if (t.id === action.task.id) {
-          return action.task;
+          return {...action.task, isNew: false};
         } else {
           return t;
         }

app/Components/TasksApp/TaskList.tsx

@@ -53,8 +53,6 @@ function Task({
     audio.play();
   };
 
-  console.log("Task", task);
-
   const [isEditing, setIsEditing] = useState(task.isNew);
   let taskContent;
   if (isEditing) {

app/_lib/customHooks/useLocalStorageWithReducer.tsx

@@ -0,0 +1,18 @@
+import { Reducer, ReducerWithoutAction, useEffect, useReducer } from "react";
+
+export default function useLocalStorageReducer(
+  reducer: Reducer<any, any>,
+  key: string,
+  initialState: Array<any>
+) {
+  const [state, dispatch] = useReducer(reducer, initialState, () => {
+    const persisted = localStorage.getItem(key);
+    return persisted ? JSON.parse(persisted) : initialState;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+  }, [key, state]);
+
+  return [state, dispatch];
+}