import React from "react"; import { useRouter } from "next/router"; import dynamic from "next/dynamic"; import { mutate } from "swr"; // react-hook-form import { useForm, Controller } from "react-hook-form"; // services import issuesServices from "services/issues.service"; // hooks import useToast from "hooks/use-toast"; // ui import { Loader, SecondaryButton } from "components/ui"; // types import type { ICurrentUserResponse, IIssueComment } from "types"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false, loading: () => ( ), }); import { IRemirrorRichTextEditor } from "components/rich-text-editor"; const WrappedRemirrorRichTextEditor = React.forwardRef< IRemirrorRichTextEditor, IRemirrorRichTextEditor >((props, ref) => ); WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor"; const defaultValues: Partial = { comment_json: "", comment_html: "", }; type Props = { issueId: string; user: ICurrentUserResponse | undefined; disabled?: boolean; }; export const AddComment: React.FC = ({ issueId, user, disabled = false }) => { const { handleSubmit, control, setValue, formState: { isSubmitting }, reset, } = useForm({ defaultValues }); const editorRef = React.useRef(null); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const onSubmit = async (formData: IIssueComment) => { if ( !workspaceSlug || !projectId || !issueId || isSubmitting || !formData.comment_html || !formData.comment_json ) return; await issuesServices .createIssueComment( workspaceSlug as string, projectId as string, issueId as string, formData, user ) .then(() => { mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); reset(defaultValues); editorRef.current?.clearEditor(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Comment could not be posted. Please try again.", }) ); }; return ( ( setValue("comment_json", jsonValue)} onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)} placeholder="Enter your comment..." ref={editorRef} /> )} /> {isSubmitting ? "Adding..." : "Comment"} ); };