70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
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;
|