From 0ef2200465a65e454b0dd2721e229e9eacc3023d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 9 Oct 2023 15:59:50 +0530 Subject: [PATCH] refactor: change naming convention (#2383) --- web/components/headers/module-issues.tsx | 8 +-- .../filters/applied-filters/module-root.tsx | 10 +-- .../issue-layouts/module-all-layouts.tsx | 11 ++- web/constants/issue.ts | 2 - web/store/module_filters.ts | 68 +++++++++++++------ web/store/modules.ts | 2 - 6 files changed, 66 insertions(+), 35 deletions(-) diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx index 35a635f27..cf845e258 100644 --- a/web/components/headers/module-issues.tsx +++ b/web/components/headers/module-issues.tsx @@ -36,18 +36,18 @@ export const ModuleIssuesHeader: React.FC = observer(() => { (key: keyof IIssueFilterOptions, value: string | string[]) => { if (!workspaceSlug || !projectId || !moduleId) return; - const newValues = moduleFilterStore.userModuleFilters?.[key] ?? []; + const newValues = moduleFilterStore.moduleFilters?.[key] ?? []; if (Array.isArray(value)) { value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); }); } else { - if (moduleFilterStore.userModuleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); + if (moduleFilterStore.moduleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); else newValues.push(value); } - moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { + moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { [key]: newValues, }); }, @@ -76,7 +76,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => { /> { const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore(); - const userFilters = moduleFilterStore.userModuleFilters; + const userFilters = moduleFilterStore.moduleFilters; // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; @@ -31,17 +31,17 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => { // remove all values of the key if value is null if (!value) { - moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { + moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { [key]: null, }); return; } // remove the passed value from the key - let newValues = moduleFilterStore.userModuleFilters?.[key] ?? []; + let newValues = moduleFilterStore.moduleFilters?.[key] ?? []; newValues = newValues.filter((val) => val !== value); - moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { + moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), { [key]: newValues, }); }; @@ -54,7 +54,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => { newFilters[key as keyof IIssueFilterOptions] = null; }); - moduleFilterStore.updateUserModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), { + moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), { ...newFilters, }); }; diff --git a/web/components/issues/issue-layouts/module-all-layouts.tsx b/web/components/issues/issue-layouts/module-all-layouts.tsx index f7f0b2b43..bfcf80d4c 100644 --- a/web/components/issues/issue-layouts/module-all-layouts.tsx +++ b/web/components/issues/issue-layouts/module-all-layouts.tsx @@ -18,9 +18,14 @@ export const ModuleAllLayouts: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query; - const { module: moduleStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore(); + const { + module: moduleStore, + moduleFilter: moduleFilterStore, + project: projectStore, + issueFilter: issueFilterStore, + } = useMobxStore(); - useSWR(workspaceSlug && projectId ? `MODULE_ISSUES` : null, async () => { + useSWR(workspaceSlug && projectId && moduleId ? `MODULE_ISSUES_${moduleId.toString()}` : null, async () => { if (workspaceSlug && projectId && moduleId) { await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString()); @@ -28,8 +33,8 @@ export const ModuleAllLayouts: React.FC = observer(() => { await projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString()); await projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString()); - await moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString()); await moduleStore.fetchModuleIssues(workspaceSlug.toString(), projectId.toString(), moduleId.toString()); + await moduleFilterStore.fetchModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString()); } }); diff --git a/web/constants/issue.ts b/web/constants/issue.ts index 282f0ef9a..1c69858ae 100644 --- a/web/constants/issue.ts +++ b/web/constants/issue.ts @@ -225,7 +225,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: { display_properties: true, display_filters: { group_by: ["state_detail.group", "project", "priority", "labels", null], - sub_group_by: ["state_detail.group", "project", "priority", "labels", null], order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"], type: [null, "active", "backlog"], }, @@ -255,7 +254,6 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: { display_properties: true, display_filters: { group_by: ["state", "priority", "labels", "assignees", "created_by", null], - sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null], order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"], type: [null, "active", "backlog"], }, diff --git a/web/store/module_filters.ts b/web/store/module_filters.ts index 7166b7eea..b5b0ac18f 100644 --- a/web/store/module_filters.ts +++ b/web/store/module_filters.ts @@ -6,16 +6,17 @@ import { ModuleService } from "services/modules.service"; import { handleIssueQueryParamsByLayout } from "helpers/issue.helper"; // types import { RootStore } from "./root"; -import { IIssueFilterOptions, TIssueParams } from "types"; +import { IIssueFilterOptions, IModule, TIssueParams } from "types"; export interface IModuleFilterStore { loader: boolean; error: any | null; - userModuleFilters: IIssueFilterOptions; + moduleFilters: IIssueFilterOptions; defaultFilters: IIssueFilterOptions; // action - updateUserModuleFilters: ( + fetchModuleFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise; + updateModuleFilters: ( workspaceSlug: string, projectId: string, moduleId: string, @@ -31,7 +32,7 @@ class ModuleFilterStore implements IModuleFilterStore { error: any | null = null; // observables - userModuleFilters: IIssueFilterOptions = {}; + moduleFilters: IIssueFilterOptions = {}; defaultFilters: IIssueFilterOptions = {}; // root store @@ -48,10 +49,11 @@ class ModuleFilterStore implements IModuleFilterStore { // observables defaultFilters: observable.ref, - userModuleFilters: observable.ref, + moduleFilters: observable.ref, // actions - updateUserModuleFilters: action, + fetchModuleFilters: action, + updateModuleFilters: action, // computed appliedFilters: computed, @@ -77,17 +79,17 @@ class ModuleFilterStore implements IModuleFilterStore { get appliedFilters(): TIssueParams[] | null { const userDisplayFilters = this.rootStore.issueFilter.userDisplayFilters; - if (!this.userModuleFilters || !userDisplayFilters) return null; + if (!this.moduleFilters || !userDisplayFilters) return null; let filteredRouteParams: any = { - priority: this.userModuleFilters?.priority || undefined, - state_group: this.userModuleFilters?.state_group || undefined, - state: this.userModuleFilters?.state || undefined, - assignees: this.userModuleFilters?.assignees || undefined, - created_by: this.userModuleFilters?.created_by || undefined, - labels: this.userModuleFilters?.labels || undefined, - start_date: this.userModuleFilters?.start_date || undefined, - target_date: this.userModuleFilters?.target_date || undefined, + priority: this.moduleFilters?.priority || undefined, + state_group: this.moduleFilters?.state_group || undefined, + state: this.moduleFilters?.state || undefined, + assignees: this.moduleFilters?.assignees || undefined, + created_by: this.moduleFilters?.created_by || undefined, + labels: this.moduleFilters?.labels || undefined, + start_date: this.moduleFilters?.start_date || undefined, + target_date: this.moduleFilters?.target_date || undefined, group_by: userDisplayFilters?.group_by || "state", order_by: userDisplayFilters?.order_by || "-created_at", sub_group_by: userDisplayFilters?.sub_group_by || undefined, @@ -106,20 +108,48 @@ class ModuleFilterStore implements IModuleFilterStore { return filteredRouteParams; } - updateUserModuleFilters = async ( + fetchModuleFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => { + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId); + + runInAction(() => { + this.moduleFilters = response.view_props?.filters ?? {}; + this.loader = false; + this.error = null; + }); + + return response; + } catch (error) { + console.error("Failed to fetch module details in module store", error); + + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; + + updateModuleFilters = async ( workspaceSlug: string, projectId: string, moduleId: string, filterToUpdate: Partial ) => { const newFilters = { - ...this.userModuleFilters, + ...this.moduleFilters, ...filterToUpdate, }; try { runInAction(() => { - this.userModuleFilters = newFilters; + this.moduleFilters = newFilters; }); this.moduleService.patchModule( @@ -134,7 +164,7 @@ class ModuleFilterStore implements IModuleFilterStore { this.rootStore.user.currentUser ); } catch (error) { - this.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId); + this.fetchModuleFilters(workspaceSlug, projectId, moduleId); runInAction(() => { this.error = error; diff --git a/web/store/modules.ts b/web/store/modules.ts index feb0d2279..9e1f6101c 100644 --- a/web/store/modules.ts +++ b/web/store/modules.ts @@ -178,7 +178,6 @@ class ModuleStore implements IModuleStore { ...this.moduleDetails, [moduleId]: response, }; - this.rootStore.moduleFilter.userModuleFilters = response.view_props?.filters ?? {}; this.loader = false; this.error = null; }); @@ -343,7 +342,6 @@ class ModuleStore implements IModuleStore { this.rootStore.project.setProjectId(projectId); const params = this.rootStore?.issueFilter?.appliedFilters; - console.log("params", params); const issueResponse = await this.moduleService.getModuleIssuesWithParams( workspaceSlug, projectId,