daddy/client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

import React, { FunctionComponent, useState, ChangeEvent, useEffect } from 'react';
import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';

export interface ClarificationSectionProps extends DecisionSupportFileUpdaterProps {};

const ClarificationSectionName = 'clarification';

export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf, updateDSF }) => {
  const [ section, setSection ] = useState({
    objectives: '',
    motivations: '',
    scope: '',
    nature: '',
    deadline: undefined,
    hasDeadline: false,
  });

  useEffect(() => {
    updateDSF({ ...dsf, sections: { ...dsf.sections, [ClarificationSectionName]: { ...section }} })
  }, [section]);

  const onTitleChange = (evt: ChangeEvent<HTMLInputElement>) => {
    const title = (evt.currentTarget).value;
    updateDSF({ ...dsf, title });
  };

  const onSectionAttrChange = (attrName: string, evt: ChangeEvent<HTMLInputElement>) => {
    const target = evt.currentTarget;
    const value = target.hasOwnProperty('checked') ? target.checked : target.value;
    setSection(section => ({ ...section, [attrName]: value }));
  };

  const onDeadlineChange = (evt: ChangeEvent<HTMLInputElement>) => {
    const deadline = evt.currentTarget.valueAsDate;
    setSection(section => ({ ...section, deadline }));
  };

  return (
    <section>
      <div className="box">
        <div className="field">
          <label className="label">Intitulé du dossier</label>
          <div className="control">
            <input className="input" type="text" value={dsf.title} onChange={onTitleChange} />
          </div>
        </div>
        <div className="field">
          <label className="label">Quelle décision devons nous prendre ?</label>
          <div className="control">
            <textarea className="textarea"
              value={section.objectives}
              onChange={onSectionAttrChange.bind(null, 'objectives')}
              placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." 
              rows={10}>
            </textarea>
          </div>
          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
        </div>
        <div className="field">
          <label className="label">Pourquoi devons nous prendre cette décision ?</label>
          <div className="control">
            <textarea className="textarea"
              value={section.motivations}
              onChange={onSectionAttrChange.bind(null, 'motivations')}
              placeholder="Décrire pourquoi il est important de prendre cette décision." 
              rows={10}>
            </textarea>
          </div>
          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
        </div>
        <div className="field">
          <label className="label">Portée de la décision</label>
          <div className="control">
            <div className="select">
              <select 
                onChange={onSectionAttrChange.bind(null, 'scope')} 
                value={section.scope}>
                <option></option>
                <option value="individual">Individuelle</option>
                <option value="identified-group">Groupe identifié</option>
                <option value="collective">Collective</option>
              </select>
            </div>
          </div>
        </div>
        <div className="field">
          <label className="label">Nature de la décision</label>
          <div className="control">
            <div className="select">
              <select onChange={onSectionAttrChange.bind(null, 'nature')} 
                value={section.nature}>
                <option></option>
                <option value="operational">Opérationnelle</option>
                <option value="tactic">Tactique</option>
                <option value="strategic">Stratégique</option>
              </select>
            </div>
          </div>
        </div>
        
        <div className="columns">
          <div className="column">
            <label className="checkbox">
              <input type="checkbox"
                onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
                checked={section.hasDeadline} />
              <span className="ml-1">Existe t'il une échéance particulière pour cette décision ?</span>
            </label>
            <div className="field">
              <div className="control">
                <input disabled={!section.hasDeadline} 
                  value={section.deadline ? section.deadline.toISOString().substr(0, 10) : ''}
                  onChange={onDeadlineChange}
                  type="date" className="input" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};