fix(changelog): Use useActionState for server actions

apps/changelog/src/app/changelog/%5Fadmin/[id]/edit/page.tsx

@@ -1,13 +1,8 @@
-import {Fragment, Suspense} from 'react';
+import {Fragment, Suspense, useActionState} from 'react';
 import Link from 'next/link';
 
 import {prismaClient} from '@/server/prisma-client';
-import {editChangelog} from '@/server/actions/changelog';
-import {TitleSlug} from '@/client/components/titleSlug';
-import {FileUpload} from '@/client/components/fileUpload';
-import {Select} from '@/client/components/ui/Select';
-import {ForwardRefEditor} from '@/client/components/forwardRefEditor';
-import {Button} from '@/client/components/ui/Button';
+import {EditChangelogForm} from '@/client/components/forms/editChangelogForm';
 
 export default async function ChangelogCreatePage({params}: {params: {id: string}}) {
   const categories = await prismaClient.category.findMany({
@@ -38,59 +33,7 @@ export default async function ChangelogCreatePage({params}: {params: {id: string
 
   return (
     <section className="overflow-x-auto col-start-3 col-span-8">
-      <form action={editChangelog} className="px-2 w-full">
-        <input type="hidden" name="id" value={changelog.id} />
-        <TitleSlug defaultSlug={changelog.slug} defaultTitle={changelog.title} />
-        <FileUpload defaultFile={changelog.image || ''} />
-        <div className="my-6">
-          <label htmlFor="summary" className="block text-xs font-medium text-gray-700">
-            Summary
-            <Fragment>
-              &nbsp;<span className="font-bold text-secondary">*</span>
-            </Fragment>
-          </label>
-          <textarea name="summary" className="w-full" required>
-            {changelog.summary}
-          </textarea>
-          <span className="text-xs text-gray-500 italic">
-            This will be shown in the list
-          </span>
-        </div>
-        <div>
-          <Select
-            name="categories"
-            className="mt-1 mb-6"
-            label="Category"
-            placeholder="Select Category"
-            defaultValue={changelog.categories.map(category => ({
-              label: category.name,
-              value: category.name,
-            }))}
-            options={categories.map(category => ({
-              label: category.name,
-              value: category.name,
-            }))}
-            isMulti
-          />
-        </div>
-
-        <Suspense fallback={null}>
-          <ForwardRefEditor
-            name="content"
-            defaultValue={changelog.content || ''}
-            className="w-full"
-          />
-        </Suspense>
-
-        <footer className="flex items-center justify-between mt-2 mb-8">
-          <Link href="/changelog/_admin" className="underline text-gray-500">
-            Return to Changelogs list
-          </Link>
-          <div>
-            <Button type="submit">Update</Button>
-          </div>
-        </footer>
-      </form>
+      <EditChangelogForm changelog={changelog} categories={categories} />
     </section>
   );
 }

apps/changelog/src/app/changelog/%5Fadmin/confirm.tsx

@@ -1,26 +1,29 @@
 'use client';
 
-import type {PropsWithChildren} from 'react';
+import {ServerActionPayloadInterface} from '@/server/actions/serverActionPayload.interface';
+import {useActionState, type PropsWithChildren} from 'react';
 
 export default function Confirm({
   action,
   changelog,
   children,
 }: PropsWithChildren<{
-  action: (formData: FormData) => Promise<void | {
-    message: string;
-  }>;
+  action: (
+    currentFormState: ServerActionPayloadInterface,
+    formData: FormData
+  ) => Promise<ServerActionPayloadInterface>;
   changelog: {id: string};
 }>) {
+  const [_state, formAction] = useActionState(action, {});
   return (
     <form
-      action={action}
+      action={formAction}
       className="inline-block"
       onSubmit={e => {
         e.preventDefault();
         // eslint-disable-next-line no-alert
         if (confirm('Are you sure?')) {
-          action(new FormData(e.currentTarget));
+          formAction(new FormData(e.currentTarget));
         }
       }}
     >

apps/changelog/src/app/changelog/%5Fadmin/create/page.tsx

@@ -1,15 +1,9 @@
-import {Fragment} from 'react';
-import Link from 'next/link';
 import {prismaClient} from '@/server/prisma-client';
-import {createChangelog} from '@/server/actions/changelog';
-import {TitleSlug} from '@/client/components/titleSlug';
-import {FileUpload} from '@/client/components/fileUpload';
-import {Select} from '@/client/components/ui/Select';
-import {ForwardRefEditor} from '@/client/components/forwardRefEditor';
-import {Button} from '@/client/components/ui/Button';
+
 import {getServerSession} from 'next-auth/next';
 import {notFound} from 'next/navigation';
 import {authOptions} from '@/server/authOptions';
+import {CreateChangelogForm} from '@/client/components/forms/createChangelogForm';
 
 export default async function ChangelogCreatePage() {
   const session = await getServerSession(authOptions);
@@ -26,48 +20,7 @@ export default async function ChangelogCreatePage() {
 
   return (
     <section className="overflow-x-auto col-start-3 col-span-8">
-      <form action={createChangelog} className="px-2 w-full">
-        <TitleSlug />
-        <FileUpload />
-        <div className="my-6">
-          <label htmlFor="summary" className="block text-xs font-medium text-gray-700">
-            Summary
-            <Fragment>
-              &nbsp;<span className="font-bold text-secondary">*</span>
-            </Fragment>
-          </label>
-          <textarea name="summary" className="w-full" required />
-          <span className="text-xs text-gray-500 italic">
-            This will be shown in the list
-          </span>
-        </div>
-        <div>
-          <Select
-            name="categories"
-            className="mt-1 mb-6"
-            label="Category"
-            placeholder="Select Category"
-            options={categories.map(category => ({
-              label: category.name,
-              value: category.name,
-            }))}
-            isMulti
-          />
-        </div>
-
-        <ForwardRefEditor name="content" className="w-full" />
-
-        <footer className="flex items-center justify-between mt-2">
-          <Link href="/changelog/_admin" className="underline text-gray-500">
-            Return to Changelogs list
-          </Link>
-          <div>
-            <Button type="submit">Create (not published yet)</Button>
-            <br />
-            <span className="text-xs text-gray-500 italic">You can publish it later</span>
-          </div>
-        </footer>
-      </form>
+      <CreateChangelogForm categories={categories} />
     </section>
   );
 }

apps/changelog/src/client/components/forms/createChangelogForm.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import {createChangelog} from '@/server/actions/changelog';
+import {TitleSlug} from '@/client/components/titleSlug';
+import {FileUpload} from '@/client/components/fileUpload';
+import {Select} from '@/client/components/ui/Select';
+import {ForwardRefEditor} from '@/client/components/forwardRefEditor';
+import {Button} from '@/client/components/ui/Button';
+import {Fragment, useActionState} from 'react';
+import Link from 'next/link';
+import {Category} from '@prisma/client';
+
+export const CreateChangelogForm = ({categories}: {categories: Category[]}) => {
+  const [_state, formAction] = useActionState(createChangelog, {});
+  return (
+    <form action={formAction} className="px-2 w-full">
+      <TitleSlug />
+      <FileUpload />
+      <div className="my-6">
+        <label htmlFor="summary" className="block text-xs font-medium text-gray-700">
+          Summary
+          <Fragment>
+            &nbsp;<span className="font-bold text-secondary">*</span>
+          </Fragment>
+        </label>
+        <textarea name="summary" className="w-full" required />
+        <span className="text-xs text-gray-500 italic">
+          This will be shown in the list
+        </span>
+      </div>
+      <div>
+        <Select
+          name="categories"
+          className="mt-1 mb-6"
+          label="Category"
+          placeholder="Select Category"
+          options={categories.map(category => ({
+            label: category.name,
+            value: category.name,
+          }))}
+          isMulti
+        />
+      </div>
+
+      <ForwardRefEditor name="content" className="w-full" />
+
+      <footer className="flex items-center justify-between mt-2">
+        <Link href="/changelog/_admin" className="underline text-gray-500">
+          Return to Changelogs list
+        </Link>
+        <div>
+          <Button type="submit">Create (not published yet)</Button>
+          <br />
+          <span className="text-xs text-gray-500 italic">You can publish it later</span>
+        </div>
+      </footer>
+    </form>
+  );
+};

apps/changelog/src/client/components/forms/editChangelogForm.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import {editChangelog} from '@/server/actions/changelog';
+import {TitleSlug} from '@/client/components/titleSlug';
+import {FileUpload} from '@/client/components/fileUpload';
+import {Select} from '@/client/components/ui/Select';
+import {ForwardRefEditor} from '@/client/components/forwardRefEditor';
+import {Button} from '@/client/components/ui/Button';
+import {Fragment, Suspense, useActionState} from 'react';
+import {Changelog, Category} from '@prisma/client';
+import Link from 'next/link';
+
+export const EditChangelogForm = ({
+  changelog,
+  categories,
+}: {
+  changelog: Changelog;
+  categories: Category[];
+}) => {
+  const [_state, formAction] = useActionState(editChangelog, {});
+  return (
+    <form action={formAction} className="px-2 w-full">
+      <input type="hidden" name="id" value={changelog.id} />
+      <TitleSlug defaultSlug={changelog.slug} defaultTitle={changelog.title} />
+      <FileUpload defaultFile={changelog.image || ''} />
+      <div className="my-6">
+        <label htmlFor="summary" className="block text-xs font-medium text-gray-700">
+          Summary
+          <Fragment>
+            &nbsp;<span className="font-bold text-secondary">*</span>
+          </Fragment>
+        </label>
+        <textarea name="summary" className="w-full" required>
+          {changelog.summary}
+        </textarea>
+        <span className="text-xs text-gray-500 italic">
+          This will be shown in the list
+        </span>
+      </div>
+      <div>
+        <Select
+          name="categories"
+          className="mt-1 mb-6"
+          label="Category"
+          placeholder="Select Category"
+          defaultValue={categories.map(category => ({
+            label: category.name,
+            value: category.name,
+          }))}
+          options={categories.map(category => ({
+            label: category.name,
+            value: category.name,
+          }))}
+          isMulti
+        />
+      </div>
+
+      <Suspense fallback={null}>
+        <ForwardRefEditor
+          name="content"
+          defaultValue={changelog.content || ''}
+          className="w-full"
+        />
+      </Suspense>
+
+      <footer className="flex items-center justify-between mt-2 mb-8">
+        <Link href="/changelog/_admin" className="underline text-gray-500">
+          Return to Changelogs list
+        </Link>
+        <div>
+          <Button type="submit">Update</Button>
+        </div>
+      </footer>
+    </form>
+  );
+};