chore: implement useProjectState hook. (#3185)

makeplane · Dec 19, 2023 · 2fbc375 · 2fbc375
1 parent c013e04
commit 2fbc375
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 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
@@ -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}
       />
 
       <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />

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
@@ -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}
       />
 
       <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />

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
@@ -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}
       />
 
       <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />

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
@@ -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}
       />
 
       <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />

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
@@ -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}
       />
 
       <SaveFilterView workspaceSlug={workspaceSlug} projectId={projectId} filterParams={appliedFilters} />

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
@@ -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
@@ -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}