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

import React, { FunctionComponent, Fragment, useState, ChangeEvent, MouseEvent } from "react";
import { Project } from "../../models/project";
import { ProjectReducerActions, updateParam } from "../../hooks/use-project-reducer";
import { getRoundUpEstimations, getCurrency, getTimeUnit, getHideFinancialPreviewOnPrint } from "../../models/params";
import TaskCategoriesTable from "./task-categories-table";
import { useHistory } from "react-router";
import { getProjectStorageKey } from "../../util/storage";

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

const ParamsTab: FunctionComponent<ParamsTabProps> = ({ project, dispatch }) => {
    const [ deleteButtonEnabled, setDeleteButtonEnabled ] = useState(false);
    const history = useHistory();

    const onEnableDeleteButtonChange = (evt: ChangeEvent) => {
      const checked = (evt.currentTarget as HTMLInputElement).checked;
      setDeleteButtonEnabled(checked);
    }

    const onRoundUpChange = (evt: ChangeEvent) => {
      const checked = (evt.currentTarget as HTMLInputElement).checked;
      dispatch(updateParam("roundUpEstimations", checked));
    };

    const onHideFinancialPreview = (evt: ChangeEvent) => {
      const checked = (evt.currentTarget as HTMLInputElement).checked;
      dispatch(updateParam("hideFinancialPreviewOnPrint", checked));
    };

    const onCurrencyChange = (evt: ChangeEvent) => {
      const value = (evt.currentTarget as HTMLInputElement).value;
      dispatch(updateParam("currency", value));
    };

    const timeUnit = getTimeUnit(project);

    const onTimeUnitLabelChange = (evt: ChangeEvent) => {
      const value = (evt.currentTarget as HTMLInputElement).value;
      dispatch(updateParam("timeUnit", { ...timeUnit, label: value }));
    };

    const onTimeUnitAcronymChange = (evt: ChangeEvent) => {
      const value = (evt.currentTarget as HTMLInputElement).value;
      dispatch(updateParam("timeUnit", { ...timeUnit, acronym: value }));
    };

    const onDeleteProjectClick = (evt: MouseEvent) => {
      const projectStorageKey = getProjectStorageKey(project.id);
      window.localStorage.removeItem(projectStorageKey);
      history.push('/');
    };

    return (
        <Fragment>
            <label className="label is-size-5">Impression</label>
            <div className="field">
              <input type="checkbox"
                id="hideFinancialPreview"
                name="hideFinancialPreview" 
                className="switch"
                onChange={onHideFinancialPreview}
                checked={getHideFinancialPreviewOnPrint(project)} />
              <label htmlFor="hideFinancialPreview">Cacher le prévisionnel financier lors de l'impression</label>
            </div>
            <hr />
            <div className="field">
                <label className="label is-size-5">Unité de temps</label>
                <div className="control">
                    <input className="input" type="text"
                        onChange={onTimeUnitLabelChange}
                        value={timeUnit.label} />
                </div>
                <label className="label is-size-6">Acronyme</label>
                <div className="control">
                    <input className="input" type="text"
                        onChange={onTimeUnitAcronymChange}
                        value={timeUnit.acronym} />
                </div>
            </div>
            <div className="field">
              <input type="checkbox"
                id="roundUpEstimations"
                name="roundUpEstimations" 
                className="switch"
                onChange={onRoundUpChange}
                checked={getRoundUpEstimations(project)} />
              <label htmlFor="roundUpEstimations">Arrondir les estimations de temps à l'entier supérieur</label>
            </div>
            <hr />
            <div className="field">
                <label className="label is-size-5">Devise</label>
                <div className="control">
                    <input className="input" type="text"
                        onChange={onCurrencyChange}
                        value={getCurrency(project)} />
                </div>
            </div>
            <hr />
            <TaskCategoriesTable project={project} dispatch={dispatch} />
            <hr />
            <div>
              <label className="label is-size-5">Supprimer le projet</label>
              <div className="field">
                <input type="checkbox"
                    id="enableDeleteButton"
                    name="enableDeleteButton" 
                    className="switch is-warning"
                    onChange={onEnableDeleteButtonChange}
                    checked={deleteButtonEnabled} />
                  <label htmlFor="enableDeleteButton">Supprimer ce projet ?</label>
              </div>
              <button className="button is-danger"
                onClick={onDeleteProjectClick}
                disabled={!deleteButtonEnabled}>
                🗑️ Supprimer
              </button>
            </div>
            <hr />
        </Fragment>
    );
};

export default ParamsTab;