change store computed actions to computed functions from mobx-utils

web/store/application/event-tracker.store.ts

@@ -19,7 +19,7 @@ export class EventTrackerStore implements IEventTrackerStore {
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       trackElement: observable,
-      setTrackElement: action,
+      setTrackElement: action.bound,
       postHogEventTracker: action,
     });
     this.rootStore = _rootStore;

web/store/application/router.store.ts

@@ -29,7 +29,7 @@ export class RouterStore implements IRouterStore {
       // observables
       query: observable,
       // actions
-      setQuery: action,
+      setQuery: action.bound,
       //computed
       workspaceSlug: computed,
       projectId: computed,

web/store/cycle.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import { isFuture, isPast } from "date-fns";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
@@ -74,10 +75,6 @@ export class CycleStore implements ICycleStore {
       currentProjectIncompleteCycleIds: computed,
       currentProjectDraftCycleIds: computed,
       currentProjectActiveCycleId: computed,
-      // computed actions
-      getCycleById: action,
-      getActiveCycleById: action,
-      getProjectCycleIds: action,
       // actions
       fetchAllCycles: action,
       fetchActiveCycle: action,
@@ -184,28 +181,29 @@ export class CycleStore implements ICycleStore {
    * @param cycleId
    * @returns
    */
-  getCycleById = (cycleId: string): ICycle | null => this.cycleMap?.[cycleId] ?? null;
+  getCycleById = computedFn((cycleId: string): ICycle | null => this.cycleMap?.[cycleId] ?? null);
 
   /**
    * @description returns active cycle details by cycle id
    * @param cycleId
    * @returns
    */
-  getActiveCycleById = (cycleId: string): ICycle | null =>
+  getActiveCycleById = computedFn((cycleId: string): ICycle | null =>
-    this.activeCycleIdMap?.[cycleId] && this.cycleMap?.[cycleId] ? this.cycleMap?.[cycleId] : null;
+    this.activeCycleIdMap?.[cycleId] && this.cycleMap?.[cycleId] ? this.cycleMap?.[cycleId] : null
+  );
 
   /**
    * @description returns list of cycle ids of the project id passed as argument
    * @param projectId
    */
-  getProjectCycleIds = (projectId: string): string[] | null => {
+  getProjectCycleIds = computedFn((projectId: string): string[] | null => {
     if (!this.fetchedMap[projectId]) return null;
 
     let cycles = Object.values(this.cycleMap ?? {}).filter((c) => c.project === projectId);
     cycles = sortBy(cycles, [(c) => !c.is_favorite, (c) => c.name.toLowerCase()]);
     const cycleIds = cycles.map((c) => c.id);
     return cycleIds || null;
-  };
+  });
 
   /**
    * @description validates cycle dates

web/store/dashboard.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 // services
 import { DashboardService } from "services/dashboard.service";
@@ -74,8 +75,6 @@ export class DashboardStore implements IDashboardStore {
       widgetStats: observable,
       // computed
       homeDashboardWidgets: computed,
-      // computed actions
-      getWidgetDetails: action,
       // fetch actions
       fetchHomeDashboardWidgets: action,
       fetchWidgetStats: action,
@@ -109,11 +108,11 @@ export class DashboardStore implements IDashboardStore {
    * @param widgetId
    * @returns widget details
    */
-  getWidgetDetails = (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => {
+  getWidgetDetails = computedFn((workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => {
     const widgets = this.widgetDetails?.[workspaceSlug]?.[dashboardId];
     if (!widgets) return undefined;
     return widgets.find((widget) => widget.key === widgetKey);
-  };
+  });
 
   /**
    * @description fetch home dashboard details and widgets

web/store/global-view.store.ts

@@ -1,4 +1,5 @@
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
+import { computedFn } from "mobx-utils";
 import { set } from "lodash";
 // services
 import { WorkspaceService } from "services/workspace.service";
@@ -37,9 +38,6 @@ export class GlobalViewStore implements IGlobalViewStore {
       globalViewMap: observable,
       // computed
       currentWorkspaceViews: computed,
-      // computed actions
-      getSearchedViews: action,
-      getViewDetailsById: action,
       // actions
       fetchAllGlobalViews: action,
       fetchGlobalViewDetails: action,
@@ -73,7 +71,7 @@ export class GlobalViewStore implements IGlobalViewStore {
    * @param searchQuery
    * @returns
    */
-  getSearchedViews = (searchQuery: string) => {
+  getSearchedViews = computedFn((searchQuery: string) => {
     const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
     if (!currentWorkspaceDetails) return null;
 
@@ -84,13 +82,13 @@ export class GlobalViewStore implements IGlobalViewStore {
           this.globalViewMap[viewId]?.name?.toLowerCase().includes(searchQuery.toLowerCase())
       ) ?? null
     );
-  };
+  });
 
   /**
    * @description returns view details for given viewId
    * @param viewId
    */
-  getViewDetailsById = (viewId: string): IWorkspaceView | null => this.globalViewMap[viewId] ?? null;
+  getViewDetailsById = computedFn((viewId: string): IWorkspaceView | null => this.globalViewMap[viewId] ?? null);
 
   /**
    * @description fetch all global views for given workspace

web/store/inbox/inbox.store.ts

@@ -1,4 +1,5 @@
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
+import { computedFn } from "mobx-utils";
 import { set } from "lodash";
 // services
 import { InboxService } from "services/inbox.service";
@@ -43,8 +44,6 @@ export class InboxStore implements IInboxStore {
       inboxDetails: observable,
       // computed
       isInboxEnabled: computed,
-      // computed actions
-      getInboxId: action,
       // actions
       fetchInboxesList: action,
     });
@@ -69,11 +68,11 @@ export class InboxStore implements IInboxStore {
   /**
    * Returns the inbox Id belongs to a specific project
    */
-  getInboxId = (projectId: string) => {
+  getInboxId = computedFn((projectId: string) => {
     const projectDetails = this.rootStore.projectRoot.project.getProjectById(projectId);
     if (!projectDetails || !projectDetails.inbox_view) return null;
     return this.inboxesList[projectId]?.[0]?.id ?? null;
-  };
+  });
 
   /**
    * Fetches the inboxes list belongs to a specific project

web/store/inbox/inbox_issue.store.ts

@@ -1,4 +1,5 @@
 import { observable, action, makeObservable, runInAction, autorun, computed } from "mobx";
+import { computedFn } from "mobx-utils";
 import { set } from "lodash";
 // services
 import { InboxService } from "services/inbox.service";
@@ -61,8 +62,6 @@ export class InboxIssuesStore implements IInboxIssuesStore {
       issueMap: observable,
       // computed
       currentInboxIssueIds: computed,
-      // computed actions
-      getIssueById: action,
       // fetch actions
       fetchIssues: action,
       fetchIssueDetails: action,
@@ -99,7 +98,9 @@ export class InboxIssuesStore implements IInboxIssuesStore {
   /**
    * Returns the issue details belongs to a specific inbox issue
    */
-  getIssueById = (inboxId: string, issueId: string): IInboxIssue | null => this.issueMap?.[inboxId]?.[issueId] ?? null;
+  getIssueById = computedFn(
+    (inboxId: string, issueId: string): IInboxIssue | null => this.issueMap?.[inboxId]?.[issueId] ?? null
+  );
 
   /**
    * Fetches issues of a specific inbox and adds it to the store

web/store/issue/issue.store.ts

@@ -2,6 +2,7 @@ import set from "lodash/set";
 import isEmpty from "lodash/isEmpty";
 // store
 import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 // types
 import { TIssue } from "@plane/types";
 
@@ -80,17 +81,17 @@ export class IssueStore implements IIssueStore {
    * @param {string} issueId
    * @returns {TIssue | undefined}
    */
-  getIssueById = (issueId: string) => {
+  getIssueById = computedFn((issueId: string) => {
     if (!issueId || isEmpty(this.issuesMap) || !this.issuesMap[issueId]) return undefined;
     return this.issuesMap[issueId];
-  };
+  });
 
   /**
    * @description This method will return the issues from the issuesMap
    * @param {string[]} issueIds
    * @returns {Record<string, TIssue> | undefined}
    */
-  getIssuesByIds = (issueIds: string[]) => {
+  getIssuesByIds = computedFn((issueIds: string[]) => {
     if (!issueIds || issueIds.length <= 0 || isEmpty(this.issuesMap)) return undefined;
     const filteredIssues: { [key: string]: TIssue } = {};
     Object.values(this.issuesMap).forEach((issue) => {
@@ -99,5 +100,5 @@ export class IssueStore implements IIssueStore {
       }
     });
     return isEmpty(filteredIssues) ? undefined : filteredIssues;
-  };
+  });
 }

web/store/member/workspace-member.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 // services
@@ -67,11 +68,6 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       // computed
       workspaceMemberIds: computed,
       workspaceMemberInvitationIds: computed,
-      // computed actions
-      getSearchedWorkspaceMemberIds: action,
-      getSearchedWorkspaceInvitationIds: action,
-      getWorkspaceMemberDetails: action,
-      getWorkspaceInvitationDetails: action,
       // actions
       fetchWorkspaceMembers: action,
       updateMember: action,
@@ -114,7 +110,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @description get the list of all the user ids that match the search query of all the members of the current workspace
    * @param searchQuery
    */
-  getSearchedWorkspaceMemberIds = (searchQuery: string) => {
+  getSearchedWorkspaceMemberIds = computedFn((searchQuery: string) => {
     const workspaceSlug = this.routerStore.workspaceSlug;
     if (!workspaceSlug) return null;
     const workspaceMemberIds = this.workspaceMemberIds;
@@ -128,13 +124,13 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       return memberSearchQuery.toLowerCase()?.includes(searchQuery.toLowerCase());
     });
     return searchedWorkspaceMemberIds;
-  };
+  });
 
   /**
    * @description get the list of all the invitation ids that match the search query of all the member invitations of the current workspace
    * @param searchQuery
    */
-  getSearchedWorkspaceInvitationIds = (searchQuery: string) => {
+  getSearchedWorkspaceInvitationIds = computedFn((searchQuery: string) => {
     const workspaceSlug = this.routerStore.workspaceSlug;
     if (!workspaceSlug) return null;
     const workspaceMemberInvitationIds = this.workspaceMemberInvitationIds;
@@ -146,13 +142,13 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       return invitationSearchQuery.toLowerCase()?.includes(searchQuery.toLowerCase());
     });
     return searchedWorkspaceMemberInvitationIds;
-  };
+  });
 
   /**
    * @description get the details of a workspace member
    * @param userId
    */
-  getWorkspaceMemberDetails = (userId: string) => {
+  getWorkspaceMemberDetails = computedFn((userId: string) => {
     const workspaceSlug = this.routerStore.workspaceSlug;
     if (!workspaceSlug) return null;
     const workspaceMember = this.workspaceMemberMap?.[workspaceSlug]?.[userId];
@@ -164,14 +160,14 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
       member: this.memberRoot?.memberMap?.[workspaceMember.member],
     };
     return memberDetails;
-  };
+  });
 
   /**
    * @description get the details of a workspace member invitation
    * @param workspaceSlug
    * @param memberId
    */
-  getWorkspaceInvitationDetails = (invitationId: string) => {
+  getWorkspaceInvitationDetails = computedFn((invitationId: string) => {
     const workspaceSlug = this.routerStore.workspaceSlug;
     if (!workspaceSlug) return null;
     const invitationsList = this.workspaceMemberInvitations?.[workspaceSlug];
@@ -179,7 +175,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
 
     const invitation = invitationsList.find((inv) => inv.id === invitationId);
     return invitation ?? null;
-  };
+  });
 
   /**
    * @description fetch all the members of a workspace

web/store/module.store.ts

@@ -1,4 +1,5 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
 // services
@@ -68,9 +69,6 @@ export class ModulesStore implements IModuleStore {
       fetchedMap: observable,
       // computed
       projectModuleIds: computed,
-      // computed actions
-      getModuleById: action,
-      getProjectModuleIds: action,
       // actions
       fetchModules: action,
       fetchModuleDetails: action,
@@ -109,20 +107,20 @@ export class ModulesStore implements IModuleStore {
    * @param moduleId
    * @returns IModule | null
    */
-  getModuleById = (moduleId: string) => this.moduleMap?.[moduleId] || null;
+  getModuleById = computedFn((moduleId: string) => this.moduleMap?.[moduleId] || null);
 
   /**
    * @description returns list of module ids of the project id passed as argument
    * @param projectId
    */
-  getProjectModuleIds = (projectId: string) => {
+  getProjectModuleIds = computedFn((projectId: string) => {
     if (!this.fetchedMap[projectId]) return null;
 
     let projectModules = Object.values(this.moduleMap).filter((m) => m.project === projectId);
     projectModules = sortBy(projectModules, [(m) => !m.is_favorite, (m) => m.name.toLowerCase()]);
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds;
-  };
+  });
 
   /**
    * @description fetch all modules

web/store/project-view.store.ts

@@ -1,5 +1,6 @@
 import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
+import { computedFn } from "mobx-utils";
 // services
 import { ViewService } from "services/view.service";
 import { RootStore } from "store/root.store";
@@ -49,8 +50,6 @@ export class ProjectViewStore implements IProjectViewStore {
       fetchedMap: observable,
       // computed
       projectViewIds: computed,
-      // computed actions
-      getViewById: action,
       // fetch actions
       fetchViews: action,
       fetchViewDetails: action,
@@ -81,7 +80,7 @@ export class ProjectViewStore implements IProjectViewStore {
   /**
    * Returns view details by id
    */
-  getViewById = (viewId: string) => this.viewMap?.[viewId] ?? null;
+  getViewById = computedFn((viewId: string) => this.viewMap?.[viewId] ?? null);
 
   /**
    * Fetches views for current project

web/store/project/project.store.ts

@@ -64,7 +64,7 @@ export class ProjectStore implements IProjectStore {
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
       // actions
-      setSearchQuery: action,
+      setSearchQuery: action.bound,
       // fetch actions
       fetchProjects: action,
       fetchProjectDetails: action,

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

@@ -1,5 +1,6 @@
 // mobx
 import { action, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import { APITokenService } from "services/api_token.service";
 import { RootStore } from "../root.store";
 // types
@@ -30,8 +31,6 @@ export class ApiTokenStore implements IApiTokenStore {
     makeObservable(this, {
       // observables
       apiTokens: observable,
-      // computed actions
-      getApiTokenById: action,
       // fetch actions
       fetchApiTokens: action,
       fetchApiTokenDetails: action,
@@ -49,10 +48,10 @@ export class ApiTokenStore implements IApiTokenStore {
    * get API token by id
    * @param apiTokenId
    */
-  getApiTokenById = (apiTokenId: string) => {
+  getApiTokenById = computedFn((apiTokenId: string) => {
     if (!this.apiTokens) return null;
     return this.apiTokens[apiTokenId] || null;
-  };
+  });
 
   /**
    * fetch all the API tokens for a workspace

web/store/workspace/webhook.store.ts

@@ -1,5 +1,6 @@
 // mobx
 import { action, observable, makeObservable, computed, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
 import { IWebhook } from "@plane/types";
 import { WebhookService } from "services/webhook.service";
 import { RootStore } from "../root.store";
@@ -46,8 +47,6 @@ export class WebhookStore implements IWebhookStore {
       webhookSecretKey: observable.ref,
       // computed
       currentWebhook: computed,
-      // computed actions
-      getWebhookById: action,
       // fetch actions
       fetchWebhooks: action,
       fetchWebhookById: action,
@@ -80,7 +79,7 @@ export class WebhookStore implements IWebhookStore {
    * get webhook info from the object of webhooks in the store using webhook id
    * @param webhookId
    */
-  getWebhookById = (webhookId: string) => this.webhooks?.[webhookId] || null;
+  getWebhookById = computedFn((webhookId: string) => this.webhooks?.[webhookId] || null);
 
   /**
    * fetch all the webhooks for a workspace