📦️ Add next-safe-action (#1794)

apps/web/package.json

@@ -81,6 +81,7 @@
     "nanoid": "^5.0.9",
     "next": "^15.3.1",
     "next-auth": "^5.0.0-beta.25",
+    "next-safe-action": "^8.0.7",
     "php-serialize": "^4.1.1",
     "postcss": "^8.4.31",
     "react": "^19.1.0",

apps/web/src/features/setup/actions.ts

@@ -5,83 +5,26 @@ import { posthog } from "@rallly/posthog/server";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 
-import { getTranslation } from "@/i18n/server";
+import { authActionClient } from "@/safe-action";
-import { auth } from "@/next-auth";
-
 import { setupSchema } from "./schema";
 
-export type SetupFormState = {
+export const updateUserAction = authActionClient
-  message?: string | null;
+  .inputSchema(setupSchema)
-  errors?: {
+  .action(async ({ parsedInput, ctx }) => {
-    name?: string[];
+    const { name, timeZone, locale } = parsedInput;
-    timeZone?: string[];
-    locale?: string[];
-  };
-};
 
-export async function updateUserSetup(
-  formData: FormData,
-): Promise<SetupFormState> {
-  const { t } = await getTranslation();
-  const session = await auth();
-
-  if (!session?.user?.id) {
-    return {
-      message: t("errorNotAuthenticated", {
-        defaultValue: "Not authenticated",
-      }),
-    };
-  }
-
-  const validatedFields = setupSchema.safeParse({
-    name: formData.get("name"),
-    timeZone: formData.get("timeZone"),
-    locale: formData.get("locale"),
-  });
-
-  if (!validatedFields.success) {
-    const errors = validatedFields.error.flatten().fieldErrors;
-    const translatedErrors = Object.entries(errors).reduce(
-      (acc, [key, value]) => {
-        acc[key as keyof typeof errors] = value?.map((errKey) =>
-          t(errKey, { defaultValue: `Invalid ${key}` }),
-        );
-        return acc;
-      },
-      {} as Required<SetupFormState>["errors"],
-    );
-
-    return {
-      errors: translatedErrors,
-      message: t("errorInvalidFields", {
-        defaultValue: "Invalid fields. Please check your input.",
-      }),
-    };
-  }
-
-  const { name, timeZone, locale } = validatedFields.data;
-
-  try {
     await prisma.user.update({
-      where: { id: session.user.id },
+      where: { id: ctx.user.id },
       data: {
         name,
         timeZone,
         locale,
       },
     });
-  } catch (error) {
-    console.error("Failed to update user setup:", error);
-    return {
-      message: t("errorDatabaseUpdateFailed", {
-        defaultValue: "Database error: Failed to update settings.",
-      }),
-    };
-  }
 
     posthog?.capture({
       event: "user_setup_completed",
-    distinctId: session.user.id,
+      distinctId: ctx.user.id,
       properties: {
         $set: {
           name,
@@ -96,4 +39,4 @@ export async function updateUserSetup(
     revalidatePath("/", "layout");
 
     redirect("/");
-}
+  });

apps/web/src/features/setup/components/setup-form.tsx

@@ -11,7 +11,6 @@ import {
   FormMessage,
 } from "@rallly/ui/form";
 import { Input } from "@rallly/ui/input";
-import * as React from "react";
 import { useForm } from "react-hook-form";
 
 import { LanguageSelect } from "@/components/poll/language-selector";
@@ -19,8 +18,9 @@ import { TimeZoneSelect } from "@/components/time-zone-picker/time-zone-select";
 import { Trans } from "@/components/trans";
 import { useTimezone } from "@/features/timezone";
 import { useTranslation } from "@/i18n/client";
+import { useAction } from "next-safe-action/hooks";
 
-import { updateUserSetup } from "../actions";
+import { updateUserAction } from "../actions";
 import { type SetupFormValues, setupSchema } from "../schema";
 
 interface SetupFormProps {
@@ -30,8 +30,8 @@ interface SetupFormProps {
 export function SetupForm({ defaultValues }: SetupFormProps) {
   const { timezone } = useTimezone();
   const { i18n } = useTranslation();
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const userSetupAction = useAction(updateUserAction);
-  const [serverError, setServerError] = React.useState<string | null>(null);
+
   const form = useForm<SetupFormValues>({
     resolver: zodResolver(setupSchema),
     defaultValues: {
@@ -41,33 +41,13 @@ export function SetupForm({ defaultValues }: SetupFormProps) {
     },
   });
 
-  async function onSubmit(data: SetupFormValues) {
-    setIsSubmitting(true);
-    setServerError(null);
-
-    // Construct FormData for the server action
-    const formData = new FormData();
-    formData.append("name", data.name);
-    formData.append("timeZone", data.timeZone);
-    formData.append("locale", data.locale);
-
-    const result = await updateUserSetup(formData);
-
-    setIsSubmitting(false);
-
-    if (result?.message) {
-      setServerError(result.message);
-    }
-  }
-
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
+      <form
-        {serverError && (
+        onSubmit={form.handleSubmit(async (data) => {
-          <p aria-live="polite" className="text-destructive text-sm">
+          await userSetupAction.executeAsync(data);
-            {serverError}
+        })}
-          </p>
+      >
-        )}
         <div className="space-y-4">
           <FormField
             control={form.control}
@@ -128,12 +108,15 @@ export function SetupForm({ defaultValues }: SetupFormProps) {
               </FormItem>
             )}
           />
+          {userSetupAction.result.serverError && (
+            <FormMessage>{userSetupAction.result.serverError}</FormMessage>
+          )}
         </div>
         <div className="mt-6">
           <Button
             variant="primary"
             type="submit"
-            loading={isSubmitting}
+            loading={form.formState.isSubmitting}
             className="w-full"
           >
             <Trans i18nKey="save" defaults="Save" />

apps/web/src/safe-action.ts

@@ -0,0 +1,12 @@
+import { requireUser } from "@/auth/queries";
+import { createSafeActionClient } from "next-safe-action";
+
+export const actionClient = createSafeActionClient();
+
+export const authActionClient = actionClient.use(async ({ next }) => {
+  const user = await requireUser();
+
+  return next({
+    ctx: { user },
+  });
+});

pnpm-lock.yaml

@@ -355,6 +355,9 @@ importers:
       next-auth:
         specifier: ^5.0.0-beta.25
         version: 5.0.0-beta.27(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(nodemailer@6.10.1)(react@19.1.0)
+      next-safe-action:
+        specifier: ^8.0.7
+        version: 8.0.7(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       php-serialize:
         specifier: ^4.1.1
         version: 4.1.1
@@ -7137,6 +7140,14 @@ packages:
     peerDependencies:
       react: '>=16'
 
+  next-safe-action@8.0.7:
+    resolution: {integrity: sha512-clQRxsvf4nZktCYkP1seeNH5rOZjsx6VYSAlpphvXvW+INIBvGySEStKutwtAPFV0/uZFJmNPt77ankoepUYXQ==}
+    engines: {node: '>=18.17'}
+    peerDependencies:
+      next: '>= 14.0.0'
+      react: '>= 18.2.0'
+      react-dom: '>= 18.2.0'
+
   next-seo@6.6.0:
     resolution: {integrity: sha512-0VSted/W6XNtgAtH3D+BZrMLLudqfm0D5DYNJRXHcDgan/1ZF1tDFIsWrmvQlYngALyphPfZ3ZdOqlKpKdvG6w==}
     peerDependencies:
@@ -16671,6 +16682,12 @@ snapshots:
       - acorn
       - supports-color
 
+  next-safe-action@8.0.7(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      next: 15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   next-seo@6.6.0(next@15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       next: 15.3.1(@babel/core@7.26.10)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)