@zeniai/client-epic-state 5.2.77 → 5.2.79

package/lib/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewState.d.ts

@@ -1,6 +1,7 @@
-import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError } from '../../../commonStateTypes/common';
 import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
+import { InvoicingListByTab } from '../invoicingListTabCache';
 export interface InvoicingDunningCaseFilters {
     search?: string;
 }
@@ -22,14 +23,14 @@ export declare const INVOICING_DUNNING_CASE_COLUMNS: InvoicingDunningCaseColumnC
 export declare const ALL_INVOICING_DUNNING_CASE_TAB_IDS: readonly ["all", "retrying", "scheduled", "manual_review", "paused", "resolved", "cancelled"];
 export declare const toInvoicingDunningCaseTabId: (v: string) => "paused" | "cancelled" | "scheduled" | "retrying" | "manual_review" | "resolved" | "all";
 export type InvoicingDunningCaseTabId = ReturnType<typeof toInvoicingDunningCaseTabId>;
-export interface InvoicingDunningCaseListViewState extends FetchedState {
+export interface InvoicingDunningCaseListViewState {
     /** Selected status tab (CES-owned so it persists across page revisits). */
     activeTab: InvoicingDunningCaseTabId;
+    /** Per-tab rows, cursor and fetch state; each tab is its own `?status=` query. */
+    byTab: InvoicingListByTab;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingDunningCaseFilters;
-    ids: ID[];
-    nextCursor: string | null;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }

package/lib/view/invoicing/invoicingListTabCache.d.ts

@@ -0,0 +1,71 @@
+import { FetchStateAndError, ID } from '../../commonStateTypes/common';
+import { ZeniAPIStatus } from '../../responsePayload';
+import { InvoicingListSort } from './invoicingApiHelper';
+/**
+ * One status tab of a list. Each tab is its own server query (`?status=`), so
+ * its rows, cursor and fetch state are cached apart: switching back to a loaded
+ * tab costs no request.
+ */
+export interface InvoicingListTab extends FetchStateAndError {
+    ids: ID[];
+    nextCursor: string | null;
+}
+/**
+ * Keyed by the raw tab id: tabs come from `/1.0/config`, so a status this
+ * build's tab-id union does not know still gets a cache entry.
+ */
+export type InvoicingListByTab = Record<string, InvoicingListTab>;
+export declare const INVOICING_LIST_ALL_TAB = "all";
+/** A tab's cache, or a not-started one when it was never fetched. */
+export declare const getInvoicingListTab: (byTab: InvoicingListByTab, tabId: string) => InvoicingListTab;
+/**
+ * The cache a tab reads and fetches. A tab the list API cannot filter on (a
+ * derived grouping such as the customers' `at_risk`, not a stored status) is
+ * the `all` rows, filtered by the selector.
+ */
+export declare const invoicingListSourceTab: (tabId: string, clientFilteredTabIds?: readonly string[]) => string;
+/**
+ * The cache a list fetch fills: the tab the caller named, else the active tab's
+ * source. The reducer and the epic both resolve it, so they agree on the tab.
+ */
+export declare const invoicingListFetchTab: (activeTab: string, requestedTab: string | undefined, clientFilteredTabIds?: readonly string[]) => string;
+/** The `status` query param for a source tab; `all` sends none. */
+export declare const invoicingListStatusParam: (sourceTab: string) => string | undefined;
+/**
+ * Whether two list queries match, so their per-tab caches stay valid. A filter
+ * left unset and one cleared to `''` are the same query.
+ */
+export declare const isSameInvoicingListQuery: (a: {
+    filters: object;
+    sort?: InvoicingListSort;
+}, b: {
+    filters: object;
+    sort?: InvoicingListSort;
+}) => boolean;
+/** What opening a tab should fetch, if anything. */
+export type InvoicingListTabFetch = {
+    kind: 'none';
+} | {
+    kind: 'firstPage';
+} | {
+    cursor: string;
+    kind: 'nextPage';
+};
+/**
+ * Fetch a tab that is empty or failed; top up one that holds less than a page
+ * while the server says there is more; leave a full or complete one cached.
+ * Runs on page/tab visits only, so a server returning short pages cannot loop.
+ */
+export declare function planInvoicingListTabFetch(tab: InvoicingListTab, cacheOverride: boolean): InvoicingListTabFetch;
+export declare function startInvoicingListTabFetch(byTab: InvoicingListByTab, tabId: string, keepExistingListItems: boolean): void;
+export declare function completeInvoicingListTabFetch(byTab: InvoicingListByTab, tabId: string, page: {
+    ids: ID[];
+    keepExistingListItems: boolean;
+    nextCursor: string | null;
+}): void;
+export declare function failInvoicingListTabFetch(byTab: InvoicingListByTab, tabId: string, error: ZeniAPIStatus): void;
+/**
+ * A created record leads `all` and, when its status is known, that status's
+ * tab if already loaded. Returns false when `all` already had it.
+ */
+export declare function addToInvoicingListTabs(byTab: InvoicingListByTab, id: ID, status?: string): boolean;

package/lib/view/invoicing/invoicingListTabCache.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSameInvoicingListQuery = exports.invoicingListStatusParam = exports.invoicingListFetchTab = exports.invoicingListSourceTab = exports.getInvoicingListTab = exports.INVOICING_LIST_ALL_TAB = void 0;
+exports.planInvoicingListTabFetch = planInvoicingListTabFetch;
+exports.startInvoicingListTabFetch = startInvoicingListTabFetch;
+exports.completeInvoicingListTabFetch = completeInvoicingListTabFetch;
+exports.failInvoicingListTabFetch = failInvoicingListTabFetch;
+exports.addToInvoicingListTabs = addToInvoicingListTabs;
+const invoicingApiHelper_1 = require("./invoicingApiHelper");
+exports.INVOICING_LIST_ALL_TAB = 'all';
+const NOT_STARTED_TAB = Object.freeze({
+    ids: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+/** A tab's cache, or a not-started one when it was never fetched. */
+const getInvoicingListTab = (byTab, tabId) => byTab[tabId] ?? NOT_STARTED_TAB;
+exports.getInvoicingListTab = getInvoicingListTab;
+/**
+ * The cache a tab reads and fetches. A tab the list API cannot filter on (a
+ * derived grouping such as the customers' `at_risk`, not a stored status) is
+ * the `all` rows, filtered by the selector.
+ */
+const invoicingListSourceTab = (tabId, clientFilteredTabIds = []) => clientFilteredTabIds.includes(tabId) ? exports.INVOICING_LIST_ALL_TAB : tabId;
+exports.invoicingListSourceTab = invoicingListSourceTab;
+/**
+ * The cache a list fetch fills: the tab the caller named, else the active tab's
+ * source. The reducer and the epic both resolve it, so they agree on the tab.
+ */
+const invoicingListFetchTab = (activeTab, requestedTab, clientFilteredTabIds = []) => requestedTab ?? (0, exports.invoicingListSourceTab)(activeTab, clientFilteredTabIds);
+exports.invoicingListFetchTab = invoicingListFetchTab;
+/** The `status` query param for a source tab; `all` sends none. */
+const invoicingListStatusParam = (sourceTab) => sourceTab === exports.INVOICING_LIST_ALL_TAB ? undefined : sourceTab;
+exports.invoicingListStatusParam = invoicingListStatusParam;
+/**
+ * Whether two list queries match, so their per-tab caches stay valid. A filter
+ * left unset and one cleared to `''` are the same query.
+ */
+const isSameInvoicingListQuery = (a, b) => {
+    const aFilters = a.filters;
+    const bFilters = b.filters;
+    const keys = new Set([...Object.keys(aFilters), ...Object.keys(bFilters)]);
+    return ([...keys].every((key) => (aFilters[key] ?? '') === (bFilters[key] ?? '')) &&
+        a.sort?.field === b.sort?.field &&
+        a.sort?.dir === b.sort?.dir);
+};
+exports.isSameInvoicingListQuery = isSameInvoicingListQuery;
+/**
+ * Fetch a tab that is empty or failed; top up one that holds less than a page
+ * while the server says there is more; leave a full or complete one cached.
+ * Runs on page/tab visits only, so a server returning short pages cannot loop.
+ */
+function planInvoicingListTabFetch(tab, cacheOverride) {
+    if (cacheOverride) {
+        return { kind: 'firstPage' };
+    }
+    if (tab.fetchState === 'In-Progress') {
+        return { kind: 'none' };
+    }
+    if (tab.fetchState !== 'Completed') {
+        return { kind: 'firstPage' };
+    }
+    if (tab.ids.length < invoicingApiHelper_1.INVOICING_LIST_PAGE_SIZE && tab.nextCursor != null) {
+        return { cursor: tab.nextCursor, kind: 'nextPage' };
+    }
+    return { kind: 'none' };
+}
+const tabFor = (byTab, tabId) => {
+    byTab[tabId] ?? (byTab[tabId] = { ...NOT_STARTED_TAB, ids: [] });
+    return byTab[tabId];
+};
+function startInvoicingListTabFetch(byTab, tabId, keepExistingListItems) {
+    const tab = tabFor(byTab, tabId);
+    if (!keepExistingListItems) {
+        tab.ids = [];
+        tab.nextCursor = null;
+    }
+    tab.fetchState = 'In-Progress';
+    tab.error = undefined;
+}
+function completeInvoicingListTabFetch(byTab, tabId, page) {
+    const tab = tabFor(byTab, tabId);
+    tab.ids = page.keepExistingListItems
+        ? [...new Set([...tab.ids, ...page.ids])]
+        : page.ids;
+    tab.nextCursor = page.nextCursor;
+    tab.fetchState = 'Completed';
+    tab.error = undefined;
+}
+function failInvoicingListTabFetch(byTab, tabId, error) {
+    const tab = tabFor(byTab, tabId);
+    tab.fetchState = 'Error';
+    tab.error = error;
+}
+/**
+ * A created record leads `all` and, when its status is known, that status's
+ * tab if already loaded. Returns false when `all` already had it.
+ */
+function addToInvoicingListTabs(byTab, id, status) {
+    const all = tabFor(byTab, exports.INVOICING_LIST_ALL_TAB);
+    if (all.ids.includes(id)) {
+        return false;
+    }
+    all.ids = [id, ...all.ids];
+    const statusTab = status != null ? byTab[status] : undefined;
+    if (statusTab != null && !statusTab.ids.includes(id)) {
+        statusTab.ids = [id, ...statusTab.ids];
+    }
+    return true;
+}

package/lib/view/invoicing/invoicingOverview/epics/fetchInvoicingOverviewEpic.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchInvoicingOverviewEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingSubscriptionListViewReducer_1 = require("../../invoicingSubscriptionListView/invoicingSubscriptionListViewReducer");
-const invoicingSubscriptionListViewSelector_1 = require("../../invoicingSubscriptionListView/invoicingSubscriptionListViewSelector");
 const settingsViewReducer_1 = require("../../settingsView/settingsViewReducer");
 const settingsViewSelector_1 = require("../../settingsView/settingsViewSelector");
 const invoicingOverviewReducer_1 = require("../invoicingOverviewReducer");
@@ -47,12 +47,9 @@ const fetchInvoicingOverviewEpic = (actions$, state$) => actions$.pipe((0, opera
     if (shouldFetch((0, settingsViewSelector_1.getInvoicingSettingsFetchState)(rootState), cacheOverride)) {
         overviewActions.push((0, settingsViewReducer_1.fetchInvoicingSettings)());
     }
-    const subscriptionListView = (0, invoicingSubscriptionListViewSelector_1.getInvoicingSubscriptionListView)(rootState);
-    if (shouldFetch({
-        fetchState: subscriptionListView.fetchState,
-        error: subscriptionListView.error,
-    }, cacheOverride)) {
-        overviewActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList)({}));
+    const subscriptionsTab = (0, invoicingListTabCache_1.getInvoicingListTab)(rootState.invoicingSubscriptionListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB);
+    if (shouldFetch(subscriptionsTab, cacheOverride)) {
+        overviewActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList)({ tabId: invoicingListTabCache_1.INVOICING_LIST_ALL_TAB }));
     }
     return (0, rxjs_1.concat)((0, rxjs_1.from)(overviewActions));
 }));

package/lib/view/invoicing/invoicingOverview/invoicingOverviewSelector.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingOverview = void 0;
 exports.buildPeriodOptions = buildPeriodOptions;
 const reduceFetchState_1 = require("../../../commonStateTypes/reduceFetchState");
-const invoicingSubscriptionListViewSelector_1 = require("../invoicingSubscriptionListView/invoicingSubscriptionListViewSelector");
+const invoicingSubscriptionSelector_1 = require("../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const settingsViewSelector_1 = require("../settingsView/settingsViewSelector");
 const PERIOD_OPTION_MONTHS = 12;
 function daysInMonth(year, month) {
@@ -29,10 +30,12 @@ function buildPeriodOptions() {
 const getInvoicingOverview = (state) => {
     const overview = state.invoicingOverviewState;
     const settingsFetchState = (0, settingsViewSelector_1.getInvoicingSettingsFetchState)(state);
-    const subscriptionListView = (0, invoicingSubscriptionListViewSelector_1.getInvoicingSubscriptionListView)(state);
+    // The overview waits on the unfiltered `all` subscriptions, not the tab the
+    // subscriptions list was left on.
+    const subscriptionsTab = (0, invoicingListTabCache_1.getInvoicingListTab)(state.invoicingSubscriptionListViewState.byTab, invoicingListTabCache_1.INVOICING_LIST_ALL_TAB);
     const subscriptionListFetchState = {
-        fetchState: subscriptionListView.fetchState,
-        error: subscriptionListView.error,
+        fetchState: subscriptionsTab.fetchState,
+        error: subscriptionsTab.error,
     };
     const reducedFetchState = (0, reduceFetchState_1.reduceAllFetchState)([
         overview.kpisFetchState,
@@ -60,7 +63,7 @@ const getInvoicingOverview = (state) => {
             fetchState: settingsFetchState,
         },
         subscriptionList: {
-            data: subscriptionListView.subscriptions,
+            data: (0, invoicingSubscriptionSelector_1.getInvoicingSubscriptionsByIds)(state.invoicingSubscriptionState, subscriptionsTab.ids),
             fetchState: subscriptionListFetchState,
         },
         ...reducedFetchState,

package/lib/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListEpic.d.ts

@@ -6,4 +6,4 @@ import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchInvoicingSubscriptionList, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure } from '../invoicingSubscriptionListViewReducer';
 export type ActionType = ReturnType<typeof fetchInvoicingSubscriptionList> | ReturnType<typeof updateInvoicingSubscriptionList> | ReturnType<typeof updateInvoicingSubscriptionListFailure> | ReturnType<typeof updateAddresses> | ReturnType<typeof updateInvoicingSubscriptions>;
-export declare const fetchInvoicingSubscriptionListEpic: (actions$: ActionsObservable<ActionType>, _state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;
+export declare const fetchInvoicingSubscriptionListEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListEpic.js

@@ -8,9 +8,13 @@ const invoicingSubscriptionPayload_1 = require("../../../../entity/invoicing/inv
 const invoicingSubscriptionReducer_1 = require("../../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionReducer");
 const responsePayload_1 = require("../../../../responsePayload");
 const invoicingApiHelper_1 = require("../../invoicingApiHelper");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingSubscriptionListViewReducer_1 = require("../invoicingSubscriptionListViewReducer");
-const buildQuery = (filters, cursor, sort) => {
+const buildQuery = (filters, cursor, sort, status) => {
     const params = new URLSearchParams();
+    if (status != null) {
+        params.set('status', status);
+    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }
@@ -30,10 +34,18 @@ const buildQuery = (filters, cursor, sort) => {
     (0, invoicingApiHelper_1.applyListSortParams)(params, sort);
     return params;
 };
-const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList.match), (0, operators_1.switchMap)((action) => {
+const fetchInvoicingSubscriptionListEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList.match), (0, operators_1.map)((action) => ({
+    action,
+    tabId: (0, invoicingListTabCache_1.invoicingListFetchTab)(state$.value.invoicingSubscriptionListViewState.activeTab, action.payload.tabId),
+})), 
+// Per tab: a newer fetch of the same tab replaces its in-flight one, while
+// another tab's request keeps running and lands in its own cache.
+(0, operators_1.groupBy)(({ tabId }) => tabId), (0, operators_1.mergeMap)((tabFetches$) => tabFetches$.pipe((0, operators_1.switchMap)(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`, buildQuery(filters, cursor, sort));
-    return zeniAPI.getJSON(apiUrl).pipe((0, operators_1.switchMap)((response) => {
+    const apiUrl = (0, invoicingApiHelper_1.withQuery)(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`, buildQuery(filters, cursor, sort, (0, invoicingListTabCache_1.invoicingListStatusParam)(tabId)));
+    return zeniAPI
+        .getJSON(apiUrl)
+        .pipe((0, operators_1.switchMap)((response) => {
         if ((0, responsePayload_1.isSuccessResponse)(response)) {
             const items = response.data?.items ?? [];
             return [
@@ -43,11 +55,18 @@ const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) => actio
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return (0, rxjs_1.of)((0, invoicingSubscriptionListViewReducer_1.updateInvoicingSubscriptionListFailure)(response.status));
-    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingSubscriptionListViewReducer_1.updateInvoicingSubscriptionListFailure)((0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return (0, rxjs_1.of)((0, invoicingSubscriptionListViewReducer_1.updateInvoicingSubscriptionListFailure)({
+            status: response.status,
+            tabId,
+        }));
+    }), (0, operators_1.catchError)((error) => (0, rxjs_1.of)((0, invoicingSubscriptionListViewReducer_1.updateInvoicingSubscriptionListFailure)({
+        status: (0, responsePayload_1.createZeniAPIStatus)('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));
 exports.fetchInvoicingSubscriptionListEpic = fetchInvoicingSubscriptionListEpic;

package/lib/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListPageEpic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchInvoicingSubscriptionListPageEpic = void 0;
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const invoicingListTabCache_1 = require("../../invoicingListTabCache");
 const invoicingSubscriptionListViewReducer_1 = require("../invoicingSubscriptionListViewReducer");
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -20,8 +21,20 @@ const fetchInvoicingSubscriptionListPageEpic = (actions$, state$) => actions$.pi
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingSubscriptionListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList)({ filters, sort }));
+    const tabId = (0, invoicingListTabCache_1.invoicingListSourceTab)(state.activeTab);
+    const tabFetch = (0, invoicingListTabCache_1.planInvoicingListTabFetch)((0, invoicingListTabCache_1.getInvoicingListTab)(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList)({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionList)({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push((0, invoicingSubscriptionListViewReducer_1.fetchInvoicingSubscriptionCounts)());

package/lib/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewReducer.d.ts

@@ -10,11 +10,14 @@ export declare const fetchInvoicingSubscriptionList: import("@reduxjs/toolkit").
     filters?: InvoicingSubscriptionFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingSubscriptionFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingSubscriptionListView/fetchInvoicingSubscriptionList", never, never>, fetchInvoicingSubscriptionListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingSubscriptionFilters;
@@ -27,7 +30,11 @@ export declare const fetchInvoicingSubscriptionList: import("@reduxjs/toolkit").
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingSubscriptionListView/updateInvoicingSubscriptionList">, updateInvoicingSubscriptionListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSubscriptionListView/updateInvoicingSubscriptionListFailure">, fetchInvoicingSubscriptionCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSubscriptionListView/fetchInvoicingSubscriptionCounts">, updateInvoicingSubscriptionCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingSubscriptionListView/updateInvoicingSubscriptionCounts">, updateInvoicingSubscriptionCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSubscriptionListView/updateInvoicingSubscriptionCountsFailure">, updateInvoicingSubscriptionFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingSubscriptionFilters, "invoicingSubscriptionListView/updateInvoicingSubscriptionFilters">, setInvoicingSubscriptionActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"paused" | "active" | "cancelled" | "future" | "in_trial" | "non_renewing" | "all", "invoicingSubscriptionListView/setInvoicingSubscriptionActiveTab">, addInvoicingSubscriptionToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    tabId: string;
+}, "invoicingSubscriptionListView/updateInvoicingSubscriptionList">, updateInvoicingSubscriptionListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "invoicingSubscriptionListView/updateInvoicingSubscriptionListFailure">, fetchInvoicingSubscriptionCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingSubscriptionListView/fetchInvoicingSubscriptionCounts">, updateInvoicingSubscriptionCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingSubscriptionListView/updateInvoicingSubscriptionCounts">, updateInvoicingSubscriptionCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingSubscriptionListView/updateInvoicingSubscriptionCountsFailure">, updateInvoicingSubscriptionFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingSubscriptionFilters, "invoicingSubscriptionListView/updateInvoicingSubscriptionFilters">, setInvoicingSubscriptionActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"paused" | "active" | "cancelled" | "future" | "in_trial" | "non_renewing" | "all", "invoicingSubscriptionListView/setInvoicingSubscriptionActiveTab">, addInvoicingSubscriptionToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     id: ID;
     status?: InvoicingSubscriptionStatus;
 }, "invoicingSubscriptionListView/addInvoicingSubscriptionToList">;

package/lib/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewReducer.js

@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addInvoicingSubscriptionToList = exports.setInvoicingSubscriptionActiveTab = exports.updateInvoicingSubscriptionFilters = exports.updateInvoicingSubscriptionCountsFailure = exports.updateInvoicingSubscriptionCounts = exports.fetchInvoicingSubscriptionCounts = exports.updateInvoicingSubscriptionListFailure = exports.updateInvoicingSubscriptionList = exports.fetchInvoicingSubscriptionListPage = exports.fetchInvoicingSubscriptionList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 exports.initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
     activeTab: 'all',
-    ids: [],
-    nextCursor: null,
+    byTab: {},
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
     name: 'invoicingSubscriptionListView',
@@ -23,14 +18,9 @@ const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingSubscriptionList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                (0, invoicingListTabCache_1.startInvoicingListTabFetch)(draft.byTab, (0, invoicingListTabCache_1.invoicingListFetchTab)(draft.activeTab, action.payload.tabId), action.payload.keepExistingListItems);
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -39,12 +29,17 @@ const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingSubscriptionListPage: {
             reducer(draft, action) {
+                // Another search or sort makes every cached tab stale.
+                if (!(0, invoicingListTabCache_1.isSameInvoicingListQuery)(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -59,16 +54,10 @@ const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingSubscriptionList(draft, action) {
-            draft.ids = action.payload.keepExistingListItems
-                ? [...new Set([...draft.ids, ...action.payload.ids])]
-                : action.payload.ids;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            (0, invoicingListTabCache_1.completeInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingSubscriptionListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingSubscriptionCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -86,8 +75,8 @@ const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
         updateInvoicingSubscriptionFilters(draft, action) {
             draft.filters = action.payload;
         },
-        // Select a status tab. The list API ignores `status` (returns all statuses),
-        // so the selector filters rows to this tab client-side — no refetch needed.
+        // Select a status tab. The view dispatches the page fetch after, which loads
+        // the tab from the server only when its cache is empty or failed.
         setInvoicingSubscriptionActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },
@@ -96,10 +85,9 @@ const invoicingSubscriptionListView = (0, toolkit_1.createSlice)({
         // doubles as the per-tab count key (tab ids mirror InvoicingSubscriptionStatus).
         addInvoicingSubscriptionToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.ids.includes(id)) {
+            if (!(0, invoicingListTabCache_1.addToInvoicingListTabs)(draft.byTab, id, status)) {
                 return;
             }
-            draft.ids = [id, ...draft.ids];
             draft.counts.all += 1;
             if (status != null) {
                 draft.counts[status] = (draft.counts[status] ?? 0) + 1;

package/lib/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInvoicingSubscriptionListView = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const invoicingSubscriptionSelector_1 = require("../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
 const invoicingTabHelper_1 = require("../invoicingTabHelper");
 const runningInvoicingActionId_1 = require("../runningInvoicingActionId");
 const invoicingSubscriptionListViewState_1 = require("./invoicingSubscriptionListViewState");
@@ -15,20 +16,16 @@ const invoicingSubscriptionListViewState_1 = require("./invoicingSubscriptionLis
  */
 exports.getInvoicingSubscriptionListView = (0, toolkit_1.createSelector)((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (state) => state.invoicingConfigViewState.subscriptionStatusOptions, (state) => state.invoicingConfigViewState, (state) => state.editInvoicingSubscriptionDetailViewState.actionStateById, (subscriptionState, listViewState, statusOptions, configState, actionStateById) => {
     const { activeTab } = listViewState;
-    const allSubscriptions = (0, invoicingSubscriptionSelector_1.getInvoicingSubscriptionsByIds)(subscriptionState, listViewState.ids);
-    // The list API ignores `status`, so it returns every status; filter to the
-    // active tab client-side ('all' shows everything).
-    const subscriptions = activeTab === 'all'
-        ? allSubscriptions
-        : allSubscriptions.filter((subscription) => subscription.status === activeTab);
+    const tab = (0, invoicingListTabCache_1.getInvoicingListTab)(listViewState.byTab, (0, invoicingListTabCache_1.invoicingListSourceTab)(activeTab));
+    const subscriptions = (0, invoicingSubscriptionSelector_1.getInvoicingSubscriptionsByIds)(subscriptionState, tab.ids);
     return {
         runningActionId: (0, runningInvoicingActionId_1.runningInvoicingActionId)(actionStateById),
         activeTab,
         columns: invoicingSubscriptionListViewState_1.INVOICING_SUBSCRIPTION_COLUMNS,
         subscriptions,
-        fetchState: listViewState.fetchState,
-        error: listViewState.error,
-        nextCursor: listViewState.nextCursor,
+        fetchState: tab.fetchState,
+        error: tab.error,
+        nextCursor: tab.nextCursor,
         filters: listViewState.filters,
         count: listViewState.counts,
         countsFetchState: listViewState.countsFetchState,

package/lib/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewState.d.ts

@@ -1,6 +1,7 @@
-import { FetchStateAndError, FetchedState, ID } from '../../../commonStateTypes/common';
+import { FetchStateAndError, ID } from '../../../commonStateTypes/common';
 import { InvoicingListCounts } from '../../../entity/invoicing/invoicingCommonPayload';
 import { InvoicingListSort } from '../invoicingApiHelper';
+import { InvoicingListByTab } from '../invoicingListTabCache';
 export interface InvoicingSubscriptionFilters {
     customerId?: ID;
     search?: string;
@@ -25,15 +26,14 @@ export declare const INVOICING_SUBSCRIPTION_COLUMNS: InvoicingSubscriptionColumn
 export declare const ALL_INVOICING_SUBSCRIPTION_TAB_IDS: readonly ["all", "active", "in_trial", "future", "non_renewing", "paused", "cancelled"];
 export declare const toInvoicingSubscriptionTabId: (v: string) => "paused" | "active" | "cancelled" | "future" | "in_trial" | "non_renewing" | "all";
 export type InvoicingSubscriptionTabId = ReturnType<typeof toInvoicingSubscriptionTabId>;
-export interface InvoicingSubscriptionListViewState extends FetchedState {
+export interface InvoicingSubscriptionListViewState {
     /** Selected status tab (CES-owned so it persists across page revisits). */
     activeTab: InvoicingSubscriptionTabId;
+    /** Per-tab rows, cursor and fetch state; each tab is its own `?status=` query. */
+    byTab: InvoicingListByTab;
     counts: InvoicingListCounts;
     countsFetchState: FetchStateAndError;
     filters: InvoicingSubscriptionFilters;
-    /** Full list ids (all statuses); the selector filters by `activeTab`. */
-    ids: ID[];
-    nextCursor: string | null;
     /** Active server-side sort (undefined = backend default order). */
     sort?: InvoicingListSort;
 }

package/lib/view/taskManager/taskDetailView/epics/fetchTaskDetailEpic.d.ts

@@ -6,6 +6,6 @@ import { updateTasks } from '../../../../entity/task/taskReducer';
 import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchFileList } from '../../../fileView/fileViewReducer';
-import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, updateEditTaskFetchStatus } from '../taskDetailReducer';
-export type ActionType = ReturnType<typeof fetchTaskDetail> | ReturnType<typeof updateTags> | ReturnType<typeof updateEditTaskFetchStatus> | ReturnType<typeof removeTaskDetail> | ReturnType<typeof updateTasks> | ReturnType<typeof initializeTaskToLocalStore> | ReturnType<typeof fetchFileList> | ReturnType<typeof openSnackbar>;
+import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus } from '../taskDetailReducer';
+export type ActionType = ReturnType<typeof fetchTaskDetail> | ReturnType<typeof updateTags> | ReturnType<typeof updateEditTaskFetchStatus> | ReturnType<typeof removeTaskDetail> | ReturnType<typeof updateTasks> | ReturnType<typeof initializeTaskToLocalStore> | ReturnType<typeof saveTaskUpdatesToLocalStore> | ReturnType<typeof fetchFileList> | ReturnType<typeof openSnackbar>;
 export declare const fetchTaskDetailEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;