improvement: refactored issue grouping logic to access MobX store directly (makeplane#6134)

* improvement: refactored issue grouping logic to access MobX store directly

* chore: minor updates

Author: prateekshourya29

packages/types/src/issues.d.ts

@@ -216,7 +216,7 @@ export type GroupByColumnTypes =
 export interface IGroupByColumn {
   id: string;
   name: string;
-  icon: ReactElement | undefined;
+  icon?: ReactElement | undefined;
   payload: Partial<TIssue>;
   isDropDisabled?: boolean;
   dropErrorMessage?: string;

web/core/components/issues/issue-layouts/kanban/default.tsx

@@ -18,7 +18,7 @@ import { ContentWrapper } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { KanbanColumnLoader } from "@/components/ui";
 // hooks
-import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
+import { useKanbanView } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // types
 // parent components
@@ -87,30 +87,16 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     dropErrorMessage,
     subGroupIndex = 0,
   } = props;
-
+  // store hooks
   const storeType = useIssueStoreType();
-
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const cycle = useCycle();
-  const moduleInfo = useModule();
-  const projectState = useProjectState();
   const issueKanBanView = useKanbanView();
-
+  // derived values
   const isDragDisabled = !issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by);
-
-  const list = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    moduleInfo,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  const list = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
 
   if (!list) return null;
 

web/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -15,7 +15,6 @@ import {
 // UI
 import { Row } from "@plane/ui";
 // hooks
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // components
 import { TRenderQuickActions } from "../list/list-view-types";
@@ -262,38 +261,19 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     quickAddCallback,
     scrollableContainerRef,
   } = props;
-
+  // store hooks
   const storeType = useIssueStoreType();
-
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const cycle = useCycle();
-  const projectModule = useModule();
-  const projectState = useProjectState();
-
-  const groupByList = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
-  const subGroupByList = getGroupByColumns(
-    sub_group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  // derived values
+  const groupByList = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
+  const subGroupByList = getGroupByColumns({
+    groupBy: sub_group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
 
   if (!groupByList || !subGroupByList) return null;
 

web/core/components/issues/issue-layouts/list/default.tsx

@@ -18,9 +18,7 @@ import {
 } from "@plane/types";
 // components
 import { MultipleSelectGroup } from "@/components/core";
-
 // hooks
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // plane web components
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
@@ -75,29 +73,16 @@ export const List: React.FC<IList> = observer((props) => {
   } = props;
 
   const storeType = useIssueStoreType();
-  // store hooks
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const projectState = useProjectState();
-  const cycle = useCycle();
-  const projectModule = useModule();
   // plane web hooks
   const isBulkOperationsEnabled = useBulkOperationStatus();
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const groups = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  const groups = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
 
   // Enable Auto Scroll for Main Kanban
   useEffect(() => {