diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx index 169e2f833..21e503a09 100644 --- a/apps/app/components/issues/comment/comment-card.tsx +++ b/apps/app/components/issues/comment/comment-card.tsx @@ -50,7 +50,6 @@ export const CommentCard: React.FC = ({ comment, onSubmit, handleCommentD setIsEditing(false); onSubmit(formData); - console.log("watching", formData.comment_html); editorRef.current?.setEditorValue(formData.comment_html); showEditorRef.current?.setEditorValue(formData.comment_html); diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx index fb530f5bc..b39cf7b5b 100644 --- a/apps/app/components/issues/description-form.tsx +++ b/apps/app/components/issues/description-form.tsx @@ -10,6 +10,7 @@ import { TextArea } from "components/ui"; // types import { IIssue } from "types"; import Tiptap from "components/tiptap"; +import { useDebouncedCallback } from "use-debounce"; export interface IssueDescriptionFormValues { name: string; @@ -32,7 +33,7 @@ export const IssueDescriptionForm: FC = ({ handleFormSubmit, isAllowed, }) => { - const [isSubmitting, setIsSubmitting] = useState(false); + const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); const [characterLimit, setCharacterLimit] = useState(false); const { setShowAlert } = useReloadConfirmations(); @@ -55,7 +56,6 @@ export const IssueDescriptionForm: FC = ({ const handleDescriptionFormSubmit = useCallback( async (formData: Partial) => { - // console.log("formdata", formData) if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return; await handleFormSubmit({ @@ -67,6 +67,14 @@ export const IssueDescriptionForm: FC = ({ [handleFormSubmit] ); + useEffect(() => { + if (isSubmitting === "submitted") { + setTimeout(async () => { + setIsSubmitting("saved"); + }, 1000); + } + }, [isSubmitting]); + // reset form values useEffect(() => { if (!issue) return; @@ -76,6 +84,12 @@ export const IssueDescriptionForm: FC = ({ }); }, [issue, reset]); + const debouncedTitleSave = useDebouncedCallback(async () => { + setTimeout(async () => { + handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); + }, 500); + }, 1000); + return (
@@ -85,11 +99,10 @@ export const IssueDescriptionForm: FC = ({ placeholder="Enter issue name" register={register} onFocus={() => setCharacterLimit(true)} - onBlur={() => { + onChange={(e) => { setCharacterLimit(false); - - setIsSubmitting(true); - handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting(false)); + setIsSubmitting("submitting"); + debouncedTitleSave(); }} required={true} className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary" @@ -99,9 +112,8 @@ export const IssueDescriptionForm: FC = ({ {characterLimit && (
255 ? "text-red-500" : "" - }`} + className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : "" + }`} > {watch("name").length} @@ -121,8 +133,8 @@ export const IssueDescriptionForm: FC = ({ = ({ customClassName="min-h-[150px]" editorContentCustomClassNames="pb-9" onChange={(description: Object, description_html: string) => { - setIsSubmitting(true); + setIsSubmitting("submitting"); onChange(description_html); setValue("description", description); - handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting(false)); + handleSubmit(handleDescriptionFormSubmit)().finally(() => { + setIsSubmitting("submitted"); + }); }} /> ); }} /> -
- {isSubmitting ? "Saving..." : "Saved"} -
+ {isSubmitting !== "saved" && (
+ {isSubmitting === "submitting" ? "Saving..." : "Saved"} +
)}
); diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx index d32c1e043..a7913b3cf 100644 --- a/apps/app/components/issues/form.tsx +++ b/apps/app/components/issues/form.tsx @@ -136,8 +136,6 @@ export const IssueForm: FC = ({ reValidateMode: "onChange", }); - console.log("values", getValues()); - const issueName = watch("name"); const handleCreateUpdateIssue = async (formData: Partial) => { @@ -164,7 +162,6 @@ export const IssueForm: FC = ({ const handleAiAssistance = async (response: string) => { if (!workspaceSlug || !projectId) return; - console.log(response) setValue("description", {}); setValue("description_html", `${watch("description_html")}

${response}

`); editorRef.current?.setEditorValue(`${watch("description_html")}`); diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx index f28726445..b4850ed7e 100644 --- a/apps/app/components/tiptap/index.tsx +++ b/apps/app/components/tiptap/index.tsx @@ -17,7 +17,7 @@ export interface ITiptapRichTextEditor { customClassName?: string; editorContentCustomClassNames?: string; onChange?: (json: any, html: string) => void; - setIsSubmitting?: (isSubmitting: boolean) => void; + setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void; editable?: boolean; forwardedRef?: any; debouncedUpdatesEnabled?: boolean; @@ -44,7 +44,7 @@ const Tiptap = (props: ITiptapRichTextEditor) => { content: value, onUpdate: async ({ editor }) => { // for instant feedback loop - setIsSubmitting?.(true); + setIsSubmitting?.("submitting"); checkForNodeDeletions(editor); if (debouncedUpdatesEnabled) { debouncedUpdates({ onChange, editor }); @@ -58,7 +58,6 @@ const Tiptap = (props: ITiptapRichTextEditor) => { useImperativeHandle(forwardedRef, () => ({ clearEditor: () => { - console.log("clearContent"); console.log(editorRef); editorRef.current?.commands.clearContent(); }, diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx index 4a57bc88f..ed44aa379 100644 --- a/apps/app/components/tiptap/plugins/upload-image.tsx +++ b/apps/app/components/tiptap/plugins/upload-image.tsx @@ -83,7 +83,6 @@ export async function startImageUpload(file: File, view: EditorView, pos: number }; const src = await UploadImageHandler(file); - console.log(src, "src"); const { schema } = view.state; pos = findPlaceholder(view.state, id);