Merge branch 'refactor/mobx-store' of https://github.com/makeplane/plane into refactor/mobx-store

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -123,12 +123,15 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
-  const canEditProperties = (projectId: string | undefined) => {
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
       const isEditingAllowedBasedOnProject =
         canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
 
       return enableInlineEditing && isEditingAllowedBasedOnProject;
-  };
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
 
   const onDragStart = (dragStart: DragStart) => {
     setDragState({
@@ -183,7 +186,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     [issueActions]
   );
 
-  const renderQuickActions = (issue: IIssue, customActionButton?: React.ReactElement) => (
+  const renderQuickActions = useCallback(
+    (issue: IIssue, customActionButton?: React.ReactElement) => (
       <QuickActions
         customActionButton={customActionButton}
         issue={issue}
@@ -195,6 +199,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
       />
+    ),
+    [issueActions, handleIssues]
   );
 
   const handleDeleteIssue = async () => {

web/components/issues/issue-layouts/kanban/blocks-list.tsx

@@ -1,8 +1,10 @@
-// components
+import { memo } from "react";
-import { KanbanIssueBlock } from "components/issues";
+//types
 import { IIssueDisplayProperties, IIssue } from "types";
 import { EIssueActions } from "../types";
 import { IIssueResponse } from "store_legacy/issues/types";
+// components
+import { KanbanIssueBlock } from "components/issues";
 
 interface IssueBlocksListProps {
   sub_group_id: string;
@@ -17,7 +19,7 @@ interface IssueBlocksListProps {
   canEditProperties: (projectId: string | undefined) => boolean;
 }
 
-export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
+const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
   const {
     sub_group_id,
     columnId,
@@ -61,3 +63,5 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
     </>
   );
 };
+
+export const KanbanIssueBlocksList = memo(KanbanIssueBlocksListMemo);

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

@@ -1,11 +1,10 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { Droppable } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from "components/issues";
 import { HeaderGroupByCard } from "./headers/group-by-card";
+import { KanbanGroup } from "./kanban-group";
 // types
 import { IIssueDisplayProperties, IIssue } from "types";
 // constants
@@ -76,10 +75,11 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     <div className="relative flex h-full w-full gap-3">
       {list &&
         list.length > 0 &&
-        list.map((_list: IKanbanColumn) => (
+        list.map((_list: IKanbanColumn) => {
-          <div
+          const verticalPosition = verticalAlignPosition(_list);
-            className={`relative flex flex-shrink-0 flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``} group`}
+
-          >
+          return (
+            <div className={`relative flex flex-shrink-0 flex-col ${!verticalPosition ? `w-[340px]` : ``} group`}>
               {sub_group_by === null && (
                 <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
                   <HeaderGroupByCard
@@ -98,59 +98,28 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   />
                 </div>
               )}
-
+              <KanbanGroup
-            <div
+                groupId={_list.id}
-              className={`${
-                verticalAlignPosition(_list) ? `min-h-[150px] w-[0px] overflow-hidden` : `w-full transition-all`
-              }`}
-            >
-              <Droppable droppableId={`${_list.id}__${sub_group_id}`}>
-                {(provided: any, snapshot: any) => (
-                  <div
-                    className={`relative h-full w-full transition-all ${
-                      snapshot.isDraggingOver ? `bg-custom-background-80` : ``
-                    }`}
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                  >
-                    {issues && !verticalAlignPosition(_list) ? (
-                      <KanbanIssueBlocksList
-                        sub_group_id={sub_group_id}
-                        columnId={_list.id}
                 issues={issues}
-                        issueIds={issueIds?.[_list.id] || []}
+                issueIds={issueIds}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                sub_group_id={sub_group_id}
                 isDragDisabled={isDragDisabled}
-                        showEmptyGroup={showEmptyGroup}
                 handleIssues={handleIssues}
+                showEmptyGroup={showEmptyGroup}
                 quickActions={quickActions}
                 displayProperties={displayProperties}
-                        canEditProperties={canEditProperties}
+                enableQuickIssueCreate={enableQuickIssueCreate}
-                      />
-                    ) : null}
-
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Droppable>
-
-              <div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
-                {enableQuickIssueCreate && !disableIssueCreation && (
-                  <KanBanQuickAddIssueForm
-                    formKey="name"
-                    groupId={_list.id}
-                    subGroupId={sub_group_id}
-                    prePopulatedData={{
-                      ...(group_by && { [group_by]: _list.id }),
-                      ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
-                    }}
                 quickAddCallback={quickAddCallback}
                 viewId={viewId}
+                disableIssueCreation={disableIssueCreation}
+                canEditProperties={canEditProperties}
+                verticalPosition={verticalPosition}
               />
-                )}
             </div>
-            </div>
+          );
-          </div>
+        })}
-        ))}
     </div>
   );
 });

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -0,0 +1,102 @@
+import { Droppable } from "@hello-pangea/dnd";
+//types
+import { IIssue, IIssueDisplayProperties, IIssueResponse } from "types";
+import { EIssueActions } from "../types";
+//components
+import { KanBanQuickAddIssueForm, KanbanIssueBlocksList } from ".";
+
+interface IKanbanGroup {
+  groupId: string;
+  issues: IIssueResponse;
+  issueIds: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  sub_group_id: string;
+  isDragDisabled: boolean;
+  handleIssues: (issue: IIssue, action: EIssueActions) => void;
+  showEmptyGroup: boolean;
+  quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  displayProperties: IIssueDisplayProperties | null;
+  enableQuickIssueCreate?: boolean;
+  quickAddCallback?: (
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssue,
+    viewId?: string
+  ) => Promise<IIssue | undefined>;
+  viewId?: string;
+  disableIssueCreation?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  verticalPosition: any;
+}
+
+export const KanbanGroup = (props: IKanbanGroup) => {
+  const {
+    groupId,
+    sub_group_id,
+    group_by,
+    sub_group_by,
+    issues,
+    verticalPosition,
+    issueIds,
+    isDragDisabled,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    viewId,
+  } = props;
+
+  return (
+    <div className={`${verticalPosition ? `min-h-[150px] w-[0px] overflow-hidden` : `w-full transition-all`}`}>
+      <Droppable droppableId={`${groupId}__${sub_group_id}`}>
+        {(provided: any, snapshot: any) => (
+          <div
+            className={`relative h-full w-full transition-all ${
+              snapshot.isDraggingOver ? `bg-custom-background-80` : ``
+            }`}
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+          >
+            {issues && !verticalPosition ? (
+              <KanbanIssueBlocksList
+                sub_group_id={sub_group_id}
+                columnId={groupId}
+                issues={issues}
+                issueIds={issueIds?.[groupId] || []}
+                isDragDisabled={isDragDisabled}
+                showEmptyGroup={showEmptyGroup}
+                handleIssues={handleIssues}
+                quickActions={quickActions}
+                displayProperties={displayProperties}
+                canEditProperties={canEditProperties}
+              />
+            ) : null}
+
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+
+      <div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
+        {enableQuickIssueCreate && !disableIssueCreation && (
+          <KanBanQuickAddIssueForm
+            formKey="name"
+            groupId={groupId}
+            subGroupId={sub_group_id}
+            prePopulatedData={{
+              ...(group_by && { [group_by]: groupId }),
+              ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+            }}
+            quickAddCallback={quickAddCallback}
+            viewId={viewId}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

web/components/issues/issue-layouts/kanban/roots/project-root.tsx

@@ -1,14 +1,15 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useMemo } from "react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectIssueQuickActions } from "components/issues";
+import { BaseKanBanRoot } from "../base-kanban-root";
 // types
 import { IIssue } from "types";
 // constants
 import { EIssueActions } from "../../types";
-import { BaseKanBanRoot } from "../base-kanban-root";
 import { EProjectStore } from "store_legacy/command-palette.store";
 import { IGroupedIssues, IIssueResponse, ISubGroupedIssues, TUnGroupedIssues } from "store_legacy/issues/types";
 
@@ -25,7 +26,8 @@ export const KanBanLayout: React.FC = observer(() => {
     kanBanHelpers: kanBanHelperStore,
   } = useMobxStore();
 
-  const issueActions = {
+  const issueActions = useMemo(
+    () => ({
       [EIssueActions.UPDATE]: async (issue: IIssue) => {
         if (!workspaceSlug) return;
 
@@ -36,7 +38,9 @@ export const KanBanLayout: React.FC = observer(() => {
 
         await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
       },
-  };
+    }),
+    [issueStore]
+  );
 
   const handleDragDrop = async (
     source: any,

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+//mobx
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { KanBan } from "./default";
 import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
@@ -11,7 +13,6 @@ import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } f
 import { EIssueActions } from "../types";
 import { EProjectStore } from "store_legacy/command-palette.store";
 import { IKanbanColumn, columnTypes, getKanbanColumns } from "./utils";
-import { useMobxStore } from "lib/mobx/store-provider";
 
 interface ISubGroupSwimlaneHeader {
   issueIds: any;
@@ -28,8 +29,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   list,
   kanBanToggle,
   handleKanBanToggle,
-}) => {
+}) => (
-  return (
   <div className="relative flex h-max min-h-full w-full items-center">
     {list &&
       list.length > 0 &&
@@ -50,7 +50,6 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
       ))}
   </div>
 );
-};
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   issues: IIssueResponse;

web/components/issues/issue-layouts/kanban/utils.tsx

@@ -51,22 +51,19 @@ const getProjectColumns = (project: IProjectStore): IKanbanColumn[] | undefined
 
   if (!projects) return;
 
-  return projects.map((project) => {
+  return projects.map((project) => ({
-    return {
     id: project.id,
     name: project.name,
     Icon: <div className="w-6 h-6">{renderEmoji(project.emoji || "")}</div>,
     payload: { project: project.id },
-    };
+  }));
-  });
 };
 
 const getStateColumns = (projectState: IProjectStateStore): IKanbanColumn[] | undefined => {
   const { projectStates } = projectState;
   if (!projectStates) return;
 
-  return projectStates.map((state) => {
+  return projectStates.map((state) => ({
-    return {
     id: state.id,
     name: state.name,
     Icon: (
@@ -75,15 +72,13 @@ const getStateColumns = (projectState: IProjectStateStore): IKanbanColumn[] | un
       </div>
     ),
     payload: { state: state.id },
-    };
+  }));
-  });
 };
 
 const getStateGroupColumns = () => {
   const stateGroups = ISSUE_STATE_GROUPS;
 
-  return stateGroups.map((stateGroup) => {
+  return stateGroups.map((stateGroup) => ({
-    return {
     id: stateGroup.key,
     name: stateGroup.title,
     Icon: (
@@ -92,21 +87,18 @@ const getStateGroupColumns = () => {
       </div>
     ),
     payload: {},
-    };
+  }));
-  });
 };
 
 const getPriorityColumns = () => {
   const priorities = ISSUE_PRIORITIES;
 
-  return priorities.map((priority) => {
+  return priorities.map((priority) => ({
-    return {
     id: priority.key,
     name: priority.title,
     Icon: <PriorityIcon priority={priority?.key} />,
     payload: { priority: priority.key },
-    };
+  }));
-  });
 };
 
 const getLabelsColumns = (projectLabel: IProjectLabelStore) => {
@@ -116,19 +108,14 @@ const getLabelsColumns = (projectLabel: IProjectLabelStore) => {
 
   const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }];
 
-  return labels.map((label) => {
+  return labels.map((label) => ({
-    return {
     id: label.id,
     name: label.name,
     Icon: (
-        <div
+      <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
-          className="w-[12px] h-[12px] rounded-full"
-          style={{ backgroundColor: label.color ? label.color : "#666" }}
-        />
     ),
     payload: { labels: [label.id] },
-    };
+  }));
-  });
 };
 
 const getAssigneeColumns = (projectMember: IProjectMemberStore) => {