Create form

import {
  AutoForm,
  type AutoFormOnSubmit,
} from "@vitnode/core/components/form/auto-form";
import { AutoFormEditor } from "@vitnode/core/components/form/fields/editor";
import { AutoFormInput } from "@vitnode/core/components/form/fields/input";
import {
  isRichTextEmpty,
  type RichTextDocument,
  zodRichTextDocument,
} from "@vitnode/core/content";
import { useTranslations } from "use-intl";
import { z } from "zod";

/** The fields the form renders, so server errors on them show in place. */
export const ARTICLE_FORM_FIELDS = ["title", "body"] as const;

export interface ArticleFormValues {
  body: RichTextDocument;
  title: string;
}

const createArticleFormSchema = (defaults: ArticleFormValues) =>
  z.object({
    title: z.string().trim().min(3).max(200).default(defaults.title),
    body: zodRichTextDocument
      .refine(doc => !isRichTextEmpty(doc))
      .default(defaults.body),
  });

export type ArticleFormSchema = ReturnType<typeof createArticleFormSchema>;

export const ArticleForm = ({
  defaultValues,
  onSubmit,
  submitLabel,
}: {
  defaultValues: ArticleFormValues;
  onSubmit: AutoFormOnSubmit<ArticleFormSchema>;
  submitLabel: string;
}) => {
  const t = useTranslations("newsroom.articles.form");

  return (
    <AutoForm
      fields={[
        {
          id: "title",
          component: props => <AutoFormInput {...props} label={t("title")} />,
        },
        {
          id: "body",
          component: props => (
            <AutoFormEditor {...props} format="json" label={t("body")} />
          ),
        },
      ]}
      formSchema={createArticleFormSchema(defaultValues)}
      onSubmit={onSubmit}
      submitButtonProps={{ children: submitLabel, className: "self-start" }}
    />
  );
};

import type { AutoFormOnSubmit } from "@vitnode/core/components/form/auto-form";

import { useQueryClient } from "@tanstack/react-query";
import { emptyRichTextDocument } from "@vitnode/core/content";
import { definePluginRoute } from "@vitnode/core/routing";
import { useContentPublicWrite } from "@vitnode/core/tanstack/content";
import { fetcher } from "@vitnode/core/tanstack/fetcher";
import { useHrefNavigate } from "@vitnode/core/tanstack/link";
import { toast } from "sonner";
import { useTranslations } from "use-intl";

import { manifest } from "@/manifest.gen";

import {
  ARTICLE_FORM_FIELDS,
  ArticleForm,
  type ArticleFormSchema,
} from "./article-form";

export const route = definePluginRoute({
  head: ({ t }) => ({
    robots: "noindex, nofollow",
    title: t("newsroom.articles.new.title"),
  }),
});

const ArticleNewPage = () => {
  const t = useTranslations("newsroom.articles.new");
  const navigate = useHrefNavigate();
  const queryClient = useQueryClient();
  const write = useContentPublicWrite({
    fields: ARTICLE_FORM_FIELDS,
    uniqueField: "title",
  });

  const onSubmit: AutoFormOnSubmit<ArticleFormSchema> = async (
    values,
    form,
  ) => {
    const record = await write.submit(
      form,
      async () =>
        await fetcher({
          plugin: manifest.id,
          method: "post",
          module: "content/news",
          path: "/",
          args: { body: { values } },
        }),
    );
    if (!record) return;

    await queryClient.invalidateQueries({
      queryKey: [manifest.id, "articles"],
    });

    // Waits for a moderator. Its public page answers 404 until approval.
    if (record.approval?.status === "pending") {
      toast.info(t("pending.title"), { description: t("pending.desc") });
      await navigate(`/news/${record.id}/edit`);

      return;
    }

    // A draft nobody has to review. It stays private, so open its edit page.
    if (record.status !== "published") {
      toast.info(t("draft.title"), { description: t("draft.desc") });
      await navigate(`/news/${record.id}/edit`);

      return;
    }

    toast.success(t("success.title"), { description: t("success.desc") });
    await navigate(`/news/${record.slug}`);
  };

  return (
    <div className="container mx-auto flex max-w-3xl flex-col gap-6 px-4 py-8">
      <h1 className="text-3xl font-semibold tracking-tight text-balance">
        {t("title")}
      </h1>
      <ArticleForm
        defaultValues={{ body: emptyRichTextDocument(), title: "" }}
        onSubmit={onSubmit}
        submitLabel={t("submit")}
      />
    </div>
  );
};

export default ArticleNewPage;

{
  "newsroom": {
    "articles": {
      "form": { "title": "Title", "body": "Article" },
      "new": {
        "title": "Write an article",
        "submit": "Publish article",
        "success": { "title": "Article published", "desc": "Readers can see it now." },
        "draft": {
          "title": "Draft saved",
          "desc": "It is not public yet, so only you and the site's staff can see it."
        },
        "pending": {
          "title": "Sent for approval",
          "desc": "A moderator reviews it before readers can see it."
        }
      }
    }
  }
}