fix: added optimistic addition to the store

makeplane · SatishGandham · Aug 4, 2024 · Jul 23, 2024 · Jul 25, 2024 · Jul 25, 2024
commit eff77c3bfe0bbc8bb44cbe317ddf1f88a67ab018
diff --git a/web/core/store/cycle.store.ts b/web/core/store/cycle.store.ts
@@ -556,6 +556,7 @@ export class CycleStore implements ICycleStore {
         entity_type: "cycle",
         entity_identifier: cycleId,
         project_id: projectId,
+        entity_data: { name: this.cycleMap[cycleId].name || "" },
       });
       return response;
     } catch (error) {

diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts
@@ -1,6 +1,7 @@
 import { uniqBy } from "lodash";
 import set from "lodash/set";
 import { action, observable, makeObservable, runInAction } from "mobx";
+import { v4 as uuidv4 } from "uuid";
 import { IFavorite } from "@plane/types";
 import { FavoriteService } from "@/services/favorite";
 
@@ -62,16 +63,31 @@ export class FavoriteStore implements IFavoriteStore {
    * @returns Promise<IFavorite>
    */
   addFavorite = async (workspaceSlug: string, data: Partial<IFavorite>) => {
+    const id = uuidv4();
+    data = { ...data, parent: null, is_folder: data.entity_type === "folder" };
+
     try {
-      data = { ...data, parent: null, is_folder: data.entity_type === "folder" };
+      // optimistic addition
+      runInAction(() => {
+        set(this.favoriteMap, [id], data);
+        data.entity_identifier && set(this.entityMap, [data.entity_identifier], data);
+        this.favoriteIds = [id, ...this.favoriteIds];
+      });
       const response = await this.favoriteService.addFavorite(workspaceSlug, data);
+
+      // overwrite the temp id
       runInAction(() => {
+        delete this.favoriteMap[id];
         set(this.favoriteMap, [response.id], response);
         response.entity_identifier && set(this.entityMap, [response.entity_identifier], response);
-        this.favoriteIds = [response.id, ...this.favoriteIds];
+        this.favoriteIds = [response.id, ...this.favoriteIds.filter((favId) => favId !== id)];
       });
       return response;
     } catch (error) {
+      delete this.favoriteMap[id];
+      data.entity_identifier && delete this.entityMap[data.entity_identifier];
+      this.favoriteIds = this.favoriteIds.filter((favId) => favId !== id);
+
       console.error("Failed to create favorite from favorite store");
       throw error;
     }

diff --git a/web/core/store/module.store.ts b/web/core/store/module.store.ts
@@ -490,6 +490,7 @@ export class ModulesStore implements IModuleStore {
         entity_type: "module",
         entity_identifier: moduleId,
         project_id: projectId,
+        entity_data: { name: this.moduleMap[moduleId].name || "" },
       });
     } catch (error) {
       console.error("Failed to add module to favorites in module store", error);

diff --git a/web/core/store/pages/page.ts b/web/core/store/pages/page.ts
@@ -484,6 +484,7 @@ export class Page implements IPage {
         entity_type: "page",
         entity_identifier: this.id,
         project_id: projectId,
+        entity_data: { name: this.name || "" },
       })
       .catch((error) => {
         runInAction(() => {

diff --git a/web/core/store/project-view.store.ts b/web/core/store/project-view.store.ts
@@ -362,6 +362,7 @@ export class ProjectViewStore implements IProjectViewStore {
         entity_type: "view",
         entity_identifier: viewId,
         project_id: projectId,
+        entity_data: { name: this.viewMap[viewId].name || "" },
       });
     } catch (error) {
       console.error("Failed to add view to favorites in view store", error);

diff --git a/web/core/store/project/project.store.ts b/web/core/store/project/project.store.ts
@@ -283,6 +283,7 @@ export class ProjectStore implements IProjectStore {
         entity_type: "project",
         entity_identifier: projectId,
         project_id: projectId,
+        entity_data: { name: this.projectMap[projectId].name || "" },
       });
       return response;
     } catch (error) {