Added LocalStorage support

Author: technoph1le

src/hooks/useTerminal.ts

@@ -1,12 +1,18 @@
 import { useReducer, useState } from "preact/compat";
 import taskReducer from "../reducers/taskReducer";
 import moment from "moment";
-import { HistoryType } from "../types";
+import { HistoryType, TaskType } from "../types";
 
 export const useTerminal = () => {
   const [command, setCommand] = useState<string>("");
   const [history, setHistory] = useState<HistoryType>([]);
-  const [tasks, dispatch] = useReducer(taskReducer, []);
+
+  const loadTasks = (): TaskType[] => {
+    const savedTasks = localStorage.getItem("tasks");
+    return savedTasks ? JSON.parse(savedTasks) : [];
+  };
+
+  const [tasks, dispatch] = useReducer(taskReducer, [], loadTasks);
 
   const executeCommand = (command: string) => {
     // "add" command
@@ -78,6 +84,7 @@ export const useTerminal = () => {
       }
 
       return `
+        Task ID: ${task.id}\n
         Task name: ${task.name}\n
         Task status: ${task.status}\n
         Date created: ${moment(task.createdAt).format("Do MMM, YYYY")}

src/reducers/taskReducer.ts

@@ -1,33 +1,50 @@
-import { ActionType, TasksType, TaskType } from "../types";
+import { ActionType, TaskType } from "../types";
 
-let taskIdCounter = 1;
+let retrievedId = localStorage.getItem("taskIdCounter");
+let taskIdCounter = retrievedId ? parseInt(retrievedId, 10) : 1;
+
+const taskReducer = (state: TaskType[], action: ActionType): TaskType[] => {
+  let updatedState = state;
 
-const taskReducer = (state: TasksType, action: ActionType): TasksType => {
   switch (action.type) {
     case "ADD_TASK":
       const newTask: TaskType = {
-        id: taskIdCounter++,
+        id: taskIdCounter,
         name: action.payload.name,
         status: "pending",
         createdAt: new Date(),
         completedAt: null,
       };
 
-      return [...state, newTask];
+      taskIdCounter++;
+      localStorage.setItem("taskIdCounter", JSON.stringify(taskIdCounter));
+
+      updatedState = [...state, newTask];
+      break;
 
     case "MARK_DONE":
-      return state.map((task) =>
+      updatedState = state.map((task) =>
         task.id === action.payload.id
           ? { ...task, status: "done", completedAt: new Date() }
           : task
       );
+      break;
 
     case "REMOVE_TASK":
-      return state.filter((task) => task.id !== action.payload.id);
+      updatedState = state.filter((task) => task.id !== action.payload.id);
+
+      if (updatedState.length === 0) {
+        taskIdCounter = 1;
+        localStorage.setItem("taskIdCounter", "1");
+      }
+      break;
 
     default:
       return state;
   }
+
+  localStorage.setItem("tasks", JSON.stringify(updatedState));
+  return updatedState;
 };
 
 export default taskReducer;