From 2fbc375fa8abdd833afcafc12365c15f5322dcaf Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Tue, 19 Dec 2023 12:03:50 +0530 Subject: [PATCH] chore: implement useProjectState hook. (#3185) --- .../applied-filters/roots/archived-issue.tsx | 14 +++++------ .../applied-filters/roots/cycle-root.tsx | 14 +++++------ .../applied-filters/roots/draft-issue.tsx | 13 +++++----- .../applied-filters/roots/module-root.tsx | 14 +++++------ .../applied-filters/roots/project-root.tsx | 15 ++++++----- .../roots/project-view-root.tsx | 9 +++---- .../spreadsheet/base-spreadsheet-root.tsx | 25 +++++++++++-------- 7 files changed, 54 insertions(+), 50 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx index b3b6dfbd1d..154edd004f 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; @@ -10,18 +10,18 @@ import { IIssueFilterOptions } from "types"; import { EFilterType } from "store_legacy/issues/types"; export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; - + // store hooks const { projectArchivedIssuesFilter: { issueFilters, updateFilters }, projectLabel: { projectLabels }, projectMember: { projectMembers }, - projectState: projectStateStore, } = useMobxStore(); - + const { projectStates } = useProjectState(); + // derived values const userFilters = issueFilters?.filters; - // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; Object.entries(userFilters ?? {}).forEach(([key, value]) => { @@ -76,7 +76,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[projectId?.toString() ?? ""]} + states={projectStates} /> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx index 70f78279c5..e1ddf039e7 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; @@ -10,22 +10,22 @@ import { IIssueFilterOptions } from "types"; import { EFilterType } from "store_legacy/issues/types"; export const CycleAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId, cycleId } = router.query as { workspaceSlug: string; projectId: string; cycleId: string; }; - + // store hooks const { projectLabel: { projectLabels }, - projectState: projectStateStore, projectMember: { projectMembers }, cycleIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); - + const { projectStates } = useProjectState(); + // derived values const userFilters = issueFilters?.filters; - // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; Object.entries(userFilters ?? {}).forEach(([key, value]) => { @@ -83,7 +83,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[cycleId ?? ""]} + states={projectStates} /> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx index cc9a4e199d..f9e515fa28 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; @@ -10,16 +10,17 @@ import { IIssueFilterOptions } from "types"; import { EFilterType } from "store_legacy/issues/types"; export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; - + // store hooks const { projectDraftIssuesFilter: { issueFilters, updateFilters }, projectLabel: { projectLabels }, projectMember: { projectMembers }, - projectState: projectStateStore, } = useMobxStore(); - + const { projectStates } = useProjectState(); + // derived values const userFilters = issueFilters?.filters; // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; @@ -71,7 +72,7 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[projectId?.toString() ?? ""]} + states={projectStates} /> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx index 4c587833a1..b2b2e00b16 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; @@ -10,22 +10,22 @@ import { IIssueFilterOptions } from "types"; import { EFilterType } from "store_legacy/issues/types"; export const ModuleAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId, moduleId } = router.query as { workspaceSlug: string; projectId: string; moduleId: string; }; - + // store hooks const { projectLabel: { projectLabels }, - projectState: projectStateStore, projectMember: { projectMembers }, moduleIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); - + const { projectStates } = useProjectState(); + // derived values const userFilters = issueFilters?.filters; - // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; Object.entries(userFilters ?? {}).forEach(([key, value]) => { @@ -83,7 +83,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[moduleId ?? ""]} + states={projectStates} /> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx index 1545ae9630..deb1abaab4 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx @@ -1,31 +1,30 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; - -// mobx store +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, SaveFilterView } from "components/issues"; - // types import { IIssueFilterOptions } from "types"; import { EFilterType } from "store_legacy/issues/types"; export const ProjectAppliedFiltersRoot: React.FC = observer(() => { + // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string; }; - + // store hooks const { projectLabel: { projectLabels }, - projectState: projectStateStore, projectMember: { projectMembers }, projectIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); - + const { projectStates } = useProjectState(); + // derived values const userFilters = issueFilters?.filters; - // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; Object.entries(userFilters ?? {}).forEach(([key, value]) => { @@ -71,7 +70,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[projectId?.toString() ?? ""]} + states={projectStates} /> diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx index e243b266b3..2cbe27622e 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx @@ -1,7 +1,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks -import { useProjectView } from "hooks/store"; +import { useProjectState, useProjectView } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList } from "components/issues"; @@ -24,14 +24,13 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => { // store hooks const { projectLabel: { projectLabels }, - projectState: projectStateStore, projectMember: { projectMembers }, viewIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); + const { projectStates } = useProjectState(); const { getViewById, updateView } = useProjectView(); - + // derived values const viewDetails = viewId ? getViewById(viewId.toString()) : null; - const userFilters = issueFilters?.filters; // filters whose value not null or empty array const appliedFilters: IIssueFilterOptions = {}; @@ -101,7 +100,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => { handleRemoveFilter={handleRemoveFilter} labels={projectLabels ?? []} members={projectMembers?.map((m) => m.member)} - states={projectStateStore.states?.[projectId?.toString() ?? ""]} + states={projectStates} /> {appliedFilters && diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx index afe6f6a973..225a993182 100644 --- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx +++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx @@ -1,8 +1,8 @@ -import { IIssueUnGroupedStructure } from "store_legacy/issue"; -import { SpreadsheetView } from "./spreadsheet-view"; import { FC, useCallback } from "react"; -import { IIssue, IIssueDisplayFilterOptions } from "types"; import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +// hooks +import { useProjectState } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; import { ICycleIssuesFilterStore, @@ -14,10 +14,15 @@ import { IViewIssuesFilterStore, IViewIssuesStore, } from "store_legacy/issues"; -import { observer } from "mobx-react-lite"; +import { IIssueUnGroupedStructure } from "store_legacy/issue"; +// views +import { SpreadsheetView } from "./spreadsheet-view"; +// types +import { IIssue, IIssueDisplayFilterOptions } from "types"; import { EFilterType, TUnGroupedIssues } from "store_legacy/issues/types"; import { EIssueActions } from "../types"; import { IQuickActionProps } from "../list/list-view-types"; +// constants import { EUserProjectRoles } from "constants/project"; interface IBaseSpreadsheetRoot { @@ -39,20 +44,20 @@ interface IBaseSpreadsheetRoot { export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => { const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions, canEditPropertiesBasedOnProject } = props; - + // router const router = useRouter(); const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; - + // store hooks const { projectMember: { projectMembers }, - projectState: projectStateStore, projectLabel: { projectLabels }, user: userStore, } = useMobxStore(); - + const { projectStates } = useProjectState() + // derived values const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {}; - const { currentProjectRole } = userStore; + // user role validation const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; const canEditProperties = (projectId: string | undefined) => { @@ -114,7 +119,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => { )} members={projectMembers?.map((m) => m.member)} labels={projectLabels || undefined} - states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined} + states={projectStates} handleIssues={handleIssues} canEditProperties={canEditProperties} quickAddCallback={issueStore.quickAddIssue}