From 7a47ce9d1d2cfc940e8e59df709e4db701cc3803 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 24 May 2024 15:59:41 +0530
Subject: [PATCH] [WEB-1398] fix: quick add issue flicker for cycle and module
 grouping (#4579)

* utilize optimistic updates to fix quick add issue flicker

* add comments
---
 web/store/issue/cycle/issue.store.ts         | 20 ++++++++-------
 web/store/issue/module/issue.store.ts        | 14 +++++-----
 web/store/issue/project-views/issue.store.ts | 25 ++++++++++--------
 web/store/issue/project/issue.store.ts       | 27 ++++++++++++--------
 4 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/web/store/issue/cycle/issue.store.ts b/web/store/issue/cycle/issue.store.ts
index 3632d03f7..f537daca2 100644
--- a/web/store/issue/cycle/issue.store.ts
+++ b/web/store/issue/cycle/issue.store.ts
@@ -293,24 +293,26 @@ export class CycleIssues extends IssueHelperStore implements ICycleIssues {
 
       const response = await this.createIssue(workspaceSlug, projectId, data, cycleId);
 
-      if (data.module_ids && data.module_ids.length > 0)
+      const quickAddIssueIndex = this.issues[cycleId].findIndex((_issueId) => _issueId === data.id);
+      if (quickAddIssueIndex >= 0) {
+        runInAction(() => {
+          this.issues[cycleId].splice(quickAddIssueIndex, 1);
+          this.rootIssueStore.issues.removeIssue(data.id);
+        });
+      }
+
+      if (data.module_ids && data.module_ids.length > 0) {
         await this.rootStore.moduleIssues.changeModulesInIssue(
           workspaceSlug,
           projectId,
           response.id,
           data.module_ids,
           []
-        );
+        )
+      }
 
       this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
 
-      const quickAddIssueIndex = this.issues[cycleId].findIndex((_issueId) => _issueId === data.id);
-      if (quickAddIssueIndex >= 0)
-        runInAction(() => {
-          this.issues[cycleId].splice(quickAddIssueIndex, 1);
-          this.rootIssueStore.issues.removeIssue(data.id);
-        });
-
       return response;
     } catch (error) {
       if (cycleId) this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
diff --git a/web/store/issue/module/issue.store.ts b/web/store/issue/module/issue.store.ts
index 8a04d90b8..24d27769d 100644
--- a/web/store/issue/module/issue.store.ts
+++ b/web/store/issue/module/issue.store.ts
@@ -294,17 +294,19 @@ export class ModuleIssues extends IssueHelperStore implements IModuleIssues {
 
       const response = await this.createIssue(workspaceSlug, projectId, data, moduleId);
 
-      if (data.cycle_id && data.cycle_id !== "")
-        await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, data.cycle_id, [response.id]);
-
-      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
-
       const quickAddIssueIndex = this.issues[moduleId].findIndex((_issueId) => _issueId === data.id);
-      if (quickAddIssueIndex >= 0)
+      if (quickAddIssueIndex >= 0) {
         runInAction(() => {
           this.issues[moduleId].splice(quickAddIssueIndex, 1);
           this.rootIssueStore.issues.removeIssue(data.id);
         });
+      }
+
+      if (data.cycle_id && data.cycle_id !== "") {
+        await this.rootStore.cycleIssues.addCycleToIssue(workspaceSlug, projectId, data.cycle_id, response.id)
+      }
+
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
 
       return response;
     } catch (error) {
diff --git a/web/store/issue/project-views/issue.store.ts b/web/store/issue/project-views/issue.store.ts
index ce2c12654..f39bdd5a4 100644
--- a/web/store/issue/project-views/issue.store.ts
+++ b/web/store/issue/project-views/issue.store.ts
@@ -239,24 +239,27 @@ export class ProjectViewIssues extends IssueHelperStore implements IProjectViewI
 
       const response = await this.createIssue(workspaceSlug, projectId, data, viewId);
 
-      if (data.cycle_id && data.cycle_id !== "")
-        await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, data.cycle_id, [response.id]);
+      const quickAddIssueIndex = this.issues[viewId].findIndex((_issueId) => _issueId === data.id);
+      if (quickAddIssueIndex >= 0) {
+        runInAction(() => {
+          this.issues[viewId].splice(quickAddIssueIndex, 1);
+          this.rootIssueStore.issues.removeIssue(data.id);
+        });
+      }
 
-      if (data.module_ids && data.module_ids.length > 0)
+      if (data.cycle_id && data.cycle_id !== "") {
+        await this.rootStore.cycleIssues.addCycleToIssue(workspaceSlug, projectId, data.cycle_id, response.id)
+      }
+
+      if (data.module_ids && data.module_ids.length > 0) {
         await this.rootStore.moduleIssues.changeModulesInIssue(
           workspaceSlug,
           projectId,
           response.id,
           data.module_ids,
           []
-        );
-
-      const quickAddIssueIndex = this.issues[viewId].findIndex((_issueId) => _issueId === data.id);
-      if (quickAddIssueIndex >= 0)
-        runInAction(() => {
-          this.issues[viewId].splice(quickAddIssueIndex, 1);
-          this.rootIssueStore.issues.removeIssue(data.id);
-        });
+        )
+      }
 
       return response;
     } catch (error) {
diff --git a/web/store/issue/project/issue.store.ts b/web/store/issue/project/issue.store.ts
index 8591f494c..1e1f9a515 100644
--- a/web/store/issue/project/issue.store.ts
+++ b/web/store/issue/project/issue.store.ts
@@ -243,24 +243,29 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
 
       const response = await this.createIssue(workspaceSlug, projectId, data);
 
-      if (data.cycle_id && data.cycle_id !== "")
-        await this.rootStore.cycleIssues.addIssueToCycle(workspaceSlug, projectId, data.cycle_id, [response.id]);
+      const quickAddIssueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === data.id);
+      
+      if (quickAddIssueIndex >= 0) {
+        runInAction(() => {
+          this.issues[projectId].splice(quickAddIssueIndex, 1);
+          this.rootStore.issues.removeIssue(data.id);
+        });
+      }
 
-      if (data.module_ids && data.module_ids.length > 0)
+      //TODO: error handling needs to be improved for rare cases
+      if (data.cycle_id && data.cycle_id !== "") {
+        await this.rootStore.cycleIssues.addCycleToIssue(workspaceSlug, projectId, data.cycle_id, response.id)
+      }
+
+      if (data.module_ids && data.module_ids.length > 0) {
         await this.rootStore.moduleIssues.changeModulesInIssue(
           workspaceSlug,
           projectId,
           response.id,
           data.module_ids,
           []
-        );
-
-      const quickAddIssueIndex = this.issues[projectId].findIndex((_issueId) => _issueId === data.id);
-      if (quickAddIssueIndex >= 0)
-        runInAction(() => {
-          this.issues[projectId].splice(quickAddIssueIndex, 1);
-          this.rootStore.issues.removeIssue(data.id);
-        });
+        )
+      }
       return response;
     } catch (error) {
       this.fetchIssues(workspaceSlug, projectId, "mutation");