68 lines · 2.3 KB
import { useState } from "react";
import { adminModerate } from "~/fns/admin";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { cn } from "~/utils/cn";

const INPUT = "rounded-md border border-kumo-line bg-kumo-base px-2 py-1 text-kumo-strong";

/** Hide or restore one repository, issue or comment by its URL. */
export function ModerateByUrl() {
  const [url, setUrl] = useState("");
  const [reason, setReason] = useState("");
  const [done, setDone] = useState<string | null>(null);
  const moderate = useAction(adminModerate);
  const submit = async (hidden: boolean) => {
    if (!url.trim()) return;
    if (hidden && !window.confirm(`Hide or take down ${url.trim()}?`)) return;
    const result = await moderate.run({ data: { url: url.trim(), hidden, reason: reason.trim() || null } });
    if (result) {
      setDone(`${hidden ? "Hid" : "Restored"} ${result.target.kind} ${result.target.id}`);
      setUrl("");
      setReason("");
    }
  };
  return (
    <Panel title="Moderate by URL">
      <div className="space-y-3 p-4 text-sm">
        <ErrorBanner message={moderate.error} />
        {done && (
          <Callout tone="success" as="output">
            {done}
          </Callout>
        )}
        <form
          className="flex flex-wrap items-center gap-2"
          onSubmit={(event) => {
            event.preventDefault();
            void submit(true);