import React, { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/router"; import { Controller } from "react-hook-form"; // services import { FileService } from "services/file.service"; // hooks import { useDebouncedCallback } from "use-debounce"; import useReloadConfirmations from "hooks/use-reload-confirmation"; // ui import { TextArea } from "@plane/ui"; // components import { RichTextEditor } from "@plane/rich-text-editor"; import { Label } from "components/web-view"; // types import type { IIssue } from "types"; type Props = { isAllowed: boolean; issueDetails: IIssue; submitChanges: (data: Partial) => Promise; register: any; control: any; watch: any; handleSubmit: any; }; // services const fileService = new FileService(); export const IssueWebViewForm: React.FC = (props) => { const { isAllowed, issueDetails, submitChanges, control, watch, handleSubmit } = props; const router = useRouter(); const { workspaceSlug } = router.query; const [characterLimit, setCharacterLimit] = useState(false); const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); const { setShowAlert } = useReloadConfirmations(); useEffect(() => { if (isSubmitting === "submitted") { setShowAlert(false); setTimeout(async () => { setIsSubmitting("saved"); }, 2000); } else if (isSubmitting === "submitting") { setShowAlert(true); } }, [isSubmitting, setShowAlert]); const debouncedTitleSave = useDebouncedCallback(async () => { setTimeout(async () => { handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); }, 500); }, 1000); const handleDescriptionFormSubmit = useCallback( async (formData: Partial) => { if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return; await submitChanges({ name: formData.name ?? "", description_html: formData.description_html ?? "

", }); }, [submitChanges] ); return ( <>
{isAllowed ? ( (