89 lines
2.2 KiB
TypeScript
89 lines
2.2 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: "Workspace name must be at least 3 characters long" })
|
|
.max(24, { message: "Workspace name cannot exceed 24 characters" }),
|
|
});
|
|
|
|
type FormValues = z.infer<typeof schema>;
|
|
|
|
const UpdateWorkspaceNameForm = ({
|
|
workspacePublicId,
|
|
workspaceName,
|
|
}: {
|
|
workspacePublicId: string;
|
|
workspaceName: string;
|
|
}) => {
|
|
const utils = api.useUtils();
|
|
const { showPopup } = usePopup();
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { isDirty, errors },
|
|
} = useForm<FormValues>({
|
|
resolver: zodResolver(schema),
|
|
values: {
|
|
name: workspaceName,
|
|
},
|
|
});
|
|
|
|
const updateWorkspaceName = api.workspace.update.useMutation({
|
|
onSuccess: async () => {
|
|
showPopup({
|
|
header: "Workspace name updated",
|
|
message: "Your workspace name has been updated.",
|
|
icon: "success",
|
|
});
|
|
try {
|
|
await utils.workspace.all.refetch();
|
|
} catch (e) {
|
|
console.error(e);
|
|
throw e;
|
|
}
|
|
},
|
|
onError: () => {
|
|
showPopup({
|
|
header: "Error updating workspace name",
|
|
message: "Please try again later, or contact customer support.",
|
|
icon: "error",
|
|
});
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: FormValues) => {
|
|
updateWorkspaceName.mutate({
|
|
workspacePublicId,
|
|
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 || updateWorkspaceName.isPending}
|
|
isLoading={updateWorkspaceName.isPending}
|
|
>
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UpdateWorkspaceNameForm;
|