gitfor/platform

import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
import { listDiscussions, startDiscussion } from "~/fns/discussions";
import { useAction } from "~/hooks/use-action";
import { MarkdownEditor } from "~/components/MarkdownEditor";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/discussions/new")({
  beforeLoad: ({ context }) => {
    if (!context.viewer) throw redirect({ to: "/login" });
  },
  loader: ({ params }) => listDiscussions({ data: { owner: params.owner, repo: params.repo, page: 1 } }),
  component: NewDiscussionPage,
});

function NewDiscussionPage() {
  const { categories, canMaintain } = Route.useLoaderData();
  const params = Route.useParams();
  const navigate = useNavigate();
  const [body, setBody] = useState("");
  const start = useAction(startDiscussion, { invalidate: false });
  const options = categories
    .filter((category) => canMaintain || category.name !== "Announcements")
    .map((category) => ({ value: category.id, label: `${category.emoji} ${category.name}` }));

  return (
    <form
      className="max-w-3xl space-y-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const result = await start.run({
          data: {
            ...params,
            categoryId: String(form.get("category") ?? ""),
            title: String(form.get("title") ?? ""),
            body,