fix: optimistic update for instant operations

web/store/page.store.ts

@@ -214,26 +214,39 @@ export class PageStore implements IPageStore {
    * @param projectId
    * @param pageId
    */
-  addToFavorites = async (workspaceSlug: string, projectId: string, pageId: string) =>
-    await this.pageService.addPageToFavorites(workspaceSlug, projectId, pageId).then(() => {
+  addToFavorites = async (workspaceSlug: string, projectId: string, pageId: string) => {
+    try {
       runInAction(() => {
         set(this.pages, [pageId, "is_favorite"], true);
       });
-    });
+      await this.pageService.addPageToFavorites(workspaceSlug, projectId, pageId);
+    } catch (error) {
+      runInAction(() => {
+        set(this.pages, [pageId, "is_favorite"], false);
+      });
+      throw error;
+    }
+  };
 
   /**
    * Remove page from the users favorites list
    * @param workspaceSlug
    * @param projectId
    * @param pageId
    */
-  removeFromFavorites = async (workspaceSlug: string, projectId: string, pageId: string) =>
-    await this.pageService.removePageFromFavorites(workspaceSlug, projectId, pageId).then(() => {
+  removeFromFavorites = async (workspaceSlug: string, projectId: string, pageId: string) => {
+    try {
       runInAction(() => {
         set(this.pages, [pageId, "is_favorite"], false);
       });
-    });
-
+      await this.pageService.removePageFromFavorites(workspaceSlug, projectId, pageId);
+    } catch (error) {
+      runInAction(() => {
+        set(this.pages, [pageId, "is_favorite"], true);
+      });
+      throw error;
+    }
+  };
   /**
    * Creates a new page using the api and updated the local state in store
    * @param workspaceSlug
@@ -287,12 +300,19 @@ export class PageStore implements IPageStore {
    * @param pageId
    * @returns
    */
-  makePublic = async (workspaceSlug: string, projectId: string, pageId: string) =>
-    await this.pageService.patchPage(workspaceSlug, projectId, pageId, { access: 0 }).then(() => {
+  makePublic = async (workspaceSlug: string, projectId: string, pageId: string) => {
+    try {
       runInAction(() => {
         set(this.pages, [pageId, "access"], 0);
       });
-    });
+      await this.pageService.patchPage(workspaceSlug, projectId, pageId, { access: 0 });
+    } catch (error) {
+      runInAction(() => {
+        set(this.pages, [pageId, "access"], 1);
+      });
+      throw error;
+    }
+  };
 
   /**
    * Make a page private
@@ -301,12 +321,19 @@ export class PageStore implements IPageStore {
    * @param pageId
    * @returns
    */
-  makePrivate = async (workspaceSlug: string, projectId: string, pageId: string) =>
-    await this.pageService.patchPage(workspaceSlug, projectId, pageId, { access: 1 }).then(() => {
+  makePrivate = async (workspaceSlug: string, projectId: string, pageId: string) => {
+    try {
       runInAction(() => {
         set(this.pages, [pageId, "access"], 1);
       });
-    });
+      await this.pageService.patchPage(workspaceSlug, projectId, pageId, { access: 1 });
+    } catch (error) {
+      runInAction(() => {
+        set(this.pages, [pageId, "access"], 0);
+      });
+      throw error;
+    }
+  };
 
   /**
    * Mark a page archived

web/store/state.store.ts

@@ -51,11 +51,13 @@ export class StateStore implements IStateStore {
       groupedProjectStates: computed,
       // computed actions
       getProjectStates: action,
-      // actions
+      // fetch action
       fetchProjectStates: action,
+      // CRUD actions
       createState: action,
       updateState: action,
       deleteState: action,
+      // state actions
       markStateAsDefault: action,
       moveStatePosition: action,
     });

web/store/workspace/api-token.store.ts

@@ -32,17 +32,17 @@ export class ApiTokenStore implements IApiTokenStore {
       apiTokens: observable,
       // computed actions
       getApiTokenById: action,
-      // actions
+      // fetch actions
       fetchApiTokens: action,
       fetchApiTokenDetails: action,
+      // CRUD actions
       createApiToken: action,
       deleteApiToken: action,
     });
-
-    // services
-    this.apiTokenService = new APITokenService();
     // root store
     this.rootStore = _rootStore;
+    // services
+    this.apiTokenService = new APITokenService();
   }
 
   /**
@@ -107,7 +107,6 @@ export class ApiTokenStore implements IApiTokenStore {
     await this.apiTokenService.deleteApiToken(workspaceSlug, tokenId).then(() => {
       const updatedApiTokens = { ...this.apiTokens };
       delete updatedApiTokens[tokenId];
-
       runInAction(() => {
         this.apiTokens = updatedApiTokens;
       });

web/store/workspace/index.ts

@@ -148,9 +148,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     await this.workspaceService.deleteWorkspace(workspaceSlug).then(() => {
       const updatedWorkspacesList = this.workspaces;
       const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
-
       delete updatedWorkspacesList[`${workspaceId}`];
-
       runInAction(() => {
         this.workspaces = updatedWorkspacesList;
       });

web/store/workspace/webhook.store.ts

@@ -22,6 +22,7 @@ export interface IWebhookStore {
   ) => Promise<{ webHook: IWebhook; secretKey: string | null }>;
   updateWebhook: (workspaceSlug: string, webhookId: string, data: Partial<IWebhook>) => Promise<IWebhook>;
   removeWebhook: (workspaceSlug: string, webhookId: string) => Promise<void>;
+  // secret key actions
   regenerateSecretKey: (
     workspaceSlug: string,
     webhookId: string
@@ -47,12 +48,14 @@ export class WebhookStore implements IWebhookStore {
       currentWebhook: computed,
       // computed actions
       getWebhookById: action,
-      // actions
+      // fetch actions
       fetchWebhooks: action,
       fetchWebhookById: action,
+      // CRUD actions
       createWebhook: action,
       updateWebhook: action,
       removeWebhook: action,
+      // secret key actions
       regenerateSecretKey: action,
       clearSecretKey: action,
     });