chore: use new cycle and module store. (#3172)

* chore: use new cycle and module store. * chore: minor improvements.
2024-06-14 14:31:34 +00:00 · 2023-12-18 18:43:40 +05:30 · 2023-12-18 18:43:40 +05:30 · 9595493c42
commit 9595493c42
parent cad2706286
5 changed files with 103 additions and 75 deletions
--- 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 (
+    <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 +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) => (
-                    <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>
+                  {projectAllCycles?.map((cycleId) => (
+                    <CycleDropdownOption key={cycleId} cycleId={cycleId} />
                  ))}
                </CustomMenu>
              }
--- 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 (
+    <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 +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) => (
-                    <CustomMenu.MenuItem
-                      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>
+                  {projectModules?.map((moduleId) => (
+                    <ModuleDropdownOption moduleId={moduleId} />
                  ))}
                </CustomMenu>
              }
--- 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();
--- 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<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 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: (
-      <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">
-          <ContrastIcon />
-        </span>
-        <span className="flex-grow truncate">{cycle.name}</span>
-      </div>
-    ),
-  }));
+  const options = projectAllCycles?.map((cycleId) => {
+    const cycleDetail = getCycleById(cycleId);
+    return {
+      value: cycleId,
+      query: cycleDetail?.name ?? "",
+      content: (
+        <div className="flex items-center gap-1.5">
+          <ContrastIcon className="h-3 w-3" />
+          {cycleDetail?.name}
+        </div>
+      ),
+    };
+  });

  const filteredOptions =
    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
--- 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<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,21 +64,25 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
      });
  };

-  const options = projectModules?.map((module) => ({
-    value: module.id,
-    query: module.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>
-      </div>
-    ),
-  }));
+  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">{moduleDetail?.name}</span>
+        </div>
+      ),
+    };
+  });

+  // 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<Props> = observer((props) => {
          value === issueModule?.module_detail.id
            ? handleRemoveIssueFromModule(issueModule?.id ?? "", issueModule?.module ?? "")
            : handleModuleChange
-              ? handleModuleChange(value)
-              : handleModuleStoreChange(value);
+            ? handleModuleChange(value)
+            : handleModuleStoreChange(value);
        }}
        options={options}
        customButton={
          <div>
-            <Tooltip
-              position="left"
-              tooltipContent={`${projectModules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
-            >
+            <Tooltip position="left" tooltipContent={`${selectedModule?.name ?? "No module"}`}>
              <button
                type="button"
                className={`flex w-full items-center rounded bg-custom-background-80 px-2.5 py-0.5 text-xs ${
@ -110,9 +112,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"}
-                  </span>
+                  <span className="truncate">{selectedModule?.name ?? "No module"}</span>
                </span>
              </button>
            </Tooltip>