fix: Project Members implementation converted to separate store and service.

web/components/command-palette/issue/change-issue-assignee.tsx

@@ -26,15 +26,16 @@ const issueService = new IssueService();
 
 export const ChangeIssueAssignee: FC<Props> = observer((props) => {
   const { setIsPaletteOpen, issue, user } = props;
-
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
-
-  const { project: projectStore } = useMobxStore();
-  const members = projectId ? projectStore.members?.[projectId.toString()] : undefined;
+  // store
+  const {
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
   const options =
-    members?.map(({ member }) => ({
+    projectMembers?.map(({ member }) => ({
       value: member.id,
       query: member.display_name,
       content: (

web/components/command-palette/shortcuts-modal.tsx

@@ -1,5 +1,4 @@
-import { FC, useEffect, useState, Dispatch, SetStateAction, Fragment } from "react";
-// headless ui
+import { FC, useEffect, useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { Command, Search, X } from "lucide-react";

web/components/headers/cycle-issues.tsx

@@ -31,6 +31,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     cycle: cycleStore,
     cycleIssueFilter: cycleIssueFilterStore,
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     commandPalette: commandPaletteStore,
   } = useMobxStore();
@@ -178,7 +179,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
-              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              members={projectMembers?.map((m) => m.member)}
               states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>

web/components/headers/module-issues.tsx

@@ -31,6 +31,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     module: moduleStore,
     moduleFilter: moduleFilterStore,
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     commandPalette: commandPaletteStore,
   } = useMobxStore();
@@ -177,7 +178,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
-              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              members={projectMembers?.map((m) => m.member)}
               states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>

web/components/headers/project-archived-issues.tsx

@@ -22,6 +22,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
 
   const {
     project: projectStore,
+    projectMember: { projectMembers },
     archivedIssueFilters: archivedIssueFiltersStore,
     projectState: projectStateStore,
   } = useMobxStore();
@@ -119,7 +120,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
               activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
             }
             labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
-            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            members={projectMembers?.map((m) => m.member)}
             states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>

web/components/headers/project-issues.tsx

@@ -26,6 +26,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   const {
     issueFilter: issueFilterStore,
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     inbox: inboxStore,
     commandPalette: commandPaletteStore,
@@ -172,7 +173,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
               }
               labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
-              members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+              members={projectMembers?.map((m) => m.member)}
               states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>

web/components/headers/project-view-issues.tsx

@@ -23,6 +23,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     issueFilter: issueFilterStore,
     projectViewFilters: projectViewFiltersStore,
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     projectViews: projectViewsStore,
   } = useMobxStore();
@@ -163,7 +164,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
               activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
             }
             labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
-            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            members={projectMembers?.map((m) => m.member)}
             states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>

web/components/issues/attachment/attachments.tsx

@@ -1,10 +1,7 @@
 import { useState } from "react";
-
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // ui
 import { Tooltip } from "@plane/ui";
 import { DeleteAttachmentModal } from "./delete-attachment-modal";
@@ -13,7 +10,7 @@ import { getFileIcon } from "components/icons";
 import { AlertCircle, X } from "lucide-react";
 // services
 import { IssueAttachmentService } from "services/issue";
-import { ProjectService } from "services/project";
+import { ProjectMemberService } from "services/project";
 // fetch-key
 import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
@@ -25,7 +22,7 @@ import { IIssueAttachment } from "types";
 
 // services
 const issueAttachmentService = new IssueAttachmentService();
-const projectService = new ProjectService();
+const projectMemberService = new ProjectMemberService();
 
 export const IssueAttachments = () => {
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
@@ -44,7 +41,7 @@ export const IssueAttachments = () => {
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Draggable } from "@hello-pangea/dnd";
 // components
@@ -17,9 +15,6 @@ type Props = {
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
   const { issues, handleIssues, quickActions } = props;
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   return (
     <>
       {issues?.map((issue, index) => (

web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx

@@ -15,6 +15,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   const {
     archivedIssueFilters: archivedIssueFiltersStore,
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
   } = useMobxStore();
 
@@ -77,7 +78,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
-        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>

web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx

@@ -13,6 +13,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
 
   const {
     project: projectStore,
+    projectMember: { projectMembers },
     cycleIssueFilter: cycleIssueFilterStore,
     projectState: projectStateStore,
   } = useMobxStore();
@@ -72,7 +73,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
-        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>

web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx

@@ -12,7 +12,12 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { project: projectStore, moduleFilter: moduleFilterStore, projectState: projectStateStore } = useMobxStore();
+  const {
+    project: projectStore,
+    moduleFilter: moduleFilterStore,
+    projectState: projectStateStore,
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
   const userFilters = moduleFilterStore.moduleFilters;
 
@@ -69,7 +74,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
-        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>

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

@@ -12,7 +12,12 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { issueFilter: issueFilterStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
+  const {
+    issueFilter: issueFilterStore,
+    project: projectStore,
+    projectState: projectStateStore,
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
   const userFilters = issueFilterStore.userFilters;
 
@@ -73,7 +78,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
-        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
     </div>

web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -19,6 +19,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
 
   const {
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     projectViews: projectViewsStore,
     projectViewFilters: projectViewFiltersStore,
@@ -99,7 +100,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
         labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
-        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        members={projectMembers?.map((m) => m.member)}
         states={projectStateStore.states?.[projectId?.toString() ?? ""]}
       />
       {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (

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

@@ -9,8 +9,6 @@ import { KanBanSwimLanes } from "../swimlanes";
 import { KanBan } from "../default";
 import { CycleIssueQuickActions } from "components/issues";
 import { Spinner } from "@plane/ui";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -25,13 +23,13 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   // store
   const {
     project: projectStore,
+    projectMember: { projectMembers },
     projectState: projectStateStore,
     cycleIssue: cycleIssueStore,
     issueFilter: issueFilterStore,
     cycleIssueKanBanView: cycleIssueKanBanViewStore,
     issueDetail: issueDetailStore,
   } = useMobxStore();
-  const { currentProjectDetails } = projectStore;
 
   const issues = cycleIssueStore?.getIssues;
 
@@ -51,9 +49,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
   const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
 
-  const onDragStart = () => {
-    setIsDragStarted(true);
-  };
+  // const onDragStart = () => {
+  //   setIsDragStarted(true);
+  // };
 
   const onDragEnd = (result: any) => {
     setIsDragStarted(false);
@@ -102,13 +100,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
   const states = projectStateStore?.projectStates || null;
   const priorities = ISSUE_PRIORITIES || null;
   const labels = projectStore?.projectLabels || null;
-  const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
   const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
-  const estimates =
-    currentProjectDetails?.estimate !== null
-      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
-      : null;
+  // const estimates =
+  //   currentProjectDetails?.estimate !== null
+  //     ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+  //     : null;
 
   return (
     <>
@@ -141,7 +138,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
                 stateGroups={stateGroups}
                 priorities={priorities}
                 labels={labels}
-                members={members?.map((m) => m.member) ?? null}
+                members={projectMembers?.map((m) => m.member) ?? null}
                 projects={projects}
                 showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                 isDragStarted={isDragStarted}
@@ -168,7 +165,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
                 stateGroups={stateGroups}
                 priorities={priorities}
                 labels={labels}
-                members={members?.map((m) => m.member) ?? null}
+                members={projectMembers?.map((m) => m.member) ?? null}
                 projects={projects}
                 showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                 isDragStarted={isDragStarted}