guesstimate/src/routes/project/index.tsx

import { FunctionalComponent, h } from "preact";
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 { 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";

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

    const onTaskRemove = (taskId: TaskID) => {
        dispatch(removeTask(taskId));
    }

    const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
        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">
                        <a>
                            <span class="icon is-small">📋</span>
                            Estimation
                        </a>
                    </li>
                    {/* <li>
                        <a disabled>
                            <span class="icon is-small">⚙️</span>
                            Paramètres
                        </a>
                    </li> */}
                </ul>
            </div>
            <div class="columns">
                <div class="column is-9">
                    <TaskTable 
                        project={project} 
                        onTaskAdd={onTaskAdd}
                        onTaskRemove={onTaskRemove}
                        onEstimationChange={onEstimationChange} />    
                </div>
                <div class="column is-3">
                    <TimePreview project={project} />
                    <FinancialPreview project={project} />
                </div>
            </div>
        </div>
    );
};

export default Project;