refactor: projects & inbox store instances

web/components/estimates/estimates-list.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // store hooks
-import { useEstimate } from "hooks/store";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useEstimate, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
@@ -25,9 +24,7 @@ export const EstimatesList: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
   // store hooks
-  const {
-    project: { currentProjectDetails, updateProject },
-  } = useMobxStore();
+  const { updateProject, currentProjectDetails } = useProject();
   const { projectEstimates, getProjectEstimateById } = useEstimate();
   // toast alert
   const { setToastAlert } = useToast();

web/components/headers/global-issues.tsx

@@ -38,7 +38,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   // store hooks
   const {
     workspaceMember: { workspaceMembers },
-    project: { workspaceProjects },
     workspaceGlobalIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
   const {
@@ -136,7 +135,6 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                   handleFiltersUpdate={handleFiltersUpdate}
                   labels={workspaceLabels ?? undefined}
                   members={workspaceMembers?.map((m) => m.member)}
-                  projects={workspaceProjects ?? undefined}
                 />
               </FiltersDropdown>
               <FiltersDropdown title="Display" placement="bottom-end">

web/components/headers/project-issues.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import { useApplication, useLabel, useProject, useProjectState, useUser } from "hooks/store";
+import { useApplication, useLabel, useProject, useProjectState, useUser, useInbox } from "hooks/store";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
@@ -30,10 +30,10 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   // store hooks
   const {
     projectMember: { projectMembers },
-    inbox: inboxStore,
     // issue filters
     projectIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
+  const { inboxesList, isInboxEnabled, getInboxId } = useInbox();
   const {
     commandPalette: { toggleCreateIssueModal },
     eventTracker: { setTrackElement },
@@ -92,10 +92,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
     [workspaceSlug, projectId, updateFilters]
   );
 
-  const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId]?.[0] : undefined;
-
+  const inboxDetails = projectId ? inboxesList?.[projectId]?.[0] : undefined;
   const deployUrl = process.env.NEXT_PUBLIC_DEPLOY_URL;
-
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
@@ -195,8 +193,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               handleDisplayPropertiesUpdate={handleDisplayProperties}
             />
           </FiltersDropdown>
-          {projectId && inboxStore.isInboxEnabled && inboxDetails && (
-            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId)}`}>
+          {projectId && isInboxEnabled && inboxDetails && (
+            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${getInboxId(projectId)}`}>
               <span>
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox

web/components/inbox/actions-header.tsx

@@ -4,8 +4,7 @@ import { observer } from "mobx-react-lite";
 import DatePicker from "react-datepicker";
 import { Popover } from "@headlessui/react";
 // hooks
-import { useUser } from "hooks/store";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useUser, useInboxIssues } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -34,38 +33,35 @@ export const InboxActionsHeader = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
   // store hooks
-  const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore } = useMobxStore();
+  const { updateIssueStatus, getIssueById } = useInboxIssues();
   const {
     currentUser,
     membership: { currentProjectRole },
   } = useUser();
-
-  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null;
-
+  // toast
   const { setToastAlert } = useToast();
+  // derived values
+  const issue = getIssueById(inboxId as string, inboxIssueId as string);
 
   const markInboxStatus = async (data: TInboxStatus) => {
-    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return;
+    if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issue) return;
 
-    await inboxIssueDetailsStore
-      .updateIssueStatus(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!,
-        data
-      )
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong while updating inbox status. Please try again.",
-        })
-      );
+    await updateIssueStatus(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      inboxId.toString(),
+      issue.issue_inbox[0].id!,
+      data
+    ).catch(() =>
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Something went wrong while updating inbox status. Please try again.",
+      })
+    );
   };
 
-  const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId);
-  const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
+  // const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0;
 
   useEffect(() => {
     if (!issue?.issue_inbox[0].snoozed_till) return;
@@ -129,7 +125,7 @@ export const InboxActionsHeader = observer(() => {
         </div>
         {inboxIssueId && (
           <div className="col-span-3 flex items-center justify-between gap-4 px-4">
-            <div className="flex items-center gap-x-2">
+            {/* <div className="flex items-center gap-x-2">
               <button
                 type="button"
                 className="rounded border border-custom-border-200 bg-custom-background-90 p-1.5 hover:bg-custom-background-80"
@@ -153,7 +149,7 @@ export const InboxActionsHeader = observer(() => {
               <div className="text-sm">
                 {currentIssueIndex + 1}/{issuesList?.length ?? 0}
               </div>
-            </div>
+            </div> */}
             <div className="flex flex-wrap items-center gap-3">
               {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
                 <div className="flex-shrink-0">

web/components/inbox/filters-dropdown.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useInboxFilters } from "hooks/store";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
@@ -17,9 +17,9 @@ export const FiltersDropdown: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;
 
-  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+  const { inboxFilters, updateInboxFilters } = useInboxFilters();
 
-  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+  const filters = inboxId ? inboxFilters[inboxId.toString()]?.filters : undefined;
 
   let filtersLength = 0;
   Object.keys(filters ?? {}).forEach((key) => {
@@ -41,11 +41,11 @@ export const FiltersDropdown: React.FC = observer(() => {
           const valueExists = currentValue.includes(option.value);
 
           if (valueExists)
-            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+            updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
               [option.key]: currentValue.filter((val) => val !== option.value),
             });
           else
-            inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
+            updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), {
               [option.key]: [...currentValue, option.value],
             });
         }}

web/components/inbox/filters-list.tsx

@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useInboxFilters } from "hooks/store";
+
 // icons
 import { X } from "lucide-react";
 import { PriorityIcon } from "@plane/ui";
@@ -17,14 +18,14 @@ export const InboxFiltersList = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;
 
-  const { inboxFilters: inboxFiltersStore } = useMobxStore();
+  const { inboxFilters, updateInboxFilters } = useInboxFilters();
 
-  const filters = inboxId ? inboxFiltersStore.inboxFilters[inboxId.toString()]?.filters : undefined;
+  const filters = inboxId ? inboxFilters[inboxId.toString()]?.filters : undefined;
 
   const handleUpdateFilter = (filter: Partial<IInboxFilterOptions>) => {
     if (!workspaceSlug || !projectId || !inboxId) return;
 
-    inboxFiltersStore.updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter);
+    updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), filter);
   };
 
   const handleClearAllFilters = () => {
@@ -35,12 +36,7 @@ export const InboxFiltersList = observer(() => {
       newFilters[key as keyof IInboxFilterOptions] = null;
     });
 
-    inboxFiltersStore.updateInboxFilters(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      inboxId.toString(),
-      newFilters
-    );
+    updateInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newFilters);
   };
 
   let filtersLength = 0;
@@ -77,12 +73,12 @@ export const InboxFiltersList = observer(() => {
                             priority === "urgent"
                               ? "bg-red-500/20 text-red-500"
                               : priority === "high"
-                                ? "bg-orange-500/20 text-orange-500"
-                                : priority === "medium"
-                                  ? "bg-yellow-500/20 text-yellow-500"
-                                  : priority === "low"
-                                    ? "bg-green-500/20 text-green-500"
-                                    : "bg-custom-background-90 text-custom-text-200"
+                              ? "bg-orange-500/20 text-orange-500"
+                              : priority === "medium"
+                              ? "bg-yellow-500/20 text-yellow-500"
+                              : priority === "low"
+                              ? "bg-green-500/20 text-green-500"
+                              : "bg-custom-background-90 text-custom-text-200"
                           }`}
                         >
                           <span>

web/components/inbox/issue-card.tsx

@@ -1,29 +1,32 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
-
+import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
 // ui
 import { Tooltip, PriorityIcon } from "@plane/ui";
-// icons
-import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+// hooks
+import { useInboxIssues } from "hooks/store";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import { IInboxIssue } from "types";
 // constants
 import { INBOX_STATUS } from "constants/inbox";
 
 type Props = {
-  issue: IInboxIssue;
   active: boolean;
+  issueId: string;
 };
 
 export const InboxIssueCard: React.FC<Props> = (props) => {
-  const { issue, active } = props;
-
+  const { active } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;
+  // store hooks
+  const { getIssueById } = useInboxIssues();
+  // derived values
+  const issue = getIssueById(inboxId as string, props.issueId);
+  const issueStatus = issue?.issue_inbox[0].status;
 
-  const issueStatus = issue.issue_inbox[0].status;
+  if (!issue) return null;
 
   return (
     <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.issue_inbox[0].id}`}>

web/components/inbox/issues-list-sidebar.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
 // mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useInboxIssues } from "hooks/store";
 // components
 import { InboxIssueCard, InboxFiltersList } from "components/inbox";
 // ui
@@ -12,18 +12,18 @@ export const InboxIssuesListSidebar = observer(() => {
   const router = useRouter();
   const { inboxId, inboxIssueId } = router.query;
 
-  const { inboxIssues: inboxIssuesStore } = useMobxStore();
+  const { currentInboxIssues } = useInboxIssues();
 
-  const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : undefined;
+  const issuesList = currentInboxIssues;
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <InboxFiltersList />
       {issuesList ? (
         issuesList.length > 0 ? (
           <div className="h-full divide-y divide-custom-border-200 overflow-auto">
-            {issuesList.map((issue) => (
-              <InboxIssueCard key={issue.id} active={issue.issue_inbox[0].id === inboxIssueId} issue={issue} />
+            {issuesList.map((id) => (
+              <InboxIssueCard key={id} active={id === inboxIssueId} issueId={id} />
             ))}
           </div>
         ) : (