Kapitel 61/71 bauten /projects/{id}/archive als Custom-Operation MIT Mercure-Publikation – das Frontend braucht dafür EINEN eigenen Hook, GENAU wie für JEDE andere Mutation.

Den Archive-Hook schreiben

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { apiClient } from '../api/client';
import type { Project } from '../types/project';

export function useArchiveProject() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (id: number) => {
      const response = await apiClient.post<Project>(`/projects/${id}/archive`);

      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['projects'] });
    },
  });
}

STRUKTURELL IDENTISCH zu useDeleteProject (Kapitel 84) – POST statt DELETE, SONST DASSELBE Muster: Mutation, dann invalidateQueries.

Den Button einbauen

function ArchiveProjectButton({ project }: { project: Project }) {
  const archiveProject = useArchiveProject();

  if (project.archived) {
    return <span>Archiviert</span>;
  }

  return (
    <button
      onClick={() => archiveProject.mutate(project.id)}
      disabled={archiveProject.isPending}
    >
      Archivieren
    </button>
  );
}

project.archived BLENDET den Button AUS, sobald ein Projekt BEREITS archiviert ist – das Frontend SPIEGELT damit GENAU die Geschäftsregel, dass archive KEINE Wirkung mehr hat, wenn archived bereits true ist.

Mercure macht es in Echtzeit sichtbar

DANK des useMercure-Hooks aus Kapitel 82 (auf ProjectListPage bereits registriert) sehen ANDERE geöffnete Tabs/Nutzer den Archivierungs-Status SOFORT, OHNE dass DORT der Archivieren-Button gedrückt wurde – GENAU die END-to-END-Verbindung von Kapitel 71 BIS zu diesem Button.