gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { deleteWebhook, listWebhooks, redeliverWebhook, saveWebhook } from "~/fns/settings";
import { useAction } from "~/hooks/use-action";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";

const HTTP_OK_MAX = 300;

export const Route = createFileRoute("/$owner/$repo/settings/webhooks")({
  loader: ({ params }) => listWebhooks({ data: { owner: params.owner, repo: params.repo } }),
  component: WebhooksPage,
});

function WebhooksPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const save = useAction(saveWebhook);
  const remove = useAction(deleteWebhook);
  const redeliver = useAction(redeliverWebhook);

  return (
    <>
      <Panel title="Add webhook">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const form = new FormData(element);
            const events = data.availableEvents.filter((name) => form.get(`event-${name}`) === "on");
            const secret = String(form.get("secret") ?? "").trim();
            const ok = await save.run({
              data: {
                ...params,
                id: null,