dev: optimised the issue fetching in issue base store

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

@@ -5,7 +5,7 @@ import useSWR from "swr";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // TODO: update this
-// import useStoreIssues from "hooks/use-store-issues";
+import useStoreIssues from "hooks/use-store-issues";
 // components
 import {
   ListLayout,
@@ -38,7 +38,12 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
 
   // TODO: update this
   // const {
-  //   issues: { loader: issueLoader, getIssuesIds: issueGetIssuesIds, fetchIssues: issueFetchIssues },
+  //   issues: {
+  //     loader: issueLoader,
+  //     getIssues: issueGetIssues,
+  //     getIssuesIds: issueGetIssuesIds,
+  //     fetchIssues: issueFetchIssues,
+  //   },
   //   issuesFilter: { issueFilters: issueIssueFilters, fetchFilters: issueFetchFilters },
   // } = useStoreIssues("project");
 
@@ -49,6 +54,11 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
   //   }
   // });
 
+  // console.log("---");
+  // console.log("issueGetIssuesIds", issueGetIssuesIds);
+  // console.log("issueGetIssues", issueGetIssues);
+  // console.log("---");
+
   const activeLayout = issueFilters?.displayFilters?.layout;
 
   return (

web/hooks/use-store-issues.tsx

@@ -1,7 +1,6 @@
 // issue store provider
 import { useMobxIssueStore } from "lib/mobx/store-issues-provider";
 // types
-import { IIssueStore } from "store/issue/issue.store";
 import { IWorkspaceIssues, IWorkspaceIssuesFilter } from "store/issue/workspace";
 import { IProfileIssues, IProfileIssuesFilter } from "store/issue/profile";
 import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
@@ -21,7 +20,6 @@ interface IStoreIssues {
   //   issuesFilter: IProfileIssuesFilter;
   // };
   project: {
-    allIssues: IIssueStore;
     issues: IProjectIssues;
     issuesFilter: IProjectIssuesFilter;
   };
@@ -86,7 +84,6 @@ const useStoreIssues = (issueSpace: keyof IStoreIssues) => {
     //   issuesFilter: profileIssuesFilter,
     // },
     project: {
-      allIssues: issues,
       issues: projectIssues,
       issuesFilter: projectIssuesFilter,
     },
@@ -113,7 +110,6 @@ const useStoreIssues = (issueSpace: keyof IStoreIssues) => {
   };
 
   return {
-    allIssues: storeIssues[issueSpace].allIssues,
     issues: storeIssues[issueSpace].issues,
     issuesFilter: storeIssues[issueSpace].issuesFilter,
   };

web/store/issue/issue.store.ts

@@ -1,3 +1,4 @@
+import get from "lodash/get";
 // store
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { IIssueRootStore } from "./root.store";
@@ -5,21 +6,18 @@ import { IIssueRootStore } from "./root.store";
 import { IIssue } from "types";
 
 export interface IIssueStore {
-  issues: { [key: string]: IIssue };
+  allIssues: { [key: string]: IIssue };
   // actions
   addIssue(issues: IIssue[]): void;
   updateIssue(issueId: string, issue: Partial<IIssue>): void;
   removeIssue(issueId: string): void;
   // helper Methods
   getIssueById(id: string): undefined | IIssue;
-  getIssuesByWorkspace(workspaceSlug: string): undefined | { [key: string]: IIssue };
-  getIssuesByProject(projectId: string): undefined | { [key: string]: IIssue };
-  getIssuesByCycle(cycleId: string): undefined | { [key: string]: IIssue };
-  getIssuesByModule(moduleId: string): undefined | { [key: string]: IIssue };
+  getIssuesByKey(issueKey: string, value: string): undefined | { [key: string]: IIssue };
 }
 
 export class IssueStore implements IIssueStore {
-  issues: { [key: string]: IIssue } = {};
+  allIssues: { [key: string]: IIssue } = {};
   // root store
   rootStore: IIssueRootStore;
 
@@ -28,7 +26,7 @@ export class IssueStore implements IIssueStore {
 
     makeObservable(this, {
       // observable
-      issues: observable,
+      allIssues: observable.ref,
       // actions
       addIssue: action,
       updateIssue: action,
@@ -39,68 +37,43 @@ export class IssueStore implements IIssueStore {
   addIssue = (issues: IIssue[]) => {
     if (issues && issues.length <= 0) return;
 
-    const _issues = { ...this.issues };
+    const _issues = { ...this.allIssues };
     issues.forEach((issue) => {
       _issues[issue.id] = issue;
     });
+
     runInAction(() => {
-      this.issues = _issues;
+      this.allIssues = _issues;
     });
   };
 
   updateIssue = (issueId: string, issue: Partial<IIssue>) => {
-    if (!issue || !issueId || !this.issues[issueId]) return;
-    this.issues[issueId] = { ...this.issues[issueId], ...issue };
+    if (!issue || !issueId || !this.allIssues[issueId]) return;
+    this.allIssues[issueId] = { ...this.allIssues[issueId], ...issue };
   };
 
   removeIssue = (issueId: string) => {
     if (issueId) return;
-    delete this.issues[issueId];
+    delete this.allIssues[issueId];
   };
 
   // helper methods
   getIssueById = (id: string) => {
     if (!id) return undefined;
-    return this.issues[id];
+    return this.allIssues[id];
   };
 
-  getIssuesByWorkspace = (workspaceSlug: string) => {
-    if (!workspaceSlug || !this.issues) return undefined;
-    const projectIssues = Object.values(this.issues).filter((issue) => issue?.workspace === workspaceSlug);
+  getIssuesByKey = (issueKey: keyof IIssue, value: string) => {
+    if (!issueKey || !value || !this.allIssues) return undefined;
     const filteredIssues: { [key: string]: IIssue } = {};
-    projectIssues.map((issue) => {
-      filteredIssues[issue.id] = issue;
-    });
-    return filteredIssues;
-  };
 
-  getIssuesByProject = (projectId: string) => {
-    if (!projectId || !this.issues) return undefined;
-    const projectIssues = Object.values(this.issues).filter((issue) => issue?.project === projectId);
-    const filteredIssues: { [key: string]: IIssue } = {};
-    projectIssues.map((issue) => {
-      filteredIssues[issue.id] = issue;
+    Object.values(this.allIssues).forEach((issue) => {
+      const issueKeyValue = get(issue, issueKey);
+      if (issueKeyValue == value) {
+        filteredIssues[issue.id] = issue;
+      }
     });
-    return filteredIssues;
-  };
 
-  getIssuesByCycle = (projectId: string) => {
-    if (!projectId || !this.issues) return undefined;
-    const projectIssues = Object.values(this.issues).filter((issue) => issue?.project === projectId);
-    const filteredIssues: { [key: string]: IIssue } = {};
-    projectIssues.map((issue) => {
-      filteredIssues[issue.id] = issue;
-    });
-    return filteredIssues;
-  };
-
-  getIssuesByModule = (projectId: string) => {
-    if (!projectId || !this.issues) return undefined;
-    const projectIssues = Object.values(this.issues).filter((issue) => issue?.project === projectId);
-    const filteredIssues: { [key: string]: IIssue } = {};
-    projectIssues.map((issue) => {
-      filteredIssues[issue.id] = issue;
-    });
     return filteredIssues;
   };
 }

web/store/issue/project/issue.store.ts

@@ -20,6 +20,7 @@ export interface IProjectIssues {
   loader: TLoader;
   issues: { [project_id: string]: string[] };
   // computed
+  getIssues: { [issue_id: string]: IIssue } | undefined;
   getIssuesIds: IGroupedIssues | ISubGroupedIssues | TUnGroupedIssues | undefined;
   // action
   fetchIssues: (workspaceSlug: string, projectId: string, loadType: TLoader) => Promise<IIssueResponse>;
@@ -46,6 +47,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
       loader: observable.ref,
       issues: observable,
       // computed
+      getIssues: computed,
       getIssuesIds: computed,
       // action
       fetchIssues: action,
@@ -65,7 +67,7 @@ export class ProjectIssues extends IssueHelperStore implements IProjectIssues {
     const projectId = this.rootStore?.projectId;
     if (!projectId) return undefined;
 
-    const _issues = this.rootStore.issues.getIssuesByProject(projectId);
+    const _issues = this.rootStore.issues.getIssuesByKey("project", projectId);
     if (!_issues) return undefined;
 
     return _issues;