From c8d37dac146fc110efc0c9ffa8561ca3931857cd Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 22 Oct 2024 16:41:03 +0530 Subject: [PATCH 1/4] chore: intake issue navigation improvement --- web/core/components/inbox/content/inbox-issue-header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx index abe5999902e..fd9a3ef5aa4 100644 --- a/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-header.tsx @@ -196,13 +196,14 @@ export const InboxIssueActionsHeader: FC = observer((p const onKeyDown = useCallback( (e: KeyboardEvent) => { + if (isSubmitting === "submitting") return; if (e.key === "ArrowUp") { handleInboxIssueNavigation("prev"); } else if (e.key === "ArrowDown") { handleInboxIssueNavigation("next"); } }, - [handleInboxIssueNavigation] + [handleInboxIssueNavigation, isSubmitting] ); const handleActionWithPermission = (isAdmin: boolean, action: () => void, errorMessage: string) => { From bdca7ff0f88e11ed01e291d21bb5c7e4fbc5aaca Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 22 Oct 2024 17:21:39 +0530 Subject: [PATCH 2/4] chore: code refactor --- web/core/components/inbox/content/inbox-issue-header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx index fd9a3ef5aa4..ad7d63ff0f4 100644 --- a/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-header.tsx @@ -196,14 +196,13 @@ export const InboxIssueActionsHeader: FC = observer((p const onKeyDown = useCallback( (e: KeyboardEvent) => { - if (isSubmitting === "submitting") return; if (e.key === "ArrowUp") { handleInboxIssueNavigation("prev"); } else if (e.key === "ArrowDown") { handleInboxIssueNavigation("next"); } }, - [handleInboxIssueNavigation, isSubmitting] + [handleInboxIssueNavigation] ); const handleActionWithPermission = (isAdmin: boolean, action: () => void, errorMessage: string) => { @@ -218,11 +217,12 @@ export const InboxIssueActionsHeader: FC = observer((p }; useEffect(() => { + if (isSubmitting === "submitting") return; if (!isNotificationEmbed) document.addEventListener("keydown", onKeyDown); return () => { if (!isNotificationEmbed) document.removeEventListener("keydown", onKeyDown); }; - }, [onKeyDown, isNotificationEmbed]); + }, [onKeyDown, isNotificationEmbed, isSubmitting]); if (!inboxIssue) return null; From 3ee4c0a141fc8dd4ece7e58026552d26fc5ed6be Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 22 Oct 2024 20:21:41 +0530 Subject: [PATCH 3/4] chore: intake issue navigation improvement --- .../inbox/content/inbox-issue-header.tsx | 3 +-- .../components/inbox/content/issue-root.tsx | 2 +- .../components/issues/description-input.tsx | 25 +++++++++++-------- web/core/store/inbox/inbox-issue.store.ts | 4 +-- 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx index ad7d63ff0f4..abe5999902e 100644 --- a/web/core/components/inbox/content/inbox-issue-header.tsx +++ b/web/core/components/inbox/content/inbox-issue-header.tsx @@ -217,12 +217,11 @@ export const InboxIssueActionsHeader: FC = observer((p }; useEffect(() => { - if (isSubmitting === "submitting") return; if (!isNotificationEmbed) document.addEventListener("keydown", onKeyDown); return () => { if (!isNotificationEmbed) document.removeEventListener("keydown", onKeyDown); }; - }, [onKeyDown, isNotificationEmbed, isSubmitting]); + }, [onKeyDown, isNotificationEmbed]); if (!inboxIssue) return null; diff --git a/web/core/components/inbox/content/issue-root.tsx b/web/core/components/inbox/content/issue-root.tsx index 87c8ae6d2c3..3855502e934 100644 --- a/web/core/components/inbox/content/issue-root.tsx +++ b/web/core/components/inbox/content/issue-root.tsx @@ -67,7 +67,7 @@ export const InboxIssueMainContent: React.FC = observer((props) => { }, update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial) => { try { - await inboxIssue.updateIssue(data); + await inboxIssue.updateIssue({ ...data, id: _issueId }); captureIssueEvent({ eventName: "Inbox issue updated", payload: { ...data, state: "SUCCESS", element: "Inbox" }, diff --git a/web/core/components/issues/description-input.tsx b/web/core/components/issues/description-input.tsx index 8c18618c506..4562b4a0a06 100644 --- a/web/core/components/issues/description-input.tsx +++ b/web/core/components/issues/description-input.tsx @@ -59,12 +59,12 @@ export const IssueDescriptionInput: FC = observer((p }); const handleDescriptionFormSubmit = useCallback( - async (formData: Partial) => { - await issueOperations.update(workspaceSlug, projectId, issueId, { + async (formData: Partial, _issueId: string) => { + await issueOperations.update(workspaceSlug, projectId, _issueId, { description_html: formData.description_html ?? "

", }); }, - [workspaceSlug, projectId, issueId, issueOperations] + [workspaceSlug, projectId, issueOperations] ); const { getWorkspaceBySlug } = useWorkspace(); @@ -84,14 +84,17 @@ export const IssueDescriptionInput: FC = observer((p }); }, [initialValue, issueId, reset]); - // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS - // TODO: Verify the exhaustive-deps warning - // eslint-disable-next-line react-hooks/exhaustive-deps + const debouncedHandleDescriptionFormSubmit = debounce(async (data: Partial, _issueId: string) => { + await handleDescriptionFormSubmit(data, _issueId); + setIsSubmitting("submitted"); + }, 10000); + const debouncedFormSave = useCallback( - debounce(async () => { - handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")); - }, 1500), - [handleSubmit, issueId] + (_issueId: string) => + handleSubmit((data) => { + debouncedHandleDescriptionFormSubmit(data, _issueId); + })(), + [debouncedHandleDescriptionFormSubmit, handleSubmit] ); return ( @@ -113,7 +116,7 @@ export const IssueDescriptionInput: FC = observer((p onChange={(_description: object, description_html: string) => { setIsSubmitting("submitting"); onChange(description_html); - debouncedFormSave(); + debouncedFormSave(issueId); }} placeholder={ placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value) diff --git a/web/core/store/inbox/inbox-issue.store.ts b/web/core/store/inbox/inbox-issue.store.ts index 8d33fddeecd..3c88557a95e 100644 --- a/web/core/store/inbox/inbox-issue.store.ts +++ b/web/core/store/inbox/inbox-issue.store.ts @@ -151,12 +151,12 @@ export class InboxIssueStore implements IInboxIssueStore { updateIssue = async (issue: Partial) => { const inboxIssue = clone(this.issue); try { - if (!this.issue.id) return; + if (!issue.id) return; Object.keys(issue).forEach((key) => { const issueKey = key as keyof TIssue; set(this.issue, issueKey, issue[issueKey]); }); - await this.inboxIssueService.updateIssue(this.workspaceSlug, this.projectId, this.issue.id, issue); + await this.inboxIssueService.updateIssue(this.workspaceSlug, this.projectId, issue.id, issue); // fetching activity this.fetchIssueActivity(); } catch { From eb395926c0fda5441fc5a4e3b383090d53605476 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 22 Oct 2024 20:23:06 +0530 Subject: [PATCH 4/4] chore: intake issue navigation improvement --- web/core/components/issues/description-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/core/components/issues/description-input.tsx b/web/core/components/issues/description-input.tsx index 4562b4a0a06..7f8ce330f48 100644 --- a/web/core/components/issues/description-input.tsx +++ b/web/core/components/issues/description-input.tsx @@ -87,7 +87,7 @@ export const IssueDescriptionInput: FC = observer((p const debouncedHandleDescriptionFormSubmit = debounce(async (data: Partial, _issueId: string) => { await handleDescriptionFormSubmit(data, _issueId); setIsSubmitting("submitted"); - }, 10000); + }, 1500); const debouncedFormSave = useCallback( (_issueId: string) =>