import { FC, useCallback, useEffect, useState } from "react"; import dynamic from "next/dynamic"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // components import { Loader, TextArea } from "components/ui"; const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false, loading: () => ( ), }); // types import { IIssue, UserAuth } from "types"; export interface IssueDescriptionFormValues { name: string; description: any; description_html: string; } export interface IssueDetailsProps { issue: IIssue; handleFormSubmit: (value: IssueDescriptionFormValues) => Promise; userAuth: UserAuth; } export const IssueDescriptionForm: FC = ({ issue, handleFormSubmit, userAuth, }) => { const [isSubmitting, setIsSubmitting] = useState(false); const [characterLimit, setCharacterLimit] = useState(false); const { handleSubmit, watch, setValue, reset, register, control, formState: { errors }, } = useForm({ defaultValues: { name: "", description: "", description_html: "", }, }); const handleDescriptionFormSubmit = useCallback( async (formData: Partial) => { if (!formData.name || formData.name.length === 0 || formData.name.length > 255) return; await handleFormSubmit({ name: formData.name ?? "", description: formData.description ?? "", description_html: formData.description_html ?? "

", }); }, [handleFormSubmit] ); // useEffect(() => { // const alertUser = (e: BeforeUnloadEvent) => { // e.preventDefault(); // e.returnValue = ""; // return "Are you sure you want to leave?"; // }; // window.addEventListener("beforeunload", alertUser); // return () => { // window.removeEventListener("beforeunload", alertUser); // }; // }, [isSubmitting]); // reset form values useEffect(() => { if (!issue) return; reset(issue); }, [issue, reset]); const isNotAllowed = userAuth.isGuest || userAuth.isViewer; return (