[WEB-1398] fix: quick add issue flicker for cycle and module grouping (…

…#4579) * utilize optimistic updates to fix quick add issue flicker * add comments
makeplane · May 24, 2024 · 7a47ce9 · 7a47ce9
1 parent 9f573d4
commit 7a47ce9
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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.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)
+      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
@@ -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);
+        });
+      }
+
+      //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)
+      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");