mzautomate/frontend/src/App.tsx

import {
  QueryClient,
  QueryClientProvider,
  useMutation,
  useQuery,
  useQueryClient,
} from "@tanstack/react-query";

import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";

const queryClient = new QueryClient();

function Block({ block }) {
  const qc = useQueryClient();
  const { mutate: deleteBlock } = useMutation({
    mutationFn: async () => {
      await fetch(`/api/block/${block.id}`, { method: "DELETE" });
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["block/list"] });
    },
  });

  return (
    <li>
      {JSON.stringify(block)} (
      <button onClick={() => deleteBlock()}>delete</button>)
    </li>
  );
}

function BlockList() {
  const { data: blocks, status } = useQuery({
    queryKey: ["block/list"],
    queryFn: async () => (await fetch("/api/block")).json(),
  });

  if (status !== "success") return <>{status}</>;

  return (
    <ul>
      {blocks.map((block) => (
        <Block key={block.id} block={block} />
      ))}
    </ul>
  );
}

function CreateButton() {
  const qc = useQueryClient();
  const { mutate: createBlock } = useMutation({
    mutationFn: async () => {
      await fetch(`/api/block`, { method: "POST" });
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["block/list"] });
    },
  });

  return <button onClick={() => createBlock()}>create</button>;
}

export default function App() {
  return (
    <MantineProvider>
      <QueryClientProvider client={queryClient}>
        <BlockList />

        <CreateButton />
      </QueryClientProvider>
    </MantineProvider>
  );
}