chore: implemented autorun for inbox issues (#2470)

* fix: inbox issues not loading

* chore: implemented autorun for inbox issues

* chore: don't revalidate inbox list

web/components/headers/project-issues.tsx

@@ -157,16 +157,14 @@ export const ProjectIssuesHeader: FC = observer(() => {
               }
             />
           </FiltersDropdown>
-          {projectId && inboxStore.isInboxEnabled(projectId.toString()) && (
+          {projectId && inboxStore.isInboxEnabled && inboxDetails && (
             <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
               <a>
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox
-                  {inboxDetails && (
+                  <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
-                    <span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
+                    {inboxDetails.pending_issue_count}
-                      {inboxDetails.pending_issue_count}
+                  </span>
-                    </span>
-                  )}
                 </Button>
               </a>
             </Link>

web/components/inbox/issue-card.tsx

@@ -55,7 +55,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
                     : "border-custom-border-200"
                 }`}
               >
-                <PriorityIcon priority={issue.priority ?? null} className="text-sm" />
+                <PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
               </div>
             </Tooltip>
             <Tooltip

web/layouts/auth-layout/project-wrapper.tsx

@@ -18,11 +18,18 @@ interface IProjectAuthWrapper {
 export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const { children } = props;
   // store
-  const { user: userStore, project: projectStore } = useMobxStore();
+  const { user: userStore, project: projectStore, inbox: inboxStore } = useMobxStore();
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  // fetching project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
   // fetching user project member information
   useSWR(
     workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null,
@@ -51,6 +58,17 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
       ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
       : null
   );
+  // fetching project inboxes if inbox is enabled
+  useSWR(
+    workspaceSlug && projectId && inboxStore.isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId && inboxStore.isInboxEnabled
+      ? () => inboxStore.fetchInboxesList(workspaceSlug.toString(), projectId.toString())
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
 
   // check if the project member apis is loading
   if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === null) {

web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx

@@ -19,7 +19,7 @@ const ProjectInbox: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId } = router.query;
 
-  const { inboxIssues: inboxIssuesStore, inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore();
+  const { inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore();
 
   const projectDetails =
     workspaceSlug && projectId
@@ -27,12 +27,9 @@ const ProjectInbox: NextPage = () => {
       : undefined;
 
   useSWR(
-    workspaceSlug && projectId && inboxId ? `REVALIDATE_INBOX_${inboxId.toString()}` : null,
+    workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null,
     workspaceSlug && projectId && inboxId
-      ? async () => {
+      ? () => inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
-          await inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
-          await inboxIssuesStore.fetchInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString());
-        }
       : null
   );
 

web/store/inbox/inbox.store.ts

@@ -1,4 +1,4 @@
-import { observable, action, makeObservable, runInAction } from "mobx";
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
 // types
 import { RootStore } from "../root";
 // services
@@ -24,11 +24,13 @@ export interface IInboxStore {
   // actions
   setInboxId: (inboxId: string) => void;
 
-  isInboxEnabled: (projectId: string) => boolean;
   getInboxId: (projectId: string) => string | null;
 
   fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise<IInbox[]>;
   fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
+
+  // computed
+  isInboxEnabled: boolean;
 }
 
 export class InboxStore implements IInboxStore {
@@ -68,21 +70,27 @@ export class InboxStore implements IInboxStore {
       setInboxId: action,
 
       fetchInboxesList: action,
-      isInboxEnabled: action,
       getInboxId: action,
+
+      // computed
+      isInboxEnabled: computed,
     });
 
     this.rootStore = _rootStore;
     this.inboxService = new InboxService();
   }
 
-  isInboxEnabled = (projectId: string) => {
+  get isInboxEnabled() {
+    const projectId = this.rootStore.project.projectId;
+
+    if (!projectId) return false;
+
     const projectDetails = this.rootStore.project.project_details[projectId];
 
     if (!projectDetails) return false;
 
     return projectDetails.inbox_view;
-  };
+  }
 
   getInboxId = (projectId: string) => {
     const projectDetails = this.rootStore.project.project_details[projectId];

web/store/inbox/inbox_issues.store.ts

@@ -1,4 +1,4 @@
-import { observable, action, makeObservable, runInAction } from "mobx";
+import { observable, action, makeObservable, runInAction, autorun } from "mobx";
 // types
 import { RootStore } from "../root";
 // services
@@ -51,6 +51,15 @@ export class InboxIssuesStore implements IInboxIssuesStore {
 
     this.rootStore = _rootStore;
     this.inboxService = new InboxService();
+
+    autorun(() => {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      const projectId = this.rootStore.project.projectId;
+      const inboxId = this.rootStore.inbox.inboxId;
+
+      if (workspaceSlug && projectId && inboxId && this.rootStore.inboxFilters.inboxFilters[inboxId])
+        this.fetchInboxIssues(workspaceSlug, projectId, inboxId);
+    });
   }
 
   fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {