mirror of
https://github.com/lukevella/rallly.git
synced 2025-08-06 09:59:00 +02:00
📦️ Add next-safe-action (#1794)
This commit is contained in:
Luke Vella
GitHub
parent
07e951ce6f
commit
cc4b23067c
5 changed files with 65 additions and 109 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -5,95 +5,38 @@ import { posthog } from "@rallly/posthog/server";
|
|||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { getTranslation } from "@/i18n/server";
|
||||
import { auth } from "@/next-auth";
|
||||
|
||||
import { authActionClient } from "@/safe-action";
|
||||
import { setupSchema } from "./schema";
|
||||
|
||||
export type SetupFormState = {
|
||||
message?: string | null;
|
||||
errors?: {
|
||||
name?: string[];
|
||||
timeZone?: string[];
|
||||
locale?: string[];
|
||||
};
|
||||
};
|
||||
export const updateUserAction = authActionClient
|
||||
.inputSchema(setupSchema)
|
||||
.action(async ({ parsedInput, ctx }) => {
|
||||
const { name, timeZone, locale } = parsedInput;
|
||||
|
||||
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,
|
||||
properties: {
|
||||
$set: {
|
||||
name,
|
||||
timeZone,
|
||||
locale,
|
||||
posthog?.capture({
|
||||
event: "user_setup_completed",
|
||||
distinctId: ctx.user.id,
|
||||
properties: {
|
||||
$set: {
|
||||
name,
|
||||
timeZone,
|
||||
locale,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await posthog?.shutdown();
|
||||
|
||||
revalidatePath("/", "layout");
|
||||
|
||||
redirect("/");
|
||||
});
|
||||
|
||||
await posthog?.shutdown();
|
||||
|
||||
revalidatePath("/", "layout");
|
||||
|
||||
redirect("/");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 [serverError, setServerError] = React.useState<string | null>(null);
|
||||
const userSetupAction = useAction(updateUserAction);
|
||||
|
||||
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)}>
|
||||
{serverError && (
|
||||
<p aria-live="polite" className="text-destructive text-sm">
|
||||
{serverError}
|
||||
</p>
|
||||
)}
|
||||
<form
|
||||
onSubmit={form.handleSubmit(async (data) => {
|
||||
await userSetupAction.executeAsync(data);
|
||||
})}
|
||||
>
|
||||
<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" />
|
||||
|
|
|
|||
12
apps/web/src/safe-action.ts
Normal file
12
apps/web/src/safe-action.ts
Normal file
|
|
@ -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 },
|
||||
});
|
||||
});
|
||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue