fix: merge conflict

refactor: - using single types instead of lite version, - isLoading logic for label store

apps/app/components/core/activity.tsx

@@ -53,7 +53,11 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
 const activityDetails: {
   [key: string]: {
-    message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
+    message: (
+      activity: IIssueActivity,
+      showIssue: boolean,
+      backgroundColor?: string
+    ) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -253,7 +257,7 @@ const activityDetails: {
     icon: <Icon iconName="stack" className="!text-sm" aria-hidden="true" />,
   },
   labels: {
-    message: (activity, showIssue) => {
+    message: (activity, showIssue, backgroundColor = "#000000") => {
       if (activity.old_value === "")
         return (
           <>
@@ -262,7 +266,7 @@ const activityDetails: {
               <span
                 className="h-1.5 w-1.5 rounded-full"
                 style={{
-                  backgroundColor: "#000000",
+                  backgroundColor,
                 }}
                 aria-hidden="true"
               />
@@ -532,14 +536,26 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
+type ActivityMessageProps = {
   activity: IIssueActivity;
   showIssue?: boolean;
-}) => (
+};
+
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const ActivityMessage = observer(({ activity, showIssue = false }: ActivityMessageProps) => {
+  const {
+    label: { getLabelById },
+  } = useMobxStore();
+
+  return (
     <>
-    {activityDetails[activity.field as keyof typeof activityDetails]?.message(activity, showIssue)}
+      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        activity.field === "labels" ? getLabelById(activity?.new_identifier!)?.color : undefined
+      )}
     </>
-);
+  );
+});

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, IIssueLabels } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 

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(
-    workspaceSlug && projectId && selectedGroup === "labels"
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && selectedGroup === "labels"
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
+    const { label: labelStore } = useMobxStore();
+    const { labels, loadLabels } = labelStore;
 
     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 =
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+          const labelColor = labels?.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> = ({
-  openIssuesListModal,
-  disableUserActions = false,
-}) => {
+export const IssuesView: React.FC<Props> = observer((props) => {
+  const { openIssuesListModal, disableUserActions = false } = props;
   // 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 {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueLabels,
-  IIssueViewProps,
-  IState,
-  UserAuth,
-} from "types";
+import { ICurrentUserResponse, IIssue, 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[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels } = labelStore;
 
   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 =
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        const labelColor = labels?.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/select/label.tsx

@@ -1,13 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
-// services
-import issuesServices from "services/issues.service";
 // ui
 import { IssueLabelsList } from "components/ui";
 // icons
@@ -20,8 +19,6 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import type { IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,24 +27,28 @@ type Props = {
   projectId: string;
 };
 
-export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
+export const IssueLabelSelect: React.FC<Props> = observer(
+  ({ setIsOpen, value, onChange, projectId }) => {
     // states
     const [query, setQuery] = useState("");
 
     const router = useRouter();
     const { workspaceSlug } = router.query;
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
-      : null
-  );
+    const { label: labelStore } = useMobxStore();
+    const {
+      isLabelsLoading: isLoading,
+      labels,
+      loadLabels,
+      getLabelChildren,
+      getFilteredLabels,
+    } = labelStore;
 
-  const filteredOptions =
-    query === ""
-      ? issueLabels
-      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
+    useEffect(() => {
+      if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId);
+    }, [workspaceSlug, projectId, loadLabels]);
+
+    const filteredOptions = getFilteredLabels(query);
 
     return (
       <Combobox
@@ -59,17 +60,17 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       >
         {({ open }: any) => (
           <>
-          <Combobox.Button className="flex cursor-pointer items-center text-xs">
+            <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200 hover:bg-custom-background-80">
               {value && value.length > 0 ? (
-              <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs">
+                <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
                   <IssueLabelsList
-                  labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                    labels={value.map((v) => labels?.find((l) => l.id === v)?.color) ?? []}
                     length={3}
                     showLength={true}
                   />
                 </span>
               ) : (
-              <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs rounded-md border border-custom-border-200 shadow-sm duration-200 hover:bg-custom-background-80">
+                <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
                   <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
                   <span className=" text-custom-text-200">Label</span>
                 </span>
@@ -100,10 +101,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   />
                 </div>
                 <div className="py-1.5">
-                {issueLabels && filteredOptions ? (
+                  {!isLoading && filteredOptions ? (
                     filteredOptions.length > 0 ? (
                       filteredOptions.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
+                        const children = getLabelChildren(label.id);
 
                         if (children.length === 0) {
                           if (!label.parent)
@@ -205,4 +206,5 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
         )}
       </Combobox>
     );
-};
+  }
+);

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";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IIssue, LabelForm } from "types";
 
 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> = ({
-  issueDetails,
-  issueControl,
-  watchIssue,
-  submitChanges,
-  isNotAllowed,
-  uneditable,
-}) => {
+export const SidebarLabelSelect: React.FC<Props> = observer((props) => {
+  const { issueDetails, issueControl, watchIssue, submitChanges, isNotAllowed, uneditable } = props;
   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[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { label: labelStore } = useMobxStore();
+  const {
+    labels,
+    loadLabels,
+    createLabel,
+    getLabelById,
+    getLabelChildren,
+    isLabelsLoading: isLoading,
+  } = labelStore;
 
-  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
-    if (!workspaceSlug || !projectId || isSubmitting) return;
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
 
-    await issuesService
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-      .then((res) => {
+  const handleNewLabel = async (formData: LabelForm) => {
+    if (!workspaceSlug || !projectId || isSubmitting || !user) return;
+
+    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 ? (
-                              issueLabels.length > 0 ? (
-                                issueLabels.map((label: IIssueLabels) => {
-                                  const children = issueLabels?.filter(
-                                    (l) => l.parent === label.id
-                                  );
+                            {!isLoading ? (
+                              labels.length > 0 ? (
+                                labels.map((label) => {
+                                  const children = getLabelChildren(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";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { ICurrentUserResponse, IIssue } from "types";
 
 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[]>(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels, getLabelById } = labelStore;
 
-  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/labels/create-label-modal.tsx

@@ -2,7 +2,9 @@ import React, { useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
@@ -10,16 +12,13 @@ import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 // headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
+import type { ICurrentUserResponse, IIssueLabels, LabelForm } from "types";
 // constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 
 // types
@@ -31,21 +30,19 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-const defaultValues: Partial<IState> = {
+const defaultValues: Partial<LabelForm> = {
   name: "",
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateLabelModal: React.FC<Props> = ({
-  isOpen,
-  projectId,
-  handleClose,
-  user,
-  onSuccess,
-}) => {
+export const CreateLabelModal: React.FC<Props> = observer(
+  ({ isOpen, projectId, handleClose, user, onSuccess }) => {
     const router = useRouter();
     const { workspaceSlug } = router.query;
 
+    const { label: labelStore } = useMobxStore();
+    const { createLabel } = labelStore;
+
     const {
       register,
       formState: { errors, isSubmitting },
@@ -67,19 +64,13 @@ export const CreateLabelModal: React.FC<Props> = ({
       reset(defaultValues);
     };
 
-  const onSubmit = async (formData: IIssueLabels) => {
-    if (!workspaceSlug) return;
+    const onSubmit = async (formData: LabelForm) => {
+      if (!workspaceSlug || !user) return;
 
-    await issuesService
-      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-      .then((res) => {
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
+      await createLabel(workspaceSlug.toString(), projectId as string, formData, user)
+        .then((response: any) => {
           onClose();
-        if (onSuccess) onSuccess(res);
+          if (onSuccess) onSuccess(response);
         })
         .catch((error) => {
           console.log(error);
@@ -206,4 +197,5 @@ export const CreateLabelModal: React.FC<Props> = ({
         </Dialog>
       </Transition.Root>
     );
-};
+  }
+);

apps/app/components/labels/create-update-label-inline.tsx

@@ -2,7 +2,9 @@ import React, { forwardRef, useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
@@ -12,8 +14,6 @@ import useUserAuth from "hooks/use-user-auth";
 import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
@@ -21,7 +21,6 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
 
 type Props = {
@@ -37,13 +36,16 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
-  function CreateUpdateLabelInline(props, ref) {
+export const CreateUpdateLabelInline = observer(
+  forwardRef<HTMLDivElement, Props>(function CreateUpdateLabelInline(props, ref) {
     const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
 
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
+    const { label: labelStore } = useMobxStore();
+    const { createLabel, updateLabel } = labelStore;
+
     const { user } = useUserAuth();
 
     const {
@@ -65,39 +67,25 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
     };
 
     const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
+      if (!workspaceSlug || !projectId || isSubmitting || !user) return;
 
-      await issuesService
-        .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-        .then((res) => {
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) => [res, ...(prevData ?? [])],
-            false
-          );
+      await createLabel(workspaceSlug.toString(), projectId.toString(), formData, user).finally(
+        () => {
           handleClose();
-        });
+        }
+      );
     };
 
     const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
+      if (!workspaceSlug || !projectId || isSubmitting || !user) return;
 
-      await issuesService
-        .patchIssueLabel(
-          workspaceSlug as string,
-          projectId as string,
+      await updateLabel(
+        workspaceSlug.toString(),
+        projectId.toString(),
         labelToUpdate?.id ?? "",
         formData,
         user
-        )
-        .then(() => {
-          reset(defaultValues);
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) =>
-              prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
-            false
-          );
+      ).finally(() => {
         handleClose();
       });
     };
@@ -212,5 +200,5 @@ export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
         )}
       </div>
     );
-  }
+  })
 );

apps/app/components/labels/delete-label-modal.tsx

@@ -2,22 +2,20 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } from "swr";
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { DangerButton, SecondaryButton } from "components/ui";
 // types
 import type { ICurrentUserResponse, IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -26,12 +24,15 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
+export const DeleteLabelModal: React.FC<Props> = observer(({ isOpen, onClose, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { label: labelStore } = useMobxStore();
+  const { deleteLabel } = labelStore;
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
@@ -40,28 +41,21 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
   };
 
   const handleDeletion = async () => {
-    if (!workspaceSlug || !projectId || !data) return;
+    if (!workspaceSlug || !projectId || !data || !user) return;
 
     setIsDeleteLoading(true);
 
-    mutate<IIssueLabels[]>(
-      PROJECT_ISSUE_LABELS(projectId.toString()),
-      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-      false
-    );
-
-    await issuesService
-      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
-      .then(() => handleClose())
+    await deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
       .catch(() => {
-        setIsDeleteLoading(false);
-
-        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Label could not be deleted. Please try again.",
         });
+      })
+      .finally(() => {
+        handleClose();
+        setIsDeleteLoading(false);
       });
   };
 
@@ -130,4 +124,4 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
       </Dialog>
     </Transition.Root>
   );
-};
+});

apps/app/components/labels/labels-list-modal.tsx

@@ -2,18 +2,16 @@ import React, { useState } 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";
 
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // icons
 import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-// services
-import issuesService from "services/issues.service";
 // types
 import { ICurrentUserResponse, IIssueLabels } from "types";
-// constants
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
@@ -22,23 +20,17 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
+export const LabelsListModal: React.FC<Props> = observer(
+  ({ isOpen, handleClose, parent, user }) => {
     const [query, setQuery] = useState("");
 
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
+    const { label: labelStore } = useMobxStore();
+    const { updateLabel, getLabelChildren, getFilteredLabels } = labelStore;
 
-  const filteredLabels: IIssueLabels[] =
-    query === ""
-      ? issueLabels ?? []
-      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+    const filteredLabels = getFilteredLabels(query);
 
     const handleModalClose = () => {
       handleClose();
@@ -46,29 +38,17 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
     };
 
     const addChildLabel = async (label: IIssueLabels) => {
-    if (!workspaceSlug || !projectId) return;
+      if (!workspaceSlug || !projectId || !user) return;
 
-    mutate(
-      (prevData: any) =>
-        prevData?.map((l: any) => {
-          if (l.id === label.id) return { ...l, parent: parent?.id ?? "" };
-
-          return l;
-        }),
-      false
-    );
-
-    await issuesService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
+      updateLabel(
+        workspaceSlug.toString(),
+        projectId.toString(),
         label.id,
         {
           parent: parent?.id ?? "",
         },
         user
-      )
-      .then(() => mutate());
+      );
     };
 
     return (
@@ -120,7 +100,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                         )}
                         <ul className="text-sm text-gray-700">
                           {filteredLabels.map((label) => {
-                          const children = issueLabels?.filter((l) => l.parent === label.id);
+                            const children = getLabelChildren(label.id);
 
                             if (
                               (label.parent === "" || label.parent === null) && // issue does not have any other parent
@@ -176,4 +156,5 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
         </Dialog>
       </Transition.Root>
     );
-};
+  }
+);

apps/app/components/labels/single-label-group.tsx

@@ -2,12 +2,12 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
-import { mutate } 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";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -21,56 +21,36 @@ import {
 } from "@heroicons/react/24/outline";
 // types
 import { ICurrentUserResponse, IIssueLabels } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   label: IIssueLabels;
   labelChildren: IIssueLabels[];
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: () => void;
+  handleLabelDelete: (label: IIssueLabels) => void;
   user: ICurrentUserResponse | undefined;
 };
 
-export const SingleLabelGroup: React.FC<Props> = ({
-  label,
-  labelChildren,
-  addLabelToGroup,
-  editLabel,
-  handleLabelDelete,
-  user,
-}) => {
+export const SingleLabelGroup: React.FC<Props> = observer(
+  ({ label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete, user }) => {
     const router = useRouter();
     const { workspaceSlug, projectId } = router.query;
 
+    const { label: labelStore } = useMobxStore();
+    const { updateLabel } = labelStore;
+
     const removeFromGroup = (label: IIssueLabels) => {
-    if (!workspaceSlug || !projectId) return;
+      if (!workspaceSlug || !projectId || !user) return;
 
-    mutate<IIssueLabels[]>(
-      PROJECT_ISSUE_LABELS(projectId as string),
-      (prevData) =>
-        prevData?.map((l) => {
-          if (l.id === label.id) return { ...l, parent: null };
-
-          return l;
-        }),
-      false
-    );
-
-    issuesService
-      .patchIssueLabel(
-        workspaceSlug as string,
-        projectId as string,
+      updateLabel(
+        workspaceSlug.toString(),
+        projectId.toString(),
         label.id,
         {
           parent: null,
         },
         user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUE_LABELS(projectId as string));
-      });
+      );
     };
 
     return (
@@ -102,7 +82,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                       <span>Edit label</span>
                     </span>
                   </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={handleLabelDelete}>
+                  <CustomMenu.MenuItem onClick={() => handleLabelDelete(label)}>
                     <span className="flex items-center justify-start gap-2">
                       <TrashIcon className="h-4 w-4" />
                       <span>Delete label</span>
@@ -112,7 +92,9 @@ export const SingleLabelGroup: React.FC<Props> = ({
                 <Disclosure.Button>
                   <span>
                     <ChevronDownIcon
-                    className={`h-4 w-4 text-custom-text-100 ${!open ? "rotate-90 transform" : ""}`}
+                      className={`h-4 w-4 text-custom-text-100 ${
+                        !open ? "rotate-90 transform" : ""
+                      }`}
                     />
                   </span>
                 </Disclosure.Button>
@@ -158,7 +140,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                               <span>Edit label</span>
                             </span>
                           </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={handleLabelDelete}>
+                          <CustomMenu.MenuItem onClick={() => handleLabelDelete(child)}>
                             <span className="flex items-center justify-start gap-2">
                               <TrashIcon className="h-4 w-4" />
                               <span>Delete label</span>
@@ -175,4 +157,5 @@ export const SingleLabelGroup: React.FC<Props> = ({
         )}
       </Disclosure>
     );
-};
+  }
+);

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> = ({
-  handleFormSubmit,
-  handleClose,
-  status,
-  data,
-  preLoadedData,
-}) => {
+export const ViewForm: React.FC<Props> = observer((props) => {
+  const { handleFormSubmit, handleClose, status, data, preLoadedData } = props;
+
   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(
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
+  const { label: labelStore } = useMobxStore();
+  const { labels, loadLabels } = labelStore;
+
   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> = ({
-  filters,
-  onSelect,
-  direction = "right",
-  height = "md",
-}) => {
+export const SelectFilters: React.FC<Props> = observer((props) => {
+  const { filters, onSelect, direction = "right", height = "md" } = props;
+
   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(
-    projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
-      : null
-  );
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, loadLabels]);
 
   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);

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -1,14 +1,17 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, 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";
+
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
 import projectService from "services/project.service";
-import issuesService from "services/issues.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
@@ -31,7 +34,7 @@ import emptyLabel from "public/empty-state/label.svg";
 import { IIssueLabels } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { PROJECT_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
@@ -53,6 +56,9 @@ const LabelsSettings: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { label } = useMobxStore();
+  const { labels, isLabelsLoading: isLoading, getLabelChildren, loadLabels } = label;
+
   const { user } = useUserAuth();
 
   const scrollToRef = useRef<HTMLDivElement>(null);
@@ -64,12 +70,9 @@ const LabelsSettings: NextPage = () => {
       : null
   );
 
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
-      : null
-  );
+  useEffect(() => {
+    if (workspaceSlug && projectId) loadLabels(workspaceSlug.toString(), projectId.toString());
+  }, [loadLabels, projectId, workspaceSlug]);
 
   const newLabel = () => {
     setIsUpdating(false);
@@ -142,10 +145,10 @@ const LabelsSettings: NextPage = () => {
                 />
               )}
               <>
-                {issueLabels ? (
-                  issueLabels.length > 0 ? (
-                    issueLabels.map((label) => {
-                      const children = issueLabels?.filter((l) => l.parent === label.id);
+                {!isLoading ? (
+                  labels.length > 0 ? (
+                    labels.map((label) => {
+                      const children = getLabelChildren(label.id);
 
                       if (children && children.length === 0) {
                         if (!label.parent)
@@ -176,7 +179,7 @@ const LabelsSettings: NextPage = () => {
                                 behavior: "smooth",
                               });
                             }}
-                            handleLabelDelete={() => setSelectDeleteLabel(label)}
+                            handleLabelDelete={setSelectDeleteLabel}
                             user={user}
                           />
                         );
@@ -210,4 +213,4 @@ const LabelsSettings: NextPage = () => {
   );
 };
 
-export default LabelsSettings;
+export default observer(LabelsSettings);

apps/app/store/label.ts

@@ -0,0 +1,169 @@
+// mobx
+import { action, observable, runInAction, makeAutoObservable } from "mobx";
+
+// services
+import issueService from "services/issues.service";
+
+// types
+import type { IIssueLabels, ICurrentUserResponse, LabelForm } from "types";
+
+class LabelStore {
+  labels: IIssueLabels[] = [];
+  isLabelsLoading: boolean = false;
+  rootStore: any | null = null;
+
+  constructor(_rootStore: any | null = null) {
+    makeAutoObservable(this, {
+      labels: observable.ref,
+      loadLabels: action,
+      isLabelsLoading: observable,
+      createLabel: action,
+      updateLabel: action,
+      deleteLabel: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * @description Fetch all labels of a project and hydrate labels field
+   */
+
+  loadLabels = async (workspaceSlug: string, projectId: string) => {
+    this.isLabelsLoading = this.labels.length === 0;
+    try {
+      const labelsResponse: IIssueLabels[] = await issueService.getIssueLabels(
+        workspaceSlug,
+        projectId
+      );
+
+      const _labels = [...(labelsResponse || [])].map((label) => ({
+        id: label.id,
+        name: label.name,
+        description: label.description,
+        color: label.color,
+        parent: label.parent,
+      }));
+
+      runInAction(() => {
+        this.labels = _labels;
+        this.isLabelsLoading = false;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.isLabelsLoading = false;
+      });
+      console.error("Fetching labels error", error);
+    }
+  };
+
+  getLabelById = (labelId: string) => this.labels.find((label) => label.id === labelId);
+
+  getLabelChildren = (labelId: string) => this.labels.filter((label) => label.parent === labelId);
+
+  /**
+   * For provided query, this function returns all labels that contain query in their name from the labels store.
+   * @param query - query string
+   * @returns {IIssueLabels[]} array of labels that contain query in their name
+   * @example
+   * getFilteredLabels("labe") // [{ id: "1", name: "label1", description: "", color: "", parent: null }]
+   */
+  getFilteredLabels = (query: string): IIssueLabels[] =>
+    this.labels.filter((label) => label.name.includes(query));
+
+  createLabel = async (
+    workspaceSlug: string,
+    projectId: string,
+    labelForm: LabelForm,
+    user: ICurrentUserResponse
+  ) => {
+    try {
+      const labelResponse: IIssueLabels = await issueService.createIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelForm,
+        user
+      );
+
+      const _label = [
+        ...this.labels,
+        {
+          id: labelResponse.id,
+          name: labelResponse.name,
+          description: labelResponse.description,
+          color: labelResponse.color,
+          parent: labelResponse.parent,
+        },
+      ].sort((a, b) => a.name.localeCompare(b.name));
+
+      runInAction(() => {
+        this.labels = _label;
+      });
+      return labelResponse;
+    } catch (error) {
+      console.error("Creating label error", error);
+      return error;
+    }
+  };
+
+  updateLabel = async (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    labelForm: Partial<LabelForm>,
+    user: ICurrentUserResponse
+  ) => {
+    try {
+      const labelResponse: IIssueLabels = await issueService.patchIssueLabel(
+        workspaceSlug,
+        projectId,
+        labelId,
+        labelForm,
+        user
+      );
+
+      const _labels = [...this.labels]
+        .map((label) => {
+          if (label.id === labelId) {
+            return {
+              id: labelResponse.id,
+              name: labelResponse.name,
+              description: labelResponse.description,
+              color: labelResponse.color,
+              parent: labelResponse.parent,
+            };
+          }
+          return label;
+        })
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+      runInAction(() => {
+        this.labels = _labels;
+      });
+    } catch (error) {
+      console.error("Updating label error", error);
+      return error;
+    }
+  };
+
+  deleteLabel = async (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    user: ICurrentUserResponse
+  ) => {
+    try {
+      issueService.deleteIssueLabel(workspaceSlug, projectId, labelId, user);
+
+      const _labels = [...this.labels].filter((label) => label.id !== labelId);
+
+      runInAction(() => {
+        this.labels = _labels;
+      });
+    } catch (error) {
+      console.error("Deleting label error", error);
+    }
+  };
+}
+
+export default LabelStore;

apps/app/store/root.ts

@@ -3,6 +3,7 @@ import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
 import ThemeStore from "./theme";
+import LabelStore from "./label";
 import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
 
 enableStaticRendering(typeof window === "undefined");
@@ -10,11 +11,13 @@ enableStaticRendering(typeof window === "undefined");
 export class RootStore {
   user;
   theme;
+  label: LabelStore;
   projectPublish: IProjectPublishStore;
 
   constructor() {
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
+    this.label = new LabelStore(this);
     this.projectPublish = new ProjectPublishStore(this);
   }
 }

apps/app/types/index.d.ts

@@ -18,7 +18,7 @@ export * from "./calendar";
 export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";
-
+export * from "./labels";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object

apps/app/types/issues.d.ts

@@ -150,22 +150,6 @@ export type IssuePriorities = {
   user: string;
 };
 
-export interface IIssueLabels {
-  id: string;
-  created_at: Date;
-  updated_at: Date;
-  name: string;
-  description: string;
-  color: string;
-  created_by: string;
-  updated_by: string;
-  project: string;
-  project_detail: IProjectLite;
-  workspace: string;
-  workspace_detail: IWorkspaceLite;
-  parent: string | null;
-}
-
 export interface IIssueActivity {
   actor: string;
   actor_detail: IUserLite;

apps/app/types/labels.d.ts

@@ -0,0 +1,22 @@
+export interface IIssueLabels {
+  id: string;
+  created_at?: Date;
+  updated_at?: Date;
+  name: string;
+  description: string;
+  color: string;
+  created_by?: string;
+  updated_by?: string;
+  project?: string;
+  project_detail?: IProjectLite;
+  workspace?: string;
+  workspace_detail?: IWorkspaceLite;
+  parent: string | null;
+}
+
+export interface LabelForm {
+  name: string;
+  description: string;
+  color: string;
+  parent: string | null;
+}