From ef5a09deba7c0ca9801d638cbe8622b3c0530f3a Mon Sep 17 00:00:00 2001 From: Rahul R Date: Mon, 22 Jan 2024 13:09:31 +0530 Subject: [PATCH] change store computed actions to computed functions from mobx-utils --- web/store/application/event-tracker.store.ts | 2 +- web/store/application/router.store.ts | 2 +- web/store/cycle.store.ts | 16 +++++++------- web/store/dashboard.store.ts | 7 +++---- web/store/global-view.store.ts | 10 ++++----- web/store/inbox/inbox.store.ts | 7 +++---- web/store/inbox/inbox_issue.store.ts | 7 ++++--- web/store/issue/issue.store.ts | 9 ++++---- web/store/member/workspace-member.store.ts | 22 ++++++++------------ web/store/module.store.ts | 10 ++++----- web/store/project-view.store.ts | 5 ++--- web/store/project/project.store.ts | 2 +- web/store/workspace/api-token.store.ts | 7 +++---- web/store/workspace/webhook.store.ts | 5 ++--- 14 files changed, 49 insertions(+), 62 deletions(-) diff --git a/web/store/application/event-tracker.store.ts b/web/store/application/event-tracker.store.ts index feae82a0c..cc0ac22b2 100644 --- a/web/store/application/event-tracker.store.ts +++ b/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; diff --git a/web/store/application/router.store.ts b/web/store/application/router.store.ts index 3c843cc73..c39a87904 100644 --- a/web/store/application/router.store.ts +++ b/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, diff --git a/web/store/cycle.store.ts b/web/store/cycle.store.ts index c8ab68f50..cb0e76f33 100644 --- a/web/store/cycle.store.ts +++ b/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 => - this.activeCycleIdMap?.[cycleId] && this.cycleMap?.[cycleId] ? this.cycleMap?.[cycleId] : null; + getActiveCycleById = computedFn((cycleId: string): ICycle | 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 diff --git a/web/store/dashboard.store.ts b/web/store/dashboard.store.ts index 0d8bba041..c2f9c8545 100644 --- a/web/store/dashboard.store.ts +++ b/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 diff --git a/web/store/global-view.store.ts b/web/store/global-view.store.ts index 524779697..65aedadb5 100644 --- a/web/store/global-view.store.ts +++ b/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 diff --git a/web/store/inbox/inbox.store.ts b/web/store/inbox/inbox.store.ts index 58b7405b0..b4358c236 100644 --- a/web/store/inbox/inbox.store.ts +++ b/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 diff --git a/web/store/inbox/inbox_issue.store.ts b/web/store/inbox/inbox_issue.store.ts index 1db9f6fef..54dd2fbf3 100644 --- a/web/store/inbox/inbox_issue.store.ts +++ b/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 diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts index 68f1e51db..f31c8f2f6 100644 --- a/web/store/issue/issue.store.ts +++ b/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 | 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; - }; + }); } diff --git a/web/store/member/workspace-member.store.ts b/web/store/member/workspace-member.store.ts index 52c0b97cc..ff65d0eb9 100644 --- a/web/store/member/workspace-member.store.ts +++ b/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 diff --git a/web/store/module.store.ts b/web/store/module.store.ts index f37d41eaa..ff864310a 100644 --- a/web/store/module.store.ts +++ b/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 diff --git a/web/store/project-view.store.ts b/web/store/project-view.store.ts index 9fa633612..39778f9b7 100644 --- a/web/store/project-view.store.ts +++ b/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 diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts index b19c4d5f3..b7cc28a4f 100644 --- a/web/store/project/project.store.ts +++ b/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, diff --git a/web/store/workspace/api-token.store.ts b/web/store/workspace/api-token.store.ts index 220fab266..f0772933d 100644 --- a/web/store/workspace/api-token.store.ts +++ b/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 diff --git a/web/store/workspace/webhook.store.ts b/web/store/workspace/webhook.store.ts index fbe8b179f..5657f341e 100644 --- a/web/store/workspace/webhook.store.ts +++ b/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