guesstimate/client/src/routes/project/index.tsx

import React, { FunctionComponent, useEffect } from "react";
import style from "./style.module.css";
import { newProject, Project } from "../../models/project";
import { useProjectReducer, updateProjectLabel, patchProject } from "../../hooks/use-project-reducer";
import { getProjectStorageKey } from "../../util/storage";
import { useLocalStorage } from "../../hooks/use-local-storage";
import EditableText from "../../components/editable-text";
import Tabs from "../../components/tabs";
import EstimationTab from "./estimation-tab";
import ParamsTab from "./params-tab";
import ExportTab from "./export-tab";
import { useServerSync } from "../../hooks/use-server-sync";
import { RouteChildrenProps, RouteProps, useParams } from "react-router";

export interface ProjectProps {
  projectId: string
}

const Project: FunctionComponent<ProjectProps> = () => {
  const { projectId } = useParams();
  const projectStorageKey = getProjectStorageKey(projectId);
  const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
  const [ project, dispatch ] = useProjectReducer(storedProject);
  
  useServerSync(project, (project: Project) => {
    dispatch(patchProject(project));
  });
  
  const onProjectLabelChange = (projectLabel: string) => {
    dispatch(updateProjectLabel(projectLabel));
  };
  
  // Save project in local storage on change
  useEffect(()=> {
    storeProject(project);
  }, [project]);
  
  return (
    <div className={`container ${style.estimation}`}>
      <EditableText
        editIconClass="is-size-4"
        render={(value) => (<h2 className="is-size-3">{value}</h2>)}
        onChange={onProjectLabelChange}
        value={project.label ? project.label : "Projet sans nom"} 
      />
      <div className={style.tabContainer}>
        <Tabs items={[
          {
            label: 'Estimation',
            icon: '📋',
            render: () => <EstimationTab project={project} dispatch={dispatch} />
          },
          {
            label: 'Options avancées',
            icon: '⚙️',
            render: () => <ParamsTab project={project} dispatch={dispatch} />
          },
          {
            label: 'Exporter',
            icon: '↗️',
            render: () => <ExportTab project={project} />
          }
        ]} />
      </div>
    </div>
  );
};
  
export default Project;