diff --git a/web/components/inbox/content/inbox-issue-header.tsx b/web/components/inbox/content/inbox-issue-header.tsx index 8a3401569..d94fabeba 100644 --- a/web/components/inbox/content/inbox-issue-header.tsx +++ b/web/components/inbox/content/inbox-issue-header.tsx @@ -52,7 +52,7 @@ export const InboxIssueActionsHeader: FC = 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 = 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 = 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( diff --git a/web/components/inbox/sidebar/root.tsx b/web/components/inbox/sidebar/root.tsx index f0cd9657b..9b7ad2581 100644 --- a/web/components/inbox/sidebar/root.tsx +++ b/web/components/inbox/sidebar/root.tsx @@ -44,7 +44,7 @@ export const InboxSidebar: FC = observer((props) => { currentTab, handleCurrentTab, loader, - inboxIssueIds, + filteredInboxIssueIds, inboxIssuePaginationInfo, fetchInboxPaginationIssues, getAppliedFiltersCount, @@ -106,13 +106,13 @@ export const InboxSidebar: FC = observer((props) => { className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md" ref={containerRef} > - {inboxIssueIds.length > 0 ? ( + {filteredInboxIssueIds.length > 0 ? ( ) : (
diff --git a/web/store/inbox/project-inbox.store.ts b/web/store/inbox/project-inbox.store.ts index 2557f7979..0e80143d5 100644 --- a/web/store/inbox/project-inbox.store.ts +++ b/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, inboxSorting: Partial, @@ -103,6 +102,7 @@ export class ProjectInboxStore implements IProjectInboxStore { inboxIssueIds: observable, // computed getAppliedFiltersCount: computed, + filteredInboxIssueIds: computed, // actions handleInboxIssueFilters: action, handleInboxIssueSorting: action, @@ -127,6 +127,16 @@ 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) => { @@ -134,28 +144,6 @@ export class ProjectInboxStore implements IProjectInboxStore { 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, inboxSorting: Partial,