import { ChangeEvent, FC, useCallback, useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; // packages import { RichTextEditor } from "@plane/rich-text-editor"; // components import { TextArea } from "@plane/ui"; import { IssueReaction } from "./reactions"; // hooks import { useDebouncedCallback } from "use-debounce"; import useReloadConfirmations from "hooks/use-reload-confirmation"; import useEditorSuggestions from "hooks/use-editor-suggestions"; // types import { IIssue } from "types"; // services import { FileService } from "services/file.service"; import { useMobxStore } from "lib/mobx/store-provider"; const fileService = new FileService(); interface IPeekOverviewIssueDetails { workspaceSlug: string; issue: IIssue; issueReactions: any; user: any; issueUpdate: (issue: Partial) => void; issueReactionCreate: (reaction: string) => void; issueReactionRemove: (reaction: string) => void; } export const PeekOverviewIssueDetails: FC = (props) => { const { workspaceSlug, issue, issueReactions, user, issueUpdate, issueReactionCreate, issueReactionRemove } = props; // store const { user: userStore } = useMobxStore(); const { currentProjectRole } = userStore; const isAllowed = [15, 20].includes(currentProjectRole || 0); // states const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); const [characterLimit, setCharacterLimit] = useState(false); // hooks const { setShowAlert } = useReloadConfirmations(); const editorSuggestions = useEditorSuggestions(); const { handleSubmit, watch, reset, control, formState: { errors }, } = useForm({ defaultValues: { name: "", description_html: "", }, }); const handleDescriptionFormSubmit = useCallback( async (formData: Partial) => { if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return; await issueUpdate({ ...issue, name: formData.name ?? "", description_html: formData.description_html ?? "

", }); }, [issue, issueUpdate] ); const [localTitleValue, setLocalTitleValue] = useState(""); const issueTitleCurrentValue = watch("name"); useEffect(() => { if (localTitleValue === "" && issueTitleCurrentValue !== "") { setLocalTitleValue(issueTitleCurrentValue); } }, [issueTitleCurrentValue, localTitleValue]); const debouncedFormSave = useDebouncedCallback(async () => { handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); }, 1500); useEffect(() => { if (isSubmitting === "submitted") { setShowAlert(false); setTimeout(async () => { setIsSubmitting("saved"); }, 2000); } else if (isSubmitting === "submitting") { setShowAlert(true); } }, [isSubmitting, setShowAlert]); // reset form values useEffect(() => { if (!issue) return; reset({ ...issue, }); }, [issue, reset]); return ( <> {issue?.project_detail?.identifier}-{issue?.sequence_id}
{isAllowed ? ( (