Bac à sable : les deux champs de réglage enregistraient à chaque frappe

import { useCallback, useEffect, useState, type FormEvent } from 'react';

import { useCallback, useEffect, useState, type FormEvent, type KeyboardEvent } from 'react';

import type {

  AnnouncementLevel,

  ApiAnnouncementState,

  const [error, setError] = useState<string | null>(null);

  const [notice, setNotice] = useState<string | null>(null);

  /**

   * Brouillons de saisie des deux champs numeriques.

   *

   * Ils existent parce que ces champs enregistraient A CHAQUE FRAPPE. Remplacer

   * 60 par 120 commencait par envoyer « 1 », que l'API refuse — la borne basse

   * est de 5 — et la reponse en erreur remettait aussitot l'ancienne valeur dans

   * le champ. Il devenait impossible de saisir un nombre dont un prefixe est

   * hors bornes, c'est-a-dire presque tous. Un nombre ne veut rien dire tant

   * qu'il n'est pas fini de taper : on n'enregistre donc qu'a la sortie du champ.

   */

  const [ttlDraft, setTtlDraft] = useState('');

  const [maxDraft, setMaxDraft] = useState('');

  const reload = useCallback(async () => {

    try {

      setSettings(await api.sandboxSettings());

    void reload();

  }, [reload]);

  async function apply(patch: Parameters<typeof api.updateSandboxSettings>[0]): Promise<void> {

  // Les brouillons suivent le serveur : au chargement, et apres chaque

  // enregistrement reussi. C'est ce qui fait qu'une saisie refusee revient a la

  // valeur reellement en vigueur plutot que de rester affichee comme un fait.

  useEffect(() => {

    if (!settings) return;

    setTtlDraft(String(settings.ttlMinutes ?? settings.defaults.ttlMinutes));

    setMaxDraft(String(settings.maxActive ?? settings.defaults.maxActive));

  }, [settings]);

  async function apply(

    patch: Parameters<typeof api.updateSandboxSettings>[0],

    message: string,

  ): Promise<void> {

    setBusy(true);

    setError(null);

    setNotice(null);

    try {

      const next = await api.updateSandboxSettings(patch);

      setSettings(next);

      setNotice(next.enabled ? t('Bac à sable ouvert.') : t('Bac à sable fermé.'));

      setNotice(message);

    } catch (err) {

      setError(err instanceof ApiError ? err.message : t('Enregistrement impossible'));

    } finally {

    ) {

      return;

    }

    await apply({ enabled: open });

    await apply({ enabled: open }, open ? t('Bac à sable ouvert.') : t('Bac à sable fermé.'));

  }

  if (!settings) {

  const ttl = settings.ttlMinutes ?? settings.defaults.ttlMinutes;

  const max = settings.maxActive ?? settings.defaults.maxActive;

  /**

   * Enregistre un champ numerique quitte par l'exploitant.

   *

   * Un champ vide vaut « valeur par defaut », comme l'annonce le texte sous les

   * champs. Une valeur hors bornes est refusee ICI, sans aller-retour reseau :

   * le message dit la regle entiere, alors que l'erreur de l'API arrivait apres

   * coup sur une saisie encore inachevee.

   */

  async function commit(

    champ: 'ttlMinutes' | 'maxActive',

    brut: string,

    affiche: string,

    borneMin: number,

    borneMax: number,

    horsBornes: string,

    ok: string,

  ): Promise<void> {

    if (brut.trim() === affiche) return;

    const valeur = brut.trim() === '' ? null : Number(brut);

    if (valeur !== null && (!Number.isInteger(valeur) || valeur < borneMin || valeur > borneMax)) {

      setNotice(null);

      setError(horsBornes);

      return;

    }

    await apply({ [champ]: valeur }, ok);

  }

  /** Entree = « j'ai fini » : on quitte le champ, ce qui declenche la sauvegarde. */

  function validerAuClavier(e: KeyboardEvent<HTMLInputElement>): void {

    if (e.key === 'Enter') e.currentTarget.blur();

  }

  return (

    <section className="panel">

      <div className="panel-head">

            type="number"

            min={5}

            max={1440}

            value={ttl}

            value={ttlDraft}

            disabled={busy}

            onChange={(e) => void apply({ ttlMinutes: Number(e.target.value) || null })}

            onChange={(e) => setTtlDraft(e.target.value)}

            onKeyDown={validerAuClavier}

            onBlur={() =>

              void commit(

                'ttlMinutes',

                ttlDraft,

                String(ttl),

                5,

                1440,

                t('Durée de vie NON enregistrée : un nombre entier de 5 à 1440 minutes (24 h) est attendu.'),

                t('Durée de vie enregistrée.'),

              )

            }

          />

        </label>

        <label className="field">

            type="number"

            min={1}

            max={50}

            value={max}

            value={maxDraft}

            disabled={busy}

            onChange={(e) => void apply({ maxActive: Number(e.target.value) || null })}

            onChange={(e) => setMaxDraft(e.target.value)}

            onKeyDown={validerAuClavier}

            onBlur={() =>

              void commit(

                'maxActive',

                maxDraft,

                String(max),

                1,

                50,

                t('Plafond NON enregistré : un nombre entier de 1 à 50 est attendu.'),

                t('Plafond de sessions enregistré.'),

              )

            }

          />

        </label>

      </div>

        {t(

          'Bornes imposées : 5 min à 24 h, et 50 sessions au plus. Elles évitent qu’un réglage vide de son sens la purge ou le plafond.',

        )}{' '}

        {t('La valeur est enregistrée quand vous quittez le champ.')}{' '}

        {settings.ttlMinutes === null || settings.maxActive === null

          ? t('Une valeur non renseignée applique le défaut.')

          : ''}

  'Bornes imposées : 5 min à 24 h, et 50 sessions au plus. Elles évitent qu’un réglage vide de son sens la purge ou le plafond.':

    'Enforced bounds: 5 min to 24 h, and 50 sessions at most. They keep a setting from emptying the purge or the cap of their meaning.',

  'Une valeur non renseignée applique le défaut.': 'An empty value applies the default.',

  'La valeur est enregistrée quand vous quittez le champ.':

    'The value is saved when you leave the field.',

  'Durée de vie NON enregistrée : un nombre entier de 5 à 1440 minutes (24 h) est attendu.':

    'Session lifetime NOT saved: a whole number from 5 to 1440 minutes (24 h) is expected.',

  'Durée de vie enregistrée.': 'Session lifetime saved.',

  'Plafond NON enregistré : un nombre entier de 1 à 50 est attendu.':

    'Cap NOT saved: a whole number from 1 to 50 is expected.',

  'Plafond de sessions enregistré.': 'Session cap saved.',

  // Déroulé sans animateur

  'Exercice autonome': 'Unattended exercise',