refactor: using label store to get labels

apps/app/components/core/filters/filters-list.tsx

@@ -10,7 +10,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
+import { IIssueFilterOptions, IState, IUserLite, TStateGroups, LabelLite } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -18,7 +18,7 @@ type Props = {
   filters: Partial<IIssueFilterOptions>;
   setFilters: (updatedFilter: Partial<IIssueFilterOptions>) => void;
   clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
+  labels: LabelLite[] | undefined;
   members: IUserLite[] | undefined;
   states: IState[] | undefined;
 };

apps/app/components/core/views/board-view/board-header.tsx

@@ -1,18 +1,21 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // services
-import issuesService from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // component
 import { Avatar, Icon } from "components/ui";
 // icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -20,7 +23,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IIssueViewProps, IState } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   currentState?: IState | null;
@@ -32,7 +35,8 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const BoardHeader: React.FC<Props> = ({
+export const BoardHeader: React.FC<Props> = observer(
+  ({
     currentState,
     groupTitle,
     addIssueToGroup,
@@ -40,20 +44,14 @@ export const BoardHeader: React.FC<Props> = ({
     setIsCollapsed,
     disableUserActions,
     viewProps,
-}) => {
+  }) => {
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
     const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
 
-  const { data: issueLabels } = useSWR(
+    const { label: labelStore } = useMobxStore();
-    workspaceSlug && projectId && selectedGroup === "labels"
+    const { labels, loadLabels } = labelStore;
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && selectedGroup === "labels"
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
 
     const { data: members } = useSWR(
       workspaceSlug && projectId && selectedGroup === "created_by"
@@ -66,6 +64,10 @@ export const BoardHeader: React.FC<Props> = ({
 
     const { projects } = useProjects();
 
+    useEffect(() => {
+      if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+    }, [workspaceSlug, projectId, loadLabels]);
+
     const getGroupTitle = () => {
       let title = addSpaceIfCamelCase(groupTitle);
 
@@ -74,7 +76,7 @@ export const BoardHeader: React.FC<Props> = ({
           title = addSpaceIfCamelCase(currentState?.name ?? "");
           break;
         case "labels":
-        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+          title = labels?.find((label) => label.id === groupTitle)?.name ?? "None";
           break;
         case "project":
           title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -113,8 +115,7 @@ export const BoardHeader: React.FC<Props> = ({
               : null);
           break;
         case "labels":
-        const labelColor =
+          const labelColor = labels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
           icon = (
             <span
               className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@@ -175,7 +176,10 @@ export const BoardHeader: React.FC<Props> = ({
                 className="text-base font-medium text-custom-text-900"
               />
             ) : (
-            <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
+              <Icon
+                iconName="open_in_full"
+                className="text-base font-medium text-custom-text-900"
+              />
             )}
           </button>
           {!disableUserActions && selectedGroup !== "created_by" && (
@@ -190,4 +194,5 @@ export const BoardHeader: React.FC<Props> = ({
         </div>
       </div>
     );
-};
+  }
+);

apps/app/components/core/views/issues-view.tsx

@@ -1,9 +1,13 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // react-beautiful-dnd
 import { DropResult } from "react-beautiful-dnd";
 // services
@@ -37,7 +41,6 @@ import {
   MODULE_DETAILS,
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_ISSUE_LABELS,
   STATES_LIST,
 } from "constants/fetch-keys";
 
@@ -46,10 +49,8 @@ type Props = {
   disableUserActions?: boolean;
 };
 
-export const IssuesView: React.FC<Props> = ({
+export const IssuesView: React.FC<Props> = observer((props) => {
-  openIssuesListModal,
+  const { openIssuesListModal, disableUserActions = false } = props;
-  disableUserActions = false,
-}) => {
   // create issue modal
   const [createIssueModal, setCreateIssueModal] = useState(false);
   const [createViewModal, setCreateViewModal] = useState<any>(null);
@@ -75,6 +76,9 @@ export const IssuesView: React.FC<Props> = ({
 
   const { user } = useUserAuth();
 
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels } = labelStore;
+
   const { setToastAlert } = useToast();
 
   const {
@@ -99,15 +103,12 @@ export const IssuesView: React.FC<Props> = ({
   );
   const states = getStatesList(stateGroups);
 
-  const { data: labels } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug as string, projectId as string);
+  }, [loadLabels, projectId, workspaceSlug]);
+
   const handleDeleteIssue = useCallback(
     (issue: IIssue) => {
       setDeleteIssueModal(true);
@@ -564,4 +565,4 @@ export const IssuesView: React.FC<Props> = ({
       />
     </>
   );
-};
+});

apps/app/components/core/views/list-view/single-list.tsx

@@ -1,11 +1,16 @@
+import { useEffect } from "react";
+
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
 import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
@@ -20,16 +25,9 @@ import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
 // types
-import {
+import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
-  ICurrentUserResponse,
-  IIssue,
-  IIssueLabels,
-  IIssueViewProps,
-  IState,
-  UserAuth,
-} from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   currentState?: IState | null;
@@ -44,7 +42,8 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const SingleList: React.FC<Props> = ({
+export const SingleList: React.FC<Props> = observer((props) => {
+  const {
     currentState,
     groupTitle,
     addIssueToGroup,
@@ -55,7 +54,8 @@ export const SingleList: React.FC<Props> = ({
     user,
     userAuth,
     viewProps,
-}) => {
+  } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
@@ -65,12 +65,8 @@ export const SingleList: React.FC<Props> = ({
 
   const { groupByProperty: selectedGroup, groupedIssues } = viewProps;
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+  const { label: labelStore } = useMobxStore();
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+  const { labels, loadLabels } = labelStore;
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
 
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
@@ -81,6 +77,10 @@ export const SingleList: React.FC<Props> = ({
 
   const { projects } = useProjects();
 
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
+
   const getGroupTitle = () => {
     let title = addSpaceIfCamelCase(groupTitle);
 
@@ -89,7 +89,7 @@ export const SingleList: React.FC<Props> = ({
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
       case "labels":
-        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        title = labels?.find((label) => label.id === groupTitle)?.name ?? "None";
         break;
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -128,8 +128,7 @@ export const SingleList: React.FC<Props> = ({
             : null);
         break;
       case "labels":
-        const labelColor =
+        const labelColor = labels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
         icon = (
           <span
             className="h-3 w-3 flex-shrink-0 rounded-full"
@@ -252,4 +251,4 @@ export const SingleList: React.FC<Props> = ({
       )}
     </Disclosure>
   );
-};
+});

apps/app/components/issues/sidebar-select/label.tsx

@@ -2,7 +2,9 @@ import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // react-hook-form
 import { Controller, UseFormWatch, useForm } from "react-hook-form";
@@ -10,8 +12,6 @@ import { Controller, UseFormWatch, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 // headless ui
 import { Listbox, Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
@@ -25,9 +25,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IIssueLabels } from "types";
+import { IIssue, LabelForm } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   issueDetails: IIssue | undefined;
@@ -38,19 +36,13 @@ type Props = {
   uneditable: boolean;
 };
 
-const defaultValues: Partial<IIssueLabels> = {
+const defaultValues: Partial<LabelForm> = {
   name: "",
   color: "#ff0000",
 };
 
-export const SidebarLabelSelect: React.FC<Props> = ({
+export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
-  issueDetails,
+  const { issueDetails, issueControl, watchIssue, submitChanges, isNotAllowed, uneditable } = props;
-  issueControl,
-  watchIssue,
-  submitChanges,
-  isNotAllowed,
-  uneditable,
-}) => {
   const [createLabelForm, setCreateLabelForm] = useState(false);
 
   const router = useRouter();
@@ -64,33 +56,38 @@ export const SidebarLabelSelect: React.FC<Props> = ({
     watch,
     control: labelControl,
     setFocus,
-  } = useForm<Partial<IIssueLabels>>({
+  } = useForm<LabelForm>({
     defaultValues,
   });
 
   const { user } = useUser();
 
-  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
+  const { label: labelStore } = useMobxStore();
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+  const {
-    workspaceSlug && projectId
+    labels,
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+    loadLabels,
-      : null
+    createLabel,
-  );
+    getLabelById,
+    getLabelChildren,
+    isLabelsLoading: isLoading,
+  } = labelStore;
 
-  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
+  useEffect(() => {
-    if (!workspaceSlug || !projectId || isSubmitting) return;
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
 
-    await issuesService
+  const handleNewLabel = async (formData: LabelForm) => {
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+    if (!workspaceSlug || !projectId || isSubmitting || !user) return;
-      .then((res) => {
+
+    await createLabel(workspaceSlug.toString(), projectId.toString(), formData, user).then(
+      (res: any) => {
         reset(defaultValues);
 
-        issueLabelMutate((prevData: any) => [...(prevData ?? []), res], false);
-
         submitChanges({ labels_list: [...(issueDetails?.labels ?? []), res.id] });
 
         setCreateLabelForm(false);
-      });
+      }
+    );
   };
 
   useEffect(() => {
@@ -110,7 +107,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
         <div className="basis-1/2">
           <div className="flex flex-wrap gap-1">
             {watchIssue("labels_list")?.map((labelId) => {
-              const label = issueLabels?.find((l) => l.id === labelId);
+              const label = getLabelById(labelId);
 
               if (label)
                 return (
@@ -168,12 +165,10 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                       >
                         <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-28 w-40 overflow-auto rounded-md bg-custom-background-80 py-1 text-xs shadow-lg border border-custom-border-100 focus:outline-none">
                           <div className="py-1">
-                            {issueLabels ? (
+                            {!isLoading ? (
-                              issueLabels.length > 0 ? (
+                              labels.length > 0 ? (
-                                issueLabels.map((label: IIssueLabels) => {
+                                labels.map((label) => {
-                                  const children = issueLabels?.filter(
+                                  const children = getLabelChildren(label.id);
-                                    (l) => l.parent === label.id
-                                  );
 
                                   if (children.length === 0) {
                                     if (!label.parent)
@@ -346,4 +341,4 @@ export const SidebarLabelSelect: React.FC<Props> = ({
       )}
     </div>
   );
-};
+});

apps/app/components/issues/view-select/label.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
-// services
-import issuesService from "services/issues.service";
 // component
 import { CreateLabelModal } from "components/labels";
 // ui
@@ -13,9 +13,7 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
 // icons
 import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse, IIssue, IIssueLabels } from "types";
+import { ICurrentUserResponse, IIssue } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;
@@ -28,7 +26,8 @@ type Props = {
   isNotAllowed: boolean;
 };
 
-export const ViewLabelSelect: React.FC<Props> = ({
+export const ViewLabelSelect: React.FC<Props> = observer((props) => {
+  const {
     issue,
     partialUpdateIssue,
     position = "left",
@@ -37,20 +36,21 @@ export const ViewLabelSelect: React.FC<Props> = ({
     user,
     isNotAllowed,
     customButton = false,
-}) => {
+  } = props;
+
   const [labelModal, setLabelModal] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+  const { label: labelStore } = useMobxStore();
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+  const { labels, loadLabels, getLabelById } = labelStore;
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
 
-  const options = issueLabels?.map((label) => ({
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
+
+  const options = labels?.map((label) => ({
     value: label.id,
     query: label.name,
     content: (
@@ -74,7 +74,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
         issue.labels.length > 0
           ? issue.labels
               .map((labelId) => {
-                const label = issueLabels?.find((l) => l.id === labelId);
+                const label = getLabelById(labelId);
 
                 return label?.name ?? "";
               })
@@ -90,7 +90,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
         {issue.labels.length > 0 ? (
           <>
             {issue.labels.slice(0, 4).map((labelId, index) => {
-              const label = issueLabels?.find((l) => l.id === labelId);
+              const label = getLabelById(labelId);
 
               return (
                 <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
@@ -154,4 +154,4 @@ export const ViewLabelSelect: React.FC<Props> = ({
       />
     </>
   );
-};
+});

apps/app/components/views/form.tsx

@@ -4,6 +4,10 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
@@ -20,9 +24,8 @@ import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 import { getStatesList } from "helpers/state.helper";
 // types
 import { IQuery, IView } from "types";
-import issuesService from "services/issues.service";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, STATES_LIST } from "constants/fetch-keys";
+import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   handleFormSubmit: (values: IView) => Promise<void>;
@@ -37,13 +40,9 @@ const defaultValues: Partial<IView> = {
   description: "",
 };
 
-export const ViewForm: React.FC<Props> = ({
+export const ViewForm: React.FC<Props> = observer((props) => {
-  handleFormSubmit,
+  const { handleFormSubmit, handleClose, status, data, preLoadedData } = props;
-  handleClose,
+
-  status,
-  data,
-  preLoadedData,
-}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -69,16 +68,16 @@ export const ViewForm: React.FC<Props> = ({
   );
   const states = getStatesList(stateGroups);
 
-  const { data: labels } = useSWR(
+  const { label: labelStore } = useMobxStore();
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
+  const { labels, loadLabels } = labelStore;
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
+
-      : null,
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
+  useEffect(() => {
+    if (workspaceSlug && projectId && (filters?.labels ?? []).length > 0)
+      loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels, filters]);
+
   const handleCreateUpdateView = async (formData: IView) => {
     await handleFormSubmit(formData);
 
@@ -211,4 +210,4 @@ export const ViewForm: React.FC<Props> = ({
       </div>
     </form>
   );
-};
+});

apps/app/components/views/select-filters.tsx

@@ -1,13 +1,16 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // services
 import stateService from "services/state.service";
 import projectService from "services/project.service";
-import issuesService from "services/issues.service";
 // components
 import { DueDateFilterModal } from "components/core";
 // ui
@@ -20,7 +23,7 @@ import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
 import { IIssueFilterOptions, IQuery } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
+import { PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 // constants
 import { PRIORITIES } from "constants/project";
 import { DUE_DATES } from "constants/due-dates";
@@ -32,17 +35,17 @@ type Props = {
   height?: "sm" | "md" | "rg" | "lg";
 };
 
-export const SelectFilters: React.FC<Props> = ({
+export const SelectFilters: React.FC<Props> = observer((props) => {
-  filters,
+  const { filters, onSelect, direction = "right", height = "md" } = props;
-  onSelect,
+
-  direction = "right",
-  height = "md",
-}) => {
   const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels } = labelStore;
+
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -58,12 +61,9 @@ export const SelectFilters: React.FC<Props> = ({
       : null
   );
 
-  const { data: issueLabels } = useSWR(
+  useEffect(() => {
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
-    workspaceSlug && projectId
+  }, [workspaceSlug, projectId, loadLabels]);
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
-      : null
-  );
 
   return (
     <>
@@ -160,9 +160,9 @@ export const SelectFilters: React.FC<Props> = ({
           {
             id: "labels",
             label: "Labels",
-            value: issueLabels,
+            value: labels,
             hasChildren: true,
-            children: issueLabels?.map((label) => ({
+            children: labels?.map((label) => ({
               id: label.id,
               label: (
                 <div className="flex items-center gap-2">
@@ -216,4 +216,4 @@ export const SelectFilters: React.FC<Props> = ({
       />
     </>
   );
-};
+});

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -4,6 +4,10 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
 // react-hook-form
 import { useForm } from "react-hook-form";
 // headless ui
@@ -16,7 +20,6 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // services
 import projectService from "services/project.service";
 import pagesService from "services/pages.service";
-import issuesService from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -56,13 +59,12 @@ import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import type { NextPage } from "next";
-import { IIssueLabels, IPage, IPageBlock, IProjectMember } from "types";
+import { IPage, IPageBlock, IProjectMember } from "types";
 // fetch-keys
 import {
   PAGE_BLOCKS_LIST,
   PAGE_DETAILS,
   PROJECT_DETAILS,
-  PROJECT_ISSUE_LABELS,
   USER_PROJECT_VIEW,
 } from "constants/fetch-keys";
 
@@ -80,6 +82,9 @@ const SinglePage: NextPage = () => {
 
   const { user } = useUser();
 
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels } = labelStore;
+
   const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
     defaultValues: { name: "" },
   });
@@ -115,13 +120,6 @@ const SinglePage: NextPage = () => {
       : null
   );
 
-  const { data: labels } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: memberDetails } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
@@ -129,6 +127,10 @@ const SinglePage: NextPage = () => {
       : null
   );
 
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
+
   const updatePage = async (formData: IPage) => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
@@ -691,4 +693,4 @@ const SinglePage: NextPage = () => {
   );
 };
 
-export default SinglePage;
+export default observer(SinglePage);