import { FC, useEffect, Fragment } from "react"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // ui import { Button, Input } from "@plane/ui"; // types import type { IIssueLink, ILinkDetails, ModuleLink } from "@plane/types"; type Props = { isOpen: boolean; handleClose: () => void; data?: ILinkDetails | null; status: boolean; createIssueLink: (formData: IIssueLink | ModuleLink) => Promise | Promise | void; updateIssueLink: (formData: IIssueLink | ModuleLink, linkId: string) => Promise | Promise | void; }; const defaultValues: IIssueLink | ModuleLink = { title: "", url: "", }; export const LinkModal: FC = (props) => { const { isOpen, handleClose, createIssueLink, updateIssueLink, status, data } = props; // form info const { formState: { errors, isSubmitting }, handleSubmit, control, reset, } = useForm({ defaultValues, }); const onClose = () => { handleClose(); const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); }, 500); }; const handleFormSubmit = async (formData: IIssueLink | ModuleLink) => { if (!data) await createIssueLink({ title: formData.title, url: formData.url }); else await updateIssueLink({ title: formData.title, url: formData.url }, data.id); onClose(); }; const handleCreateUpdatePage = async (formData: IIssueLink | ModuleLink) => { await handleFormSubmit(formData); reset({ ...defaultValues, }); }; useEffect(() => { reset({ ...defaultValues, ...data, }); }, [data, reset]); return (
{status ? "Update Link" : "Add Link"}
( )} />
( )} />
); };