86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useForm } from "react-hook-form";
|
|
import { z } from "zod";
|
|
|
|
import Button from "~/components/Button";
|
|
import Input from "~/components/Input";
|
|
import { usePopup } from "~/providers/popup";
|
|
import { api } from "~/utils/api";
|
|
|
|
const schema = z.object({
|
|
name: z
|
|
.string()
|
|
.min(3, {
|
|
message: "Display namemust be at least 3 characters long",
|
|
})
|
|
.max(280, {
|
|
message: "Display name cannot exceed 280 characters",
|
|
}),
|
|
});
|
|
|
|
type FormValues = z.infer<typeof schema>;
|
|
|
|
const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
|
|
const utils = api.useUtils();
|
|
const { showPopup } = usePopup();
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { isDirty, errors },
|
|
} = useForm<FormValues>({
|
|
resolver: zodResolver(schema),
|
|
values: {
|
|
name: displayName,
|
|
},
|
|
});
|
|
|
|
const updateDisplayName = api.user.update.useMutation({
|
|
onSuccess: async () => {
|
|
showPopup({
|
|
header: "Display name updated",
|
|
message: "Your display name has been updated.",
|
|
icon: "success",
|
|
});
|
|
try {
|
|
await utils.user.getUser.refetch();
|
|
} catch (e) {
|
|
console.error(e);
|
|
throw e;
|
|
}
|
|
},
|
|
onError: () => {
|
|
showPopup({
|
|
header: "Error updating display name",
|
|
message: "Please try again later, or contact customer support.",
|
|
icon: "error",
|
|
});
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: FormValues) => {
|
|
updateDisplayName.mutate({
|
|
name: data.name,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
<div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
|
|
<Input {...register("name")} errorMessage={errors.name?.message} />
|
|
</div>
|
|
<div>
|
|
<Button
|
|
onClick={handleSubmit(onSubmit)}
|
|
variant="primary"
|
|
disabled={!isDirty || updateDisplayName.isPending}
|
|
isLoading={updateDisplayName.isPending}
|
|
>
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UpdateDisplayNameForm;
|