React à l'E6 : bonnes pratiques et exercices corrigés

mkdir api-demo && cd api-demo
npm init -y
npm pkg set type=module
npm install express
# copie le fichier ci-dessous dans api-demo.mjs, puis :
node api-demo.mjs

// api-demo.mjs : une API de démonstration d'AppliFrais, données en mémoire.
// Même contrat que l'API du cours Node.js. Lancement : node api-demo.mjs (Node.js 24, après npm install express)
import express from 'express';
import { randomBytes } from 'node:crypto';

const app = express();
app.use(express.json());

const DUREE_JETON = 15 * 60; // secondes, comme l'API du cours Node.js
const FORFAITS = { ETP: ['Forfait étape', 110], KM: ['Frais kilométriques', 0.62], NUI: ['Nuitée hôtel', 80], REP: ['Repas restaurant', 25] };
const TRANSITIONS = { CR: ['CL'], CL: ['VA'], VA: ['MP'], MP: [] };

const utilisateurs = [
  { id: 1, login: 'adurand', motDePasse: 'Comptable#2026', nom: 'Durand', prenom: 'Anne', role: 'comptable' },
  { id: 7, login: 'lmartin', motDePasse: 'Visiteur#2026', nom: 'Martin', prenom: 'Lucas', role: 'visiteur' },
  { id: 8, login: 'svincent', motDePasse: 'Visiteur#2026', nom: 'Vincent', prenom: 'Sarah', role: 'visiteur' },
];
const fiches = [
  { id: 11, visiteurId: 7, mois: '2026-09', etat: 'VA', montantValide: 389.2, dateModification: '2026-10-05 09:12:44', forfait: { ETP: 1, KM: 160, NUI: 1, REP: 3 } },
  { id: 12, visiteurId: 7, mois: '2026-10', etat: 'CR', montantValide: null, dateModification: '2026-11-02 14:10:38', forfait: { ETP: 3, KM: 420, NUI: 2, REP: 5 } },
  { id: 13, visiteurId: 8, mois: '2026-10', etat: 'CL', montantValide: null, dateModification: '2026-11-01 18:03:12', forfait: { ETP: 2, KM: 250, NUI: 1, REP: 4 } },
];
const frais = [
  { id: 57, ficheId: 11, date: '2026-09-17', libelle: 'Taxi gare – hôtel', montant: 25 },
  { id: 58, ficheId: 12, date: '2026-10-14', libelle: 'Repas client à Lyon', montant: 23.5 },
  { id: 59, ficheId: 13, date: '2026-10-09', libelle: 'Parking gare de Grenoble', montant: 12 },
];
const jetons = new Map(); // jeton -> { id de l'utilisateur, expiration en millisecondes }
let prochainId = 60;

// Les erreurs au format de la RFC 9457, comme celles de l'API du cours Node.js.
function probleme(req, res, status, code, title, detail, extra = {}) {
  res.status(status).type('application/problem+json')
    .json({ type: `https://api.gsb.example/problemes/${code}`, title, status, detail, instance: req.originalUrl, ...extra });
}
const invalide = (req, res, erreurs) =>
  probleme(req, res, 422, 'validation', 'Données invalides', 'Un ou plusieurs champs sont invalides.', { erreurs });
const refuse = (req, res) => probleme(req, res, 403, 'acces-refuse', 'Accès refusé', 'Ton rôle ne permet pas cette opération.');
const maintenant = () => new Date().toISOString().slice(0, 19).replace('T', ' ');
const centimes = (montant) => Math.round(montant * 100);

app.post('/v1/auth/connexion', (req, res) => {
  const { login, motDePasse } = req.body ?? {};
  if (typeof login !== 'string' || typeof motDePasse !== 'string') {
    return invalide(req, res, [{ champ: 'body', message: 'login et motDePasse sont obligatoires' }]);
  }
  const u = utilisateurs.find((x) => x.login === login.trim() && x.motDePasse === motDePasse);
  if (!u) return probleme(req, res, 401, 'identifiants-invalides', 'Identifiants invalides', 'Login ou mot de passe incorrect.');
  const accessToken = randomBytes(32).toString('base64url'); // jeton opaque : le front ne voit pas la différence avec un JWT
  jetons.set(accessToken, { id: u.id, expire: Date.now() + DUREE_JETON * 1000 });
  res.set('Cache-Control', 'no-store').json({ accessToken, tokenType: 'Bearer', expiresIn: DUREE_JETON });
});

// Tout ce qui suit exige l'en-tête « Authorization: Bearer <jeton> ».
app.use('/v1', (req, res, next) => {
  const [schema, jeton] = req.get('Authorization')?.split(' ') ?? [];
  if (schema !== 'Bearer' || !jeton) {
    res.set('WWW-Authenticate', 'Bearer realm="api"');
    return probleme(req, res, 401, 'non-authentifie', 'Authentification requise', 'Jeton absent.');
  }
  const session = jetons.get(jeton);
  if (!session || session.expire < Date.now()) {
    jetons.delete(jeton);
    res.set('WWW-Authenticate', 'Bearer realm="api", error="invalid_token"');
    return probleme(req, res, 401, 'jeton-invalide', 'Jeton invalide', 'Le jeton est invalide ou a expiré.');
  }
  req.utilisateur = utilisateurs.find((u) => u.id === session.id);
  next();
});

app.get('/v1/auth/moi', (req, res) => {
  const { id, login, nom, prenom, role } = req.utilisateur;
  res.json({ id, login, nom, prenom, role });
});

const resume = ({ id, visiteurId, mois, etat, montantValide, dateModification }) =>
  ({ id, visiteurId, mois, etat, montantValide, dateModification });

function detail(f) {
  const v = utilisateurs.find((u) => u.id === f.visiteurId);
  const lignesForfait = Object.entries(f.forfait).map(([code, quantite]) =>
    ({ code, libelle: FORFAITS[code][0], quantite, montantUnitaire: FORFAITS[code][1] }));
  const fraisHorsForfait = frais.filter((x) => x.ficheId === f.id)
    .map((x) => ({ id: x.id, date: x.date, libelle: x.libelle, montant: x.montant, justificatif: false }));
  const total = lignesForfait.reduce((s, l) => s + l.quantite * centimes(l.montantUnitaire), 0)
    + fraisHorsForfait.reduce((s, x) => s + centimes(x.montant), 0);
  const { visiteurId, forfait, ...fiche } = f;
  return { ...fiche, visiteur: { id: v.id, nom: v.nom, prenom: v.prenom }, lignesForfait, fraisHorsForfait, total: total / 100 };
}

// Un visiteur ne voit que ses fiches : celle d'un autre répond 404, comme si elle n'existait pas.
function ficheOu404(req, res) {
  const f = fiches.find((x) => x.id === Number(req.params.id));
  if (f && (req.utilisateur.role === 'comptable' || f.visiteurId === req.utilisateur.id)) return f;
  probleme(req, res, 404, 'fiche-introuvable', 'Fiche introuvable', `La fiche ${req.params.id} n'existe pas.`);
  return null;
}

// Les frais d'une fiche ne se modifient que tant qu'elle est en cours.
function enCours(req, res, f) {
  if (f.etat === 'CR') return true;
  probleme(req, res, 409, 'fiche-cloturee', 'Fiche non modifiable',
    `La fiche est à l'état ${f.etat} : seuls les frais d'une fiche en cours se modifient.`, { etatActuel: f.etat });
  return false;
}

app.get('/v1/fiches', (req, res) => {
  const { etat, visiteur } = req.query;
  const page = Number(req.query.page ?? 1);
  const limite = Number(req.query.limite ?? 20);
  const erreurs = [];
  if (etat !== undefined && !(etat in TRANSITIONS)) erreurs.push({ champ: 'etat', message: 'CR, CL, VA ou MP attendu' });
  if (!Number.isInteger(page) || page < 1) erreurs.push({ champ: 'page', message: 'Entier positif attendu' });
  if (!Number.isInteger(limite) || limite < 1 || limite > 100) erreurs.push({ champ: 'limite', message: 'Entier de 1 à 100 attendu' });
  if (erreurs.length > 0) return invalide(req, res, erreurs);
  // Un visiteur ne voit que ses fiches, quel que soit le filtre envoyé.
  const visiteurId = req.utilisateur.role === 'visiteur' ? req.utilisateur.id : Number(visiteur) || null;
  const liste = fiches
    .filter((f) => (!visiteurId || f.visiteurId === visiteurId) && (!etat || f.etat === etat))
    .toSorted((a, b) => b.mois.localeCompare(a.mois) || b.id - a.id);
  res.json({
    donnees: liste.slice((page - 1) * limite, page * limite).map(resume),
    pagination: { page, limite, total: liste.length, pages: Math.ceil(liste.length / limite) },
  });
});

app.get('/v1/fiches/:id', (req, res) => {
  const f = ficheOu404(req, res);
  if (f) res.json(detail(f));
});

// Clôture (CL) par le visiteur propriétaire, mise en paiement (MP) par un comptable.
app.patch('/v1/fiches/:id', (req, res) => {
  const etat = req.body?.etat;
  if (etat !== 'CL' && etat !== 'MP') return invalide(req, res, [{ champ: 'etat', message: 'CL ou MP attendu' }]);
  const f = ficheOu404(req, res);
  if (!f) return;
  const roleRequis = etat === 'CL' ? 'visiteur' : 'comptable';
  if (req.utilisateur.role !== roleRequis) {
    return probleme(req, res, 403, 'acces-refuse', 'Accès refusé', `Seul un ${roleRequis} peut passer une fiche à l'état ${etat}.`);
  }
  if (!TRANSITIONS[f.etat].includes(etat)) {
    return probleme(req, res, 409, 'transition-interdite', "Changement d'état interdit",
      `Une fiche à l'état ${f.etat} ne peut pas passer à l'état ${etat}.`, { etatActuel: f.etat });
  }
  Object.assign(f, { etat, dateModification: maintenant() });
  res.json(detail(f));
});

app.post('/v1/fiches/:id/validations', (req, res) => {
  if (req.utilisateur.role !== 'comptable') return refuse(req, res);
  const montant = req.body?.montantValide;
  if (typeof montant !== 'number' || montant < 0 || Math.abs(montant * 100 - centimes(montant)) > 1e-6) {
    return invalide(req, res, [{ champ: 'montantValide', message: 'Montant positif, au centime près' }]);
  }
  const f = ficheOu404(req, res);
  if (!f) return;
  if (f.etat !== 'CL') {
    return probleme(req, res, 409, 'transition-interdite', "Changement d'état interdit", "La fiche n'est pas clôturée.", { etatActuel: f.etat });
  }
  Object.assign(f, { etat: 'VA', montantValide: montant, dateModification: maintenant() });
  res.status(201).json(detail(f));
});

app.post('/v1/fiches/:id/frais-hors-forfait', (req, res) => {
  if (req.utilisateur.role !== 'visiteur') return refuse(req, res);
  const { date, libelle, montant, ...autres } = req.body ?? {};
  const erreurs = Object.keys(autres).map((cle) => ({ champ: 'body', message: `Clé non reconnue : "${cle}"` }));
  if (typeof date !== 'string' || !/^\d{4}-\d{2}-\d{2}$/.test(date)) erreurs.push({ champ: 'date', message: 'Date AAAA-MM-JJ attendue' });
  if (typeof libelle !== 'string' || libelle.trim().length < 3 || libelle.trim().length > 100) erreurs.push({ champ: 'libelle', message: 'De 3 à 100 caractères' });
  if (typeof montant !== 'number' || !(montant > 0) || montant > 5000) erreurs.push({ champ: 'montant', message: 'Montant de 0,01 à 5 000 € attendu' });
  if (erreurs.length > 0) return invalide(req, res, erreurs);
  const f = ficheOu404(req, res);
  if (!f || !enCours(req, res, f)) return;
  const nouveau = { id: prochainId++, ficheId: f.id, date, libelle: libelle.trim(), montant };
  frais.push(nouveau);
  f.dateModification = maintenant();
  res.status(201).location(`/v1/frais-hors-forfait/${nouveau.id}`)
    .json({ id: nouveau.id, date, libelle: nouveau.libelle, montant, justificatif: false });
});

app.delete('/v1/frais-hors-forfait/:id', (req, res) => {
  if (req.utilisateur.role !== 'visiteur') return refuse(req, res);
  const x = frais.find((y) => y.id === Number(req.params.id));
  const f = x && fiches.find((y) => y.id === x.ficheId && y.visiteurId === req.utilisateur.id);
  if (!f) return probleme(req, res, 404, 'frais-introuvable', 'Frais introuvable', `Le frais ${req.params.id} n'existe pas.`);
  if (!enCours(req, res, f)) return;
  frais.splice(frais.indexOf(x), 1);
  f.dateModification = maintenant();
  res.sendStatus(204);
});

app.use((req, res) => probleme(req, res, 404, 'route-inconnue', 'Route inconnue', `${req.method} ${req.path} n'existe pas.`));
app.use((err, req, res, next) => // JSON illisible (400) ou erreur imprévue (500)
  probleme(req, res, err.status ?? 500, 'erreur', 'Erreur', err.expose ? err.message : 'Erreur interne.'));

const port = process.env.PORT ?? 3000;
app.listen(port, () => console.log(`API de démonstration sur http://localhost:${port}/v1`));