import { useEffect } from "react"; import { Control, FieldArrayWithId, FormState, useFieldArray, useForm, UseFormWatch } from "react-hook-form"; // plane imports import { EUserPermissions } from "@plane/constants"; type EmailRole = { email: string; role: EUserPermissions; }; export type InvitationFormValues = { emails: EmailRole[]; }; const SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES: InvitationFormValues = { emails: [ { email: "", role: EUserPermissions.MEMBER, }, ], }; type TUseWorkspaceInvitationProps = { onSubmit: (data: InvitationFormValues) => Promise | undefined; onClose: () => void; }; type TUseWorkspaceInvitationReturn = { control: Control; fields: FieldArrayWithId[]; formState: FormState; watch: UseFormWatch; remove: (index: number) => void; onFormSubmit: () => void; handleClose: () => void; appendField: () => void; }; export const useWorkspaceInvitationActions = (props: TUseWorkspaceInvitationProps): TUseWorkspaceInvitationReturn => { const { onSubmit, onClose } = props; // form info const { control, reset, watch, handleSubmit, formState } = useForm({ defaultValues: SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES, }); const { fields, append, remove } = useFieldArray({ control, name: "emails", }); const handleClose = () => { onClose(); const timeout = setTimeout(() => { reset(SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES); clearTimeout(timeout); }, 350); }; const appendField = () => { append({ email: "", role: EUserPermissions.MEMBER }); }; const onSubmitForm = async (data: InvitationFormValues) => { await onSubmit(data)?.then(() => { reset(SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES); }); }; useEffect(() => { if (fields.length === 0) append([{ email: "", role: EUserPermissions.MEMBER }]); }, [fields, append]); return { control, fields, formState, watch, remove, onFormSubmit: handleSubmit(onSubmitForm), handleClose, appendField, }; };