guesstimate/client/src/routes/project/estimation-tab.tsx

import React, { FunctionComponent, Fragment } from "react";
import { Project } from "../../models/project";
import TaskTable from "./tasks-table";
import TimePreview from "./time-preview";
import FinancialPreview from "./financial-preview";
import { addTask, updateTaskEstimation, removeTask, updateTaskLabel, ProjectReducerActions } from "../../hooks/use-project-reducer";
import { Task, TaskID, EstimationConfidence } from "../../models/task";
import RepartitionPreview from "./repartition-preview";
import { getHideFinancialPreviewOnPrint } from "../../models/params";

export interface EstimationTabProps {
    project: Project
    dispatch: (action: ProjectReducerActions) => void
}

const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatch }) => {
    const onTaskAdd = (task: Task) => {
        dispatch(addTask(task));
    };

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

    const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
        dispatch(updateTaskLabel(taskId, label));
    }

    const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
        dispatch(updateTaskEstimation(taskId, confidence, value));
    };

    return (
      <Fragment>
        <div className="columns">
          <div className="column is-9">
            <TaskTable 
              project={project} 
              onTaskAdd={onTaskAdd}
              onTaskRemove={onTaskRemove}
              onTaskLabelUpdate={onTaskLabelUpdate}
              onEstimationChange={onEstimationChange} />
          </div>
          <div className="column is-3">
            <TimePreview project={project} />
            <RepartitionPreview project={project} />
          </div>
        </div>
        <div className="columns">
          <div className={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
            <FinancialPreview project={project} />
          </div>
        </div>
        {
          Object.keys(project.tasks).length <= 20 ?
          <div className="message noPrint">
            <div className="message-body">
              <p><strong>⚠️ Attention</strong></p>
              <p>Votre projet ne contient pas assez de tâches pour que les niveaux de confiance soient fiables. Un minimum de 20 tâches est conseillé pour obtenir une estimation pertinente.</p>
            </div>
          </div> :
          null
        }
        <hr />
      </Fragment>
    );
};

export default EstimationTab;