chore: use new cycle and module store.

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,31 @@ 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();
+
+  const cycle = getCycleById(cycleId);
+
+  if (!cycle) return null;
+
+  return (
+    <CustomMenu.MenuItem
+      key={cycle.id}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
+    >
+      <div className="flex items-center gap-1.5">
+        <ContrastIcon className="h-3 w-3" />
+        {truncateText(cycle.name, 40)}
+      </div>
+    </CustomMenu.MenuItem>
+  );
+};
+
 export const CycleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -35,11 +60,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,8 +130,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     [workspaceSlug, projectId, cycleId, updateFilters]
   );
 
-  const cyclesList = cycleStore.projectCycles;
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
-  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
 
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -157,16 +181,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   width="auto"
                   placement="bottom-start"
                 >
-                  {cyclesList?.map((cycle) => (
+                  {projectAllCycles?.map((cycleId) => (
-                    <CustomMenu.MenuItem
+                    <CycleDropdownOption key={cycleId} cycleId={cycleId} />
-                      key={cycle.id}
-                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
-                    >
-                      <div className="flex items-center gap-1.5">
-                        <ContrastIcon className="h-3 w-3" />
-                        {truncateText(cycle.name, 40)}
-                      </div>
-                    </CustomMenu.MenuItem>
                   ))}
                 </CustomMenu>
               }

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,31 @@ 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();
+
+  const moduleDetail = getModuleById(moduleId);
+
+  if (!moduleDetail) return null;
+
+  return (
+    <CustomMenu.MenuItem
+      key={moduleDetail.id}
+      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${moduleDetail.id}`)}
+    >
+      <div className="flex items-center gap-1.5">
+        <DiceIcon className="h-3 w-3" />
+        {truncateText(moduleDetail.name, 40)}
+      </div>
+    </CustomMenu.MenuItem>
+  );
+};
+
 export const ModuleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -36,10 +61,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,8 +130,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     [workspaceSlug, projectId, moduleId, updateFilters]
   );
 
-  const modulesList = projectId ? moduleStore.modules[projectId.toString()] : undefined;
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
-  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
 
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -157,16 +181,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   width="auto"
                   placement="bottom-start"
                 >
-                  {modulesList?.map((module) => (
+                  {projectModules?.map((moduleId) => (
-                    <CustomMenu.MenuItem
+                    <ModuleDropdownOption moduleId={moduleId} />
-                      key={module.id}
-                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
-                    >
-                      <div className="flex items-center gap-1.5">
-                        <DiceIcon className="h-3 w-3" />
-                        {truncateText(module.name, 40)}
-                      </div>
-                    </CustomMenu.MenuItem>
                   ))}
                 </CustomMenu>
               }

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();

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
+// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useCycle } from "hooks/store";
 // ui
 import { Combobox } from "@headlessui/react";
 // icons
@@ -28,28 +28,28 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = 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 selectedCycleId = projectAllCycles ? projectAllCycles?.find((cycleId) => cycleId === value) : null;
+  const selectedCycle = selectedCycleId ? getCycleById(selectedCycleId) : null;
 
-  const selectedCycle = cycles ? cycles?.find((i) => i.id === value) : undefined;
+  const options = projectAllCycles?.map((cycleId) => {
-
+    const cycleDetail = getCycleById(cycleId);
-  const options = cycles?.map((cycle) => ({
+    return {
-    value: cycle.id,
+      value: cycleId,
-    query: cycle.name,
+      query: cycleDetail?.name ?? "",
       content: (
-      <div className="flex items-center gap-1.5 truncate">
+        <div className="flex items-center gap-1.5">
-        <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
+          <ContrastIcon className="h-3 w-3" />
-          <ContrastIcon />
+          {cycleDetail?.name}
-        </span>
-        <span className="flex-grow truncate">{cycle.name}</span>
         </div>
       ),
-  }));
+    };
+  });
 
   const filteredOptions =
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));

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<Props> = 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,18 +64,24 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
       });
   };
 
-  const options = projectModules?.map((module) => ({
+  const selectedModuleId = projectModules ? projectModules.find((moduleId) => moduleId === issueModule?.module) : null;
-    value: module.id,
+  const selectedModule = selectedModuleId ? getModuleById(selectedModuleId) : null;
-    query: module.name,
+
+  const options = projectModules?.map((moduleId) => {
+    const moduleDetail = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: moduleDetail?.name ?? "",
       content: (
         <div className="flex items-center gap-1.5 truncate">
           <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
             <DiceIcon />
           </span>
-        <span className="flex-grow truncate">{module.name}</span>
+          <span className="flex-grow truncate">{moduleDetail?.name}</span>
         </div>
       ),
-  }));
+    };
+  });
 
   const issueModule = issueDetail?.issue_module;
 
@@ -96,7 +103,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
           <div>
             <Tooltip
               position="left"
-              tooltipContent={`${projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
+              tooltipContent={`${selectedModule?.name ?? "No module"}`}
             >
               <button
                 type="button"
@@ -111,7 +118,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
                 >
                   <span className="flex-shrink-0">{issueModule && <DiceIcon className="h-3.5 w-3.5" />}</span>
                   <span className="truncate">
-                    {projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
+                    {selectedModule?.name ?? "No module"}
                   </span>
                 </span>
               </button>