import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; // hooks import useToast from "hooks/use-toast"; // services import userService from "services/user.service"; // ui import { CustomSelect, Input, PrimaryButton } from "components/ui"; // types import { IUser } from "types"; // constant import { USER_ROLES } from "constants/workspace"; const defaultValues: Partial = { first_name: "", last_name: "", role: "", }; type Props = { user?: IUser; setStep: React.Dispatch>; }; export const UserDetails: React.FC = ({ user, setStep }) => { const { setToastAlert } = useToast(); const { register, handleSubmit, control, reset, formState: { errors, isSubmitting }, } = useForm({ defaultValues, }); const onSubmit = async (formData: IUser) => { await userService .updateUser(formData) .then(() => { setToastAlert({ title: "User details updated successfully!", type: "success", }); setStep(2); }) .catch((err) => { console.log(err); }); }; useEffect(() => { if (user) reset({ first_name: user.first_name, last_name: user.last_name, role: user.role, }); }, [user, reset]); return (
First name
Last name
What is your role?
( {USER_ROLES.map((item) => ( {item.label} ))} )} />
{isSubmitting ? "Updating..." : "Continue"}
); };