Local storage basic persistence

src/routes/project/index.tsx

@@ -1,15 +1,23 @@
 import { FunctionalComponent, h } from "preact";
-import { useReducer } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 import * as style from "./style.css";
 import { newProject } from "../../models/project";
 import TaskTable from "./tasks-table";
 import TimePreview from "./time-preview";
 import FinancialPreview from "./financial-preview";
-import { projectReducer, addTask, updateTaskEstimation, removeTask } from "../../hooks/project-reducer";
+import { useProjectReducer, addTask, updateTaskEstimation, removeTask } from "../../hooks/use-project-reducer";
 import { Task, TaskID, EstimationConfidence } from "../../models/task";
+import { getProjectStorageKey } from "../../util/storage";
+import { useLocalStorage } from "../../hooks/use-local-storage";
 
-const Project: FunctionalComponent = () => {
-    const [project, dispatch] = useReducer(projectReducer, newProject());
+export interface ProjectProps {
+    projectId: string
+}
+
+const Project: FunctionalComponent<ProjectProps> = ({ projectId }) => {
+    const projectStorageKey = getProjectStorageKey(projectId);
+    const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
+    const [ project, dispatch ] = useProjectReducer(storedProject);
 
     const onTaskAdd = (task: Task) => {
         dispatch(addTask(task));
@@ -23,8 +31,18 @@ const Project: FunctionalComponent = () => {
         dispatch(updateTaskEstimation(taskId, confidence, value));
     };
 
+    // Save project in local storage on change
+    useEffect(()=> {
+        storeProject(project);
+    }, [project]);
+
     return (
         <div class={`container ${style.estimation}`}>
+            <h3 class="is-size-3">
+                {project.label ? project.label : "Projet sans nom"}
+                &nbsp;
+                <i class="icon is-size-4">🖋️</i>
+            </h3>
             <div class="tabs">
                 <ul>
                     <li class="is-active">