[WEB-1481] fix: inbox issue list update after changing issue status. (#4715)

Author: prateekshourya29

web/components/inbox/content/inbox-issue-header.tsx

@@ -52,7 +52,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   const [declineIssueModal, setDeclineIssueModal] = useState(false);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   // store
-  const { currentTab, deleteInboxIssue, inboxIssueIds } = useProjectInbox();
+  const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox();
   const { data: currentUser } = useUser();
   const {
     membership: { currentProjectRole },
@@ -76,11 +76,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
 
   const redirectIssue = (): string | undefined => {
     let nextOrPreviousIssueId: string | undefined = undefined;
-    const currentIssueIndex = inboxIssueIds.findIndex((id) => id === currentInboxIssueId);
-    if (inboxIssueIds[currentIssueIndex + 1])
-      nextOrPreviousIssueId = inboxIssueIds[currentIssueIndex + 1];
-    else if (inboxIssueIds[currentIssueIndex - 1])
-      nextOrPreviousIssueId = inboxIssueIds[currentIssueIndex - 1];
+    const currentIssueIndex = filteredInboxIssueIds.findIndex((id) => id === currentInboxIssueId);
+    if (filteredInboxIssueIds[currentIssueIndex + 1])
+      nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex + 1];
+    else if (filteredInboxIssueIds[currentIssueIndex - 1])
+      nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex - 1];
     else nextOrPreviousIssueId = undefined;
     return nextOrPreviousIssueId;
   };
@@ -134,22 +134,22 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       })
     );
 
-  const currentIssueIndex = inboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId) ?? 0;
+  const currentIssueIndex = filteredInboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId) ?? 0;
 
   const handleInboxIssueNavigation = useCallback(
     (direction: "next" | "prev") => {
-      if (!inboxIssueIds || !currentInboxIssueId) return;
+      if (!filteredInboxIssueIds || !currentInboxIssueId) return;
       const activeElement = document.activeElement as HTMLElement;
       if (activeElement && (activeElement.classList.contains("tiptap") || activeElement.id === "title-input")) return;
       const nextIssueIndex =
         direction === "next"
-          ? (currentIssueIndex + 1) % inboxIssueIds.length
-          : (currentIssueIndex - 1 + inboxIssueIds.length) % inboxIssueIds.length;
-      const nextIssueId = inboxIssueIds[nextIssueIndex];
+          ? (currentIssueIndex + 1) % filteredInboxIssueIds.length
+          : (currentIssueIndex - 1 + filteredInboxIssueIds.length) % filteredInboxIssueIds.length;
+      const nextIssueId = filteredInboxIssueIds[nextIssueIndex];
       if (!nextIssueId) return;
       router.push(`/${workspaceSlug}/projects/${projectId}/inbox?inboxIssueId=${nextIssueId}`);
     },
-    [currentInboxIssueId, currentIssueIndex, inboxIssueIds, projectId, router, workspaceSlug]
+    [currentInboxIssueId, currentIssueIndex, filteredInboxIssueIds, projectId, router, workspaceSlug]
   );
 
   const onKeyDown = useCallback(

web/components/inbox/sidebar/root.tsx

@@ -44,7 +44,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
     currentTab,
     handleCurrentTab,
     loader,
-    inboxIssueIds,
+    filteredInboxIssueIds,
     inboxIssuePaginationInfo,
     fetchInboxPaginationIssues,
     getAppliedFiltersCount,
@@ -106,13 +106,13 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
             className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
             ref={containerRef}
           >
-            {inboxIssueIds.length > 0 ? (
+              {filteredInboxIssueIds.length > 0 ? (
               <InboxIssueList
                 setIsMobileSidebar={setIsMobileSidebar}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 projectIdentifier={currentProjectDetails?.identifier}
-                inboxIssueIds={inboxIssueIds}
+                  inboxIssueIds={filteredInboxIssueIds}
               />
             ) : (
               <div className="flex items-center justify-center h-full w-full">

web/store/inbox/project-inbox.store.ts

@@ -1,7 +1,6 @@
 import { uniq, update } from "lodash";
 import isEmpty from "lodash/isEmpty";
 import omit from "lodash/omit";
-import orderBy from "lodash/orderBy";
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
@@ -42,11 +41,11 @@ export interface IProjectInboxStore {
   inboxIssueIds: string[];
   // computed
   getAppliedFiltersCount: number;
+  filteredInboxIssueIds: string[];
   // computed functions
   getIssueInboxByIssueId: (issueId: string) => IInboxIssueStore;
   getIsIssueAvailable: (inboxIssueId: string) => boolean;
   // helper actions
-  inboxIssueSorting: (issues: IInboxIssueStore[]) => IInboxIssueStore[];
   inboxIssueQueryParams: (
     inboxFilters: Partial<TInboxIssueFilter>,
     inboxSorting: Partial<TInboxIssueSorting>,
@@ -103,6 +102,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
       inboxIssueIds: observable,
       // computed
       getAppliedFiltersCount: computed,
+      filteredInboxIssueIds: computed,
       // actions
       handleInboxIssueFilters: action,
       handleInboxIssueSorting: action,
@@ -127,35 +127,23 @@ export class ProjectInboxStore implements IProjectInboxStore {
     return count;
   }
 
+  get filteredInboxIssueIds() {
+    let appliedFilters =
+      this.currentTab === EInboxIssueCurrentTab.OPEN
+        ? [EInboxIssueStatus.PENDING, EInboxIssueStatus.SNOOZED]
+        : [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE];
+    appliedFilters = appliedFilters.filter((filter) => this.inboxFilters?.status?.includes(filter));
+
+    return this.inboxIssueIds.filter((id) => appliedFilters.includes(this.inboxIssues[id].status));
+  }
+
   getIssueInboxByIssueId = computedFn((issueId: string) => this.inboxIssues?.[issueId]);
 
   getIsIssueAvailable = computedFn((inboxIssueId: string) => {
     if (!this.inboxIssueIds) return true;
     return this.inboxIssueIds.includes(inboxIssueId);
   });
 
-  // helpers
-  inboxIssueSorting = (issues: IInboxIssueStore[]) => {
-    let inboxIssues: IInboxIssueStore[] = issues;
-    inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "desc");
-    if (this.inboxSorting?.order_by && this.inboxSorting?.sort_by) {
-      switch (this.inboxSorting.order_by) {
-        case "issue__created_at":
-          if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.created_at", "desc");
-          else inboxIssues = orderBy(inboxIssues, "issue.created_at", "asc");
-        case "issue__updated_at":
-          if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.updated_at", "desc");
-          else inboxIssues = orderBy(inboxIssues, "issue.updated_at", "asc");
-        case "issue__sequence_id":
-          if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "desc");
-          else inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "asc");
-        default:
-          inboxIssues = inboxIssues;
-      }
-    }
-    return inboxIssues;
-  };
-
   inboxIssueQueryParams = (
     inboxFilters: Partial<TInboxIssueFilter>,
     inboxSorting: Partial<TInboxIssueSorting>,