Mises à jour optimistes et rollback

import { Service, inject, signal } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { TodoApi, type Todo } from './todo-api';

@Service()
export class TodoStore {
  private readonly api = inject(TodoApi);
  readonly todos = signal<readonly Todo[]>([]);
  readonly error = signal<string | null>(null);

  async toggle(id: string): Promise<void> {
    const before = this.todos().find((t) => t.id === id);
    if (!before) return;

    this.patch(id, { done: !before.done }); // 1. l’écran change MAINTENANT
    try {
      const saved = await firstValueFrom(this.api.update(id, { done: !before.done }));
      this.patch(id, saved); // 2. la version du serveur l’emporte (horodatages, texte normalisé...)
    } catch {
      this.patch(id, { done: before.done }); // 3. annuler UNIQUEMENT cet élément...
      this.error.set(`Impossible d’enregistrer « ${before.title} ». Annulé.`); // ...et le dire
    }
  }

  private patch(id: string, change: Partial<Todo>): void {
    this.todos.update((list) => list.map((t) => (t.id === id ? { ...t, ...change } : t)));
  }
}

// ✗ Un snapshot de TOUTE la liste capture aussi les autres modifications encore en vol
async toggle(id: string) {
  const snapshot = this.todos(); // pris avant le prochain clic de l’utilisateur...
  this.patch(id, { done: !this.find(id).done });
  try {
    await firstValueFrom(this.api.update(id, ...));
  } catch {
    this.todos.set(snapshot); // ...donc ceci annule aussi une modification que le serveur a DÉJÀ enregistrée
  }
}

async add(title: string): Promise<void> {
  const temp: Todo = { id: `tmp-${crypto.randomUUID()}`, title, done: false };
  this.todos.update((list) => [...list, temp]);
  try {
    const saved = await firstValueFrom(this.api.create({ title }));
    // l’id temporaire disparaît : toute modification ultérieure utilise le vrai
    this.todos.update((list) => list.map((t) => (t.id === temp.id ? saved : t)));
  } catch {
    this.todos.update((list) => list.filter((t) => t.id !== temp.id));
    this.error.set(`« ${title} » n’a pas été ajouté.`);
  }
}

private latest = 0;
readonly enabled = signal(false); // ce que voit l’utilisateur (optimiste)
private readonly confirmed = signal(false); // ce que le serveur a confirmé en dernier

async setNotifications(on: boolean): Promise<void> {
  const id = ++this.latest;
  this.enabled.set(on);
  try {
    const saved = await firstValueFrom(this.api.saveSettings({ notifications: on }));
    this.confirmed.set(saved.notifications);
    // une réponse plus ancienne qui arrive tard ne doit pas écraser un choix plus récent
    if (id === this.latest) this.enabled.set(saved.notifications);
  } catch {
    if (id === this.latest) this.enabled.set(this.confirmed());
  }
}

import { HttpClient, HttpContext, HttpContextToken, HttpInterceptorFn } from '@angular/common/http';
import { retry } from 'rxjs';

export const IDEMPOTENCY_KEY = new HttpContextToken<string | null>(() => null);

/** La clé voyage dans le contexte de la requête et devient un en-tête. */
export const idempotencyInterceptor: HttpInterceptorFn = (req, next) => {
  const key = req.context.get(IDEMPOTENCY_KEY);
  return next(key ? req.clone({ setHeaders: { 'Idempotency-Key': key } }) : req);
};

// Une clé par ACTION DE L’UTILISATEUR, réutilisée à chaque nouvel essai de cette action.
placeOrder(order: Order) {
  const key = crypto.randomUUID();
  return this.http
    .post<OrderConfirmation>('/api/orders', order, {
      context: new HttpContext().set(IDEMPOTENCY_KEY, key),
    })
    .pipe(retry({ count: 3, delay: 1000 })); // même observable → même contexte → même clé
}

mise à jour optimiste  snapshot → appliquer tout de suite → envoyer → version serveur | rollback + message
rollback               seulement ce que cette requête a changé (l’élément / l’opération inverse)
pas toute la liste     un snapshot de la liste annule aussi les autres requêtes en vol
réponse du serveur     remplace la supposition locale (ids, horodatages, texte normalisé)
ids temporaires        tmp-uuid jusqu’à la réponse de « create », puis le vrai id
réponses désordonnées  un id par requête : seule la plus récente peut écrire (newest-only)
écritures dans l’ordre concatMap : une à la fois, dans l’ordre des clics
lectures               switchMap : annuler l’ancienne recherche, garder la nouvelle
nouveaux essais        Idempotency-Key = un UUID par action, le même à chaque essai
jamais optimiste       paiements, actions irréversibles, validation qui échoue souvent
rollback sans message = une UI qui a l’air cassée