dev: new implementation of label storee

apps/app/store/label.ts

@@ -7,16 +7,27 @@ import issueService from "services/issues.service";
 // types
 import type { IIssueLabels, ICurrentUserResponse, LabelForm } from "types";
 
+type LabelDataStore = {
+  [projectId: string]: {
+    labels: IIssueLabels[];
+    isLoading: boolean;
+    isRevalidating: boolean;
+    error?: any;
+  };
+} | null;
+
 class LabelStore {
-  labels: IIssueLabels[] = [];
+  data: LabelDataStore = null;
-  isLabelsLoading: boolean = false;
+  // labels: IIssueLabels[] = [];
+  // isLabelsLoading: boolean = false;
   rootStore: any | null = null;
 
   constructor(_rootStore: any | null = null) {
     makeAutoObservable(this, {
-      labels: observable.ref,
+      // labels: observable.ref,
+      data: observable.ref,
       loadLabels: action,
-      isLabelsLoading: observable,
+      // isLabelsLoading: observable,
       createLabel: action,
       updateLabel: action,
       deleteLabel: action,
@@ -30,36 +41,89 @@ class LabelStore {
    */
 
   loadLabels = async (workspaceSlug: string, projectId: string) => {
-    this.isLabelsLoading = this.labels.length === 0;
+    // this.isLabelsLoading = this.labels.length === 0;
+
+    this.data = this.data || {
+      [projectId]: {
+        // labels: [...this.labels],
+        labels: [...this.getLabelsByProjectId(projectId)],
+        isLoading: this.getLabelsByProjectId(projectId).length === 0,
+        isRevalidating: true,
+        error: null,
+      },
+    };
+
     try {
       const labelsResponse: IIssueLabels[] = await issueService.getIssueLabels(
         workspaceSlug,
         projectId
       );
 
-      const _labels = [...(labelsResponse || [])].map((label) => ({
+      // const _labels = [...(labelsResponse || [])].map((label) => ({
-        id: label.id,
+      //   id: label.id,
-        name: label.name,
+      //   name: label.name,
-        description: label.description,
+      //   description: label.description,
-        color: label.color,
+      //   color: label.color,
-        parent: label.parent,
+      //   parent: label.parent,
-      }));
+      // }));
+
+      const _data = this.data?.[projectId] || {
+        labels: [
+          ...labelsResponse.map((label) => ({
+            id: label.id,
+            name: label.name,
+            description: label.description,
+            color: label.color,
+            parent: label.parent,
+            project: label.project,
+          })),
+        ].sort((a, b) => a.name.localeCompare(b.name)),
+        isLoading: false,
+        isRevalidating: false,
+      };
 
       runInAction(() => {
-        this.labels = _labels;
+        this.data = {
-        this.isLabelsLoading = false;
+          ...this.data,
+          [projectId]: _data,
+        };
+        // this.labels = _labels;
+        // this.isLabelsLoading = false;
       });
     } catch (error) {
       runInAction(() => {
-        this.isLabelsLoading = false;
+        this.data = {
+          ...this.data,
+          [projectId]: {
+            labels: [...this.getLabelsByProjectId(projectId)],
+            isLoading: false,
+            isRevalidating: false,
+            error,
+          },
+        };
+        // this.isLabelsLoading = false;
       });
       console.error("Fetching labels error", error);
     }
   };
 
-  getLabelById = (labelId: string) => this.labels.find((label) => label.id === labelId);
+  // getLabelById = (labelId: string) => this.labels.find((label) => label.id === labelId);
 
-  getLabelChildren = (labelId: string) => this.labels.filter((label) => label.parent === labelId);
+  getLabelById = (projectId: string, labelId: string) =>
+    this.data?.[projectId]?.labels.find((label) => label.id === labelId) || null;
+
+  /**
+   *
+   * @param projectId
+   * @returns {IIssueLabels[]} array of labels of a project
+   */
+  getLabelsByProjectId = (projectId: string): IIssueLabels[] =>
+    this.data?.[projectId]?.labels || [];
+
+  // getLabelChildren = (labelId: string) => this.labels.filter((label) => label.parent === labelId);
+
+  getLabelChildren = (projectId: string, labelId: string) =>
+    this.data?.[projectId]?.labels.filter((label) => label.parent === labelId) || [];
 
   /**
    * For provided query, this function returns all labels that contain query in their name from the labels store.
@@ -68,8 +132,10 @@ class LabelStore {
    * @example
    * getFilteredLabels("labe") // [{ id: "1", name: "label1", description: "", color: "", parent: null }]
    */
-  getFilteredLabels = (query: string): IIssueLabels[] =>
+  getFilteredLabels = (projectId: string | null, query: string): IIssueLabels[] => {
-    this.labels.filter((label) => label.name.includes(query));
+    if (!projectId) return [];
+    return this.data?.[projectId]?.labels.filter((label) => label.name.includes(query)) || [];
+  };
 
   createLabel = async (
     workspaceSlug: string,
@@ -85,19 +151,27 @@ class LabelStore {
         user
       );
 
-      const _label = [
+      const _data = this.data?.[projectId] || {
-        ...this.labels,
+        labels: [
-        {
+          ...this.getLabelsByProjectId(projectId),
-          id: labelResponse.id,
+          {
-          name: labelResponse.name,
+            id: labelResponse.id,
-          description: labelResponse.description,
+            name: labelResponse.name,
-          color: labelResponse.color,
+            description: labelResponse.description,
-          parent: labelResponse.parent,
+            color: labelResponse.color,
-        },
+            parent: labelResponse.parent,
-      ].sort((a, b) => a.name.localeCompare(b.name));
+            project: labelResponse.project,
+          },
+        ].sort((a, b) => a.name.localeCompare(b.name)),
+        isLoading: false,
+        isRevalidating: false,
+      };
 
       runInAction(() => {
-        this.labels = _label;
+        this.data = {
+          ...this.data,
+          [projectId]: _data,
+        };
       });
       return labelResponse;
     } catch (error) {
@@ -122,23 +196,31 @@ class LabelStore {
         user
       );
 
-      const _labels = [...this.labels]
+      const _data = this.data?.[projectId] || {
-        .map((label) => {
+        labels: [
-          if (label.id === labelId) {
+          ...this.getLabelsByProjectId(projectId).map((label) => {
-            return {
+            if (label.id === labelId) {
-              id: labelResponse.id,
+              return {
-              name: labelResponse.name,
+                id: labelResponse.id,
-              description: labelResponse.description,
+                name: labelResponse.name,
-              color: labelResponse.color,
+                description: labelResponse.description,
-              parent: labelResponse.parent,
+                color: labelResponse.color,
-            };
+                parent: labelResponse.parent,
-          }
+                project: labelResponse.project,
-          return label;
+              };
-        })
+            }
-        .sort((a, b) => a.name.localeCompare(b.name));
+            return label;
+          }),
+        ],
+        isLoading: false,
+        isRevalidating: false,
+      };
 
       runInAction(() => {
-        this.labels = _labels;
+        this.data = {
+          ...this.data,
+          [projectId]: _data,
+        };
       });
     } catch (error) {
       console.error("Updating label error", error);
@@ -155,10 +237,17 @@ class LabelStore {
     try {
       issueService.deleteIssueLabel(workspaceSlug, projectId, labelId, user);
 
-      const _labels = [...this.labels].filter((label) => label.id !== labelId);
+      const _data = this.data?.[projectId] || {
+        labels: [...this.getLabelsByProjectId(projectId)].filter((label) => label.id !== labelId),
+        isLoading: false,
+        isRevalidating: false,
+      };
 
       runInAction(() => {
-        this.labels = _labels;
+        this.data = {
+          ...this.data,
+          [projectId]: _data,
+        };
       });
     } catch (error) {
       console.error("Deleting label error", error);