chore: implement useLabel hook.

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
@@ -16,9 +16,11 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
   // store hooks
   const {
     projectArchivedIssuesFilter: { issueFilters, updateFilters },
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
@@ -19,10 +19,12 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   };
   // store hooks
   const {
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
     cycleIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
@@ -16,9 +16,11 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
   // store hooks
   const {
     projectDraftIssuesFilter: { issueFilters, updateFilters },
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
-// mobx store
+// hooks
+import { useLabel } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
@@ -10,15 +10,18 @@ import { IIssueFilterOptions } from "types";
 import { EFilterType } from "store_legacy/issues/types";
 
 export const GlobalViewsAppliedFiltersRoot = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string };
-
+  // store hooks
   const {
-    workspace: { workspaceLabels },
     workspaceMember: { workspaceMembers },
     workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
-
+  const {
+    workspace: { workspaceLabels },
+  } = useLabel();
+  // derived values
   const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
@@ -19,10 +19,12 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   };
   // store hooks
   const {
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
     moduleIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
-// mobx store
+// hooks
+import { useLabel } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
@@ -10,17 +10,20 @@ import { IIssueFilterOptions } from "types";
 import { EFilterType } from "store_legacy/issues/types";
 
 export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query as {
     workspaceSlug: string;
   };
-
+  // store hooks
   const {
-    workspace: { workspaceLabels },
     workspaceProfileIssuesFilter: { issueFilters, updateFilters },
     projectMember: { projectMembers },
   } = useMobxStore();
-
+  const {
+    workspace: { workspaceLabels },
+  } = useLabel();
+  // derived values
   const userFilters = issueFilters?.filters;
 
   // filters whose value not null or empty array

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList, SaveFilterView } from "components/issues";
@@ -18,10 +18,12 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   };
   // store hooks
   const {
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
     projectIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   // derived values
   const userFilters = issueFilters?.filters;

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

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState, useProjectView } from "hooks/store";
+import { useLabel, useProjectState, useProjectView } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { AppliedFiltersList } from "components/issues";
@@ -23,10 +23,12 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   };
   // store hooks
   const {
-    projectLabel: { projectLabels },
     projectMember: { projectMembers },
     viewIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
+  const {
+    project: { projectLabels },
+  } = useLabel();
   const { projectStates } = useProjectState();
   const { getViewById, updateView } = useProjectView();
   // derived values

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

@@ -2,7 +2,8 @@ import React, { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
-// mobx store
+// hooks
+import { useLabel } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { GlobalViewsAppliedFiltersRoot } from "components/issues";
@@ -24,20 +25,22 @@ type Props = {
 
 export const AllIssueLayoutRoot: React.FC<Props> = observer((props) => {
   const { type = null } = props;
-
+  // router
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query as { workspaceSlug: string; globalViewId: string };
-
-  const currentIssueView = type ?? globalViewId;
-
+  // store hooks
   const {
     workspaceMember: { workspaceMembers },
-    workspace: { workspaceLabels },
     globalViews: { fetchAllGlobalViews },
     workspaceGlobalIssues: { loader, getIssues, getIssuesIds, fetchIssues, updateIssue, removeIssue },
     workspaceGlobalIssuesFilter: { currentView, issueFilters, fetchFilters, updateFilters, setCurrentView },
     workspaceMember: { currentWorkspaceUserProjectsRole },
   } = useMobxStore();
+  const {
+    workspace: { workspaceLabels },
+  } = useLabel();
+  // derived values
+  const currentIssueView = type ?? globalViewId;
 
   useSWR(workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS${workspaceSlug}` : null, async () => {
     if (workspaceSlug) {

web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx

@@ -2,7 +2,7 @@ import { FC, useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProjectState } from "hooks/store";
+import { useLabel, useProjectState } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 import {
   ICycleIssuesFilterStore,
@@ -50,10 +50,12 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
   // store hooks
   const {
     projectMember: { projectMembers },
-    projectLabel: { projectLabels },
     user: userStore,
   } = useMobxStore();
-  const { projectStates } = useProjectState()
+  const {
+    project: { projectLabels },
+  } = useLabel();
+  const { projectStates } = useProjectState();
   // derived values
   const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
   const { currentProjectRole } = userStore;
@@ -118,7 +120,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         />
       )}
       members={projectMembers?.map((m) => m.member)}
-      labels={projectLabels || undefined}
+      labels={projectLabels ?? []}
       states={projectStates}
       handleIssues={handleIssues}
       canEditProperties={canEditProperties}

web/components/issues/select/label.tsx

@@ -4,8 +4,8 @@ import useSWR from "swr";
 import { Combobox, Transition } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { observer } from "mobx-react-lite";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useLabel } from "hooks/store";
 // ui
 import { IssueLabelsList } from "components/ui";
 // icons
@@ -22,34 +22,30 @@ type Props = {
 
 export const IssueLabelSelect: React.FC<Props> = observer((props) => {
   const { setIsOpen, value, onChange, projectId, label, disabled = false } = props;
-
-  // states
-  const [query, setQuery] = useState("");
-
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store hooks
   const {
-    projectLabel: { labels, fetchProjectLabels },
-  } = useMobxStore();
-
+    project: { projectLabels, fetchProjectLabels },
+  } = useLabel();
+  // states
+  const [query, setQuery] = useState("");
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-
+  // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
   });
-
-  const issueLabels = labels?.[projectId] || [];
+  // derived values
+  const filteredOptions =
+    query === "" ? projectLabels : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
 
   useSWR(
     workspaceSlug && projectId ? `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}` : null,
     workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId) : null
   );
 
-  const filteredOptions =
-    query === "" ? issueLabels : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
-
   return (
     <Combobox
       as="div"
@@ -71,7 +67,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
               ) : value && value.length > 0 ? (
                 <span className="flex items-center justify-center gap-2 text-xs">
                   <IssueLabelsList
-                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)) ?? []}
+                    labels={value.map((v) => projectLabels?.find((l) => l.id === v)) ?? []}
                     length={3}
                     showLength
                   />
@@ -113,10 +109,10 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                   />
                 </div>
                 <div className="py-1.5">
-                  {issueLabels && filteredOptions ? (
+                  {projectLabels && filteredOptions ? (
                     filteredOptions.length > 0 ? (
                       filteredOptions.map((label) => {
-                        const children = issueLabels?.filter((l) => l.parent === label.id);
+                        const children = projectLabels?.filter((l) => l.parent === label.id);
 
                         if (children.length === 0) {
                           if (!label.parent)

web/components/labels/delete-label-modal.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { Dialog, Transition } from "@headlessui/react";
-
-// store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useLabel } from "hooks/store";
 // icons
 import { AlertTriangle } from "lucide-react";
 // hooks
@@ -22,17 +21,15 @@ type Props = {
 
 export const DeleteLabelModal: React.FC<Props> = observer((props) => {
   const { isOpen, onClose, data } = props;
-
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const { projectLabel: projectLabelStore } = useMobxStore();
-
+  // store hooks
+  const {
+    project: { deleteLabel },
+  } = useLabel();
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
   // hooks
   const { setToastAlert } = useToast();
 
@@ -46,8 +43,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
 
     setIsDeleteLoading(true);
 
-    await projectLabelStore
-      .deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+    await deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
         handleClose();
       })