Kontrollverlust/frontend/src/components/PostForm.tsx

import { useState, type FormEvent } from "react";
import { useMutation } from "@tanstack/react-query";
import { api, errMsg } from "../api";
import { pasteImage } from "../paste";

// PostForm verfasst einen Beitrag, mit replyTo eine Antwort darauf.
export function PostForm({ replyTo, rows, placeholder, submitLabel, fallback, onDone }: {
  replyTo?: string;
  rows: number;
  placeholder: string;
  submitLabel: string;
  fallback: string;
  onDone: () => void;
}) {
  const [pasteMsg, setPasteMsg] = useState("");
  const create = useMutation({
    mutationFn: (fd: FormData) => api.post("/entry/create", fd),
  });

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const fd = new FormData(form);
    if (replyTo) fd.append("reply_to", replyTo);
    create.mutate(fd, {
      onSuccess: () => {
        form.reset();
        setPasteMsg("");
        onDone();
      },
    });
  };

  return (
    <>
      <form
        onSubmit={onSubmit}
        onPaste={(e) => {
          if (pasteImage(e)) setPasteMsg("Bild aus Zwischenablage übernommen.");
        }}
      >
        <textarea name="content" rows={rows} maxLength={1000} placeholder={placeholder}></textarea>{" "}
        <p className="muted">{pasteMsg}</p>{" "}
        <input name="file" type="file" accept="image/*" />{" "}
        <button type="submit" disabled={create.isPending}>{submitLabel}</button>
      </form>
      <p className="msg">{create.isError ? errMsg(create.error, fallback) : ""}</p>
    </>
  );
}