From 9595493c42be3ea0ddd17b23a0b124555075c062 Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Mon, 18 Dec 2023 18:43:40 +0530 Subject: [PATCH] chore: use new cycle and module store. (#3172) * chore: use new cycle and module store. * chore: minor improvements. --- web/components/headers/cycle-issues.tsx | 47 +++++++++++------- web/components/headers/module-issues.tsx | 45 +++++++++++------ .../issue-layouts/roots/cycle-layout-root.tsx | 1 - web/components/issues/select/cycle.tsx | 37 +++++++------- .../issues/sidebar-select/module.tsx | 48 +++++++++---------- 5 files changed, 103 insertions(+), 75 deletions(-) diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx index ed43ca272db..b1874c448dd 100644 --- a/web/components/headers/cycle-issues.tsx +++ b/web/components/headers/cycle-issues.tsx @@ -1,9 +1,9 @@ -import { useCallback, useState } from "react"; +import React, { useCallback, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; -import { useApplication, useLabel, useProject, useProjectState, useUser } from "hooks/store"; +import { useApplication, useCycle, useLabel, useProject, useProjectState, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; @@ -23,6 +23,30 @@ import { EFilterType } from "store_legacy/issues/types"; import { EProjectStore } from "store_legacy/command-palette.store"; import { EUserProjectRoles } from "constants/project"; +const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => { + // router + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + // store hooks + const { getCycleById } = useCycle(); + // derived values + const cycle = getCycleById(cycleId); + + if (!cycle) return null; + + return ( + router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)} + > +
+ + {truncateText(cycle.name, 40)} +
+ + ); +}; + export const CycleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); @@ -35,11 +59,11 @@ export const CycleIssuesHeader: React.FC = observer(() => { }; // store hooks const { - cycle: cycleStore, projectIssuesFilter: projectIssueFiltersStore, projectMember: { projectMembers }, cycleIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); + const { projectAllCycles, getCycleById } = useCycle(); const { commandPalette: { toggleCreateIssueModal }, eventTracker: { setTrackElement }, @@ -105,9 +129,8 @@ export const CycleIssuesHeader: React.FC = observer(() => { [workspaceSlug, projectId, cycleId, updateFilters] ); - const cyclesList = cycleStore.projectCycles; - const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined; - + // derived values + const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined; const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); @@ -157,16 +180,8 @@ export const CycleIssuesHeader: React.FC = observer(() => { width="auto" placement="bottom-start" > - {cyclesList?.map((cycle) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)} - > -
- - {truncateText(cycle.name, 40)} -
- + {projectAllCycles?.map((cycleId) => ( + ))} } diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx index 8f49c9e5ded..842283c25cd 100644 --- a/web/components/headers/module-issues.tsx +++ b/web/components/headers/module-issues.tsx @@ -3,7 +3,7 @@ import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useMobxStore } from "lib/mobx/store-provider"; -import { useApplication, useLabel, useProject, useProjectState, useUser } from "hooks/store"; +import { useApplication, useLabel, useModule, useProject, useProjectState, useUser } from "hooks/store"; import useLocalStorage from "hooks/use-local-storage"; // components import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues"; @@ -24,6 +24,30 @@ import { EFilterType } from "store_legacy/issues/types"; import { EProjectStore } from "store_legacy/command-palette.store"; import { EUserProjectRoles } from "constants/project"; +const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => { + // router + const router = useRouter(); + const { workspaceSlug, projectId } = router.query; + // store hooks + const { getModuleById } = useModule(); + // derived values + const moduleDetail = getModuleById(moduleId); + + if (!moduleDetail) return null; + + return ( + router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`)} + > +
+ + {truncateText(moduleDetail.name, 40)} +
+ + ); +}; + export const ModuleIssuesHeader: React.FC = observer(() => { // states const [analyticsModal, setAnalyticsModal] = useState(false); @@ -36,10 +60,10 @@ export const ModuleIssuesHeader: React.FC = observer(() => { }; // store hooks const { - module: moduleStore, projectMember: { projectMembers }, moduleIssuesFilter: { issueFilters, updateFilters }, } = useMobxStore(); + const { projectModules, getModuleById } = useModule(); const { commandPalette: { toggleCreateIssueModal }, eventTracker: { setTrackElement }, @@ -105,9 +129,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => { [workspaceSlug, projectId, moduleId, updateFilters] ); - const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined; - const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined; - + // derived values + const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined; const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); @@ -157,16 +180,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => { width="auto" placement="bottom-start" > - {modulesList?.map((module) => ( - router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)} - > -
- - {truncateText(module.name, 40)} -
- + {projectModules?.map((moduleId) => ( + ))} } diff --git a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx index b20aa36b980..f1e58778f8e 100644 --- a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx @@ -32,7 +32,6 @@ export const CycleLayoutRoot: React.FC = observer(() => { }; // store hooks const { - cycle: cycleStore, cycleIssues: { loader, getIssues, fetchIssues }, cycleIssuesFilter: { issueFilters, fetchFilters }, } = useMobxStore(); diff --git a/web/components/issues/select/cycle.tsx b/web/components/issues/select/cycle.tsx index 2a9f4ee11d9..8278d624c7a 100644 --- a/web/components/issues/select/cycle.tsx +++ b/web/components/issues/select/cycle.tsx @@ -1,8 +1,8 @@ import React, { useState } from "react"; import { observer } from "mobx-react-lite"; import { usePopper } from "react-popper"; -// mobx store -import { useMobxStore } from "lib/mobx/store-provider"; +// hooks +import { useCycle } from "hooks/store"; // ui import { Combobox } from "@headlessui/react"; // icons @@ -28,28 +28,27 @@ export const IssueCycleSelect: React.FC = observer((props placement: "bottom-start", }); - const { cycle: cycleStore } = useMobxStore(); + const { projectAllCycles, fetchAllCycles, getCycleById } = useCycle(); const fetchCycles = () => { - if (workspaceSlug && projectId) cycleStore.fetchCycles(workspaceSlug, projectId, "all"); + if (workspaceSlug && projectId) fetchAllCycles(workspaceSlug, projectId); }; - const cycles = cycleStore.projectCycles; + const selectedCycle = value ? getCycleById(value) : null; - const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined; - - const options = cycles?.map((cycle) => ({ - value: cycle.id, - query: cycle.name, - content: ( -
- - - - {cycle.name} -
- ), - })); + const options = projectAllCycles?.map((cycleId) => { + const cycleDetail = getCycleById(cycleId); + return { + value: cycleId, + query: cycleDetail?.name ?? "", + content: ( +
+ + {cycleDetail?.name} +
+ ), + }; + }); const filteredOptions = query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())); diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx index c96799bc60f..58d11e66eb3 100644 --- a/web/components/issues/sidebar-select/module.tsx +++ b/web/components/issues/sidebar-select/module.tsx @@ -2,7 +2,8 @@ import React, { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { mutate } from "swr"; -// mobx store +// hooks +import { useModule } from "hooks/store"; import { useMobxStore } from "lib/mobx/store-provider"; // ui import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui"; @@ -25,9 +26,9 @@ export const SidebarModuleSelect: React.FC = observer((props) => { const { workspaceSlug, projectId } = router.query; // mobx store const { - module: { projectModules }, moduleIssues: { removeIssueFromModule, addIssueToModule }, } = useMobxStore(); + const { projectModules, getModuleById } = useModule(); const [isUpdating, setIsUpdating] = useState(false); @@ -63,21 +64,25 @@ export const SidebarModuleSelect: React.FC = observer((props) => { }); }; - const options = projectModules?.map((module) => ({ - value: module.id, - query: module.name, - content: ( -
- - - - {module.name} -
- ), - })); + const options = projectModules?.map((moduleId) => { + const moduleDetail = getModuleById(moduleId); + return { + value: moduleId, + query: moduleDetail?.name ?? "", + content: ( +
+ + + + {moduleDetail?.name} +
+ ), + }; + }); + // derived values const issueModule = issueDetail?.issue_module; - + const selectedModule = issueModule?.module ? getModuleById(issueModule?.module) : null; const disableSelect = disabled || isUpdating; return ( @@ -88,16 +93,13 @@ export const SidebarModuleSelect: React.FC = observer((props) => { value === issueModule?.module_detail.id ? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "") : handleModuleChange - ? handleModuleChange(value) - : handleModuleStoreChange(value); + ? handleModuleChange(value) + : handleModuleStoreChange(value); }} options={options} customButton={
- m.id === issueModule?.module)?.name ?? "No module"}`} - > +