@zeniai/client-epic-state 5.2.77 → 5.2.79

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

@@ -1,13 +1,17 @@
 import { of } from 'rxjs';
-import { catchError, filter, switchMap } from 'rxjs/operators';
+import { catchError, filter, groupBy, map, mergeMap, switchMap, } from 'rxjs/operators';
 import { updateAddresses } from '../../../../entity/address/addressReducer';
 import { extractInvoicingSubscriptionAddresses } from '../../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionPayload';
 import { updateInvoicingSubscriptions } from '../../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionReducer';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../../invoicingApiHelper';
+import { invoicingListFetchTab, invoicingListStatusParam, } from '../../invoicingListTabCache';
 import { fetchInvoicingSubscriptionList, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, } from '../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);
     }
@@ -27,10 +31,18 @@ const buildQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSubscriptionList.match), switchMap((action) => {
+export const fetchInvoicingSubscriptionListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoicingSubscriptionList.match), map((action) => ({
+    action,
+    tabId: 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.
+groupBy(({ tabId }) => tabId), mergeMap((tabFetches$) => tabFetches$.pipe(switchMap(({ action, tabId }) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`, buildQuery(filters, cursor, sort));
-    return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/subscriptions`, buildQuery(filters, cursor, sort, invoicingListStatusParam(tabId)));
+    return zeniAPI
+        .getJSON(apiUrl)
+        .pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];
             return [
@@ -40,10 +52,17 @@ export const fetchInvoicingSubscriptionListEpic = (actions$, _state$, zeniAPI) =
                     ids: items.map((item) => item.id),
                     nextCursor: response.data?.next_cursor ?? null,
                     keepExistingListItems,
+                    tabId,
                 }),
             ];
         }
-        return of(updateInvoicingSubscriptionListFailure(response.status));
-    }), catchError((error) => of(updateInvoicingSubscriptionListFailure(createZeniAPIStatus('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
-        JSON.stringify(error))))));
-}));
+        return of(updateInvoicingSubscriptionListFailure({
+            status: response.status,
+            tabId,
+        }));
+    }), catchError((error) => of(updateInvoicingSubscriptionListFailure({
+        status: createZeniAPIStatus('Unexpected Error', 'Fetch subscription list REST API call errored out ' +
+            JSON.stringify(error)),
+        tabId,
+    }))));
+}))));

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

@@ -1,5 +1,6 @@
 import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { getInvoicingListTab, invoicingListSourceTab, planInvoicingListTabFetch, } from '../../invoicingListTabCache';
 import { fetchInvoicingSubscriptionCounts, fetchInvoicingSubscriptionList, fetchInvoicingSubscriptionListPage, } from '../invoicingSubscriptionListViewReducer';
 /**
  * Fetch unless the endpoint is already loaded or in flight — or always when the
@@ -17,8 +18,20 @@ export const fetchInvoicingSubscriptionListPageEpic = (actions$, state$) => acti
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingSubscriptionListViewState;
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
-        pageActions.push(fetchInvoicingSubscriptionList({ filters, sort }));
+    const tabId = invoicingListSourceTab(state.activeTab);
+    const tabFetch = planInvoicingListTabFetch(getInvoicingListTab(state.byTab, tabId), cacheOverride);
+    if (tabFetch.kind === 'firstPage') {
+        pageActions.push(fetchInvoicingSubscriptionList({ filters, sort, tabId }));
+    }
+    else if (tabFetch.kind === 'nextPage') {
+        // Less than a page cached and the server has more: top it up.
+        pageActions.push(fetchInvoicingSubscriptionList({
+            cursor: tabFetch.cursor,
+            filters,
+            keepExistingListItems: true,
+            sort,
+            tabId,
+        }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {
         pageActions.push(fetchInvoicingSubscriptionCounts());

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

@@ -1,17 +1,12 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { clearAll } from '../../../rootActions';
+import { addToInvoicingListTabs, completeInvoicingListTabFetch, failInvoicingListTabFetch, invoicingListFetchTab, isSameInvoicingListQuery, startInvoicingListTabFetch, } from '../invoicingListTabCache';
 export const 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 = createSlice({
     name: 'invoicingSubscriptionListView',
@@ -19,14 +14,9 @@ const invoicingSubscriptionListView = createSlice({
     reducers: {
         fetchInvoicingSubscriptionList: {
             reducer(draft, action) {
-                if (!action.payload.keepExistingListItems) {
-                    draft.ids = [];
-                    draft.nextCursor = null;
-                }
+                startInvoicingListTabFetch(draft.byTab, 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 {
@@ -35,12 +25,17 @@ const invoicingSubscriptionListView = 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 (!isSameInvoicingListQuery(draft, action.payload)) {
+                    draft.byTab = {};
+                }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
             },
@@ -55,16 +50,10 @@ const invoicingSubscriptionListView = 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;
+            completeInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload);
         },
         updateInvoicingSubscriptionListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            failInvoicingListTabFetch(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingSubscriptionCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -82,8 +71,8 @@ const invoicingSubscriptionListView = 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;
         },
@@ -92,10 +81,9 @@ const invoicingSubscriptionListView = 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 (!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/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getInvoicingSubscriptionsByIds } from '../../../entity/invoicing/invoicingSubscription/invoicingSubscriptionSelector';
+import { getInvoicingListTab, invoicingListSourceTab, } from '../invoicingListTabCache';
 import { invoicingTabIdsFromConfig } from '../invoicingTabHelper';
 import { runningInvoicingActionId } from '../runningInvoicingActionId';
 import { ALL_INVOICING_SUBSCRIPTION_TAB_IDS, INVOICING_SUBSCRIPTION_COLUMNS, } from './invoicingSubscriptionListViewState';
@@ -12,20 +13,16 @@ import { ALL_INVOICING_SUBSCRIPTION_TAB_IDS, INVOICING_SUBSCRIPTION_COLUMNS, } f
  */
 export const getInvoicingSubscriptionListView = 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 = 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 = getInvoicingListTab(listViewState.byTab, invoicingListSourceTab(activeTab));
+    const subscriptions = getInvoicingSubscriptionsByIds(subscriptionState, tab.ids);
     return {
         runningActionId: runningInvoicingActionId(actionStateById),
         activeTab,
         columns: 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/esm/view/taskManager/taskDetailView/epics/fetchTaskDetailEpic.js

@@ -1,17 +1,24 @@
 import recordGet from 'lodash/get';
-import { concat, from, of } from 'rxjs';
+import isEqual from 'lodash/isEqual';
+import { EMPTY, concat, from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
 import { updateTags } from '../../../../entity/tag/tagReducer';
+import { mapTaskPayloadToTask } from '../../../../entity/task/taskPayload';
 import { updateTasks } from '../../../../entity/task/taskReducer';
+import { getTaskById } from '../../../../entity/task/taskSelector';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { fetchFileList } from '../../../fileView/fileViewReducer';
-import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, updateEditTaskFetchStatus, } from '../taskDetailReducer';
+import { buildTaskDetailLocalData, isLoadedTaskDetail, rebaseTaskDetailLocalData, } from '../taskDetailLocalData';
+import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus, } from '../taskDetailReducer';
 export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchTaskDetail.match), mergeMap((action) => {
     const { taskId, cacheOverride } = action.payload;
     const taskActions = [];
     const state = state$.value;
     const taskDetail = recordGet(state.taskDetailState.editTaskStateById, taskId, undefined);
+    if (cacheOverride === true && isLoadedTaskDetail(taskDetail)) {
+        return refreshLoadedTaskDetail(taskId, state$, zeniAPI);
+    }
     if (cacheOverride === true) {
         taskActions.push(removeTaskDetail(taskId));
     }
@@ -20,7 +27,7 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
         taskDetail.fetchTaskStatus.fetchState !== 'In-Progress') {
         taskActions.push(updateEditTaskFetchStatus({ taskId, fetchState: 'In-Progress' }));
         const getTaskDetail$ = zeniAPI
-            .getJSON(`${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`)
+            .getJSON(getTaskDetailUrl(zeniAPI, taskId))
             .pipe(mergeMap((response) => {
             if (isSuccessResponse(response) && response.data != null) {
                 const fetchActions = [
@@ -38,44 +45,7 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
                 }
                 return from(fetchActions);
             }
-            else {
-                const fetchActions = [
-                    updateEditTaskFetchStatus({
-                        taskId,
-                        fetchState: 'Error',
-                        error: response.status,
-                    }),
-                ];
-                if (response.status.message.includes('delete')) {
-                    fetchActions.push(openSnackbar({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: 'Cannot retrieve deleted task.',
-                            },
-                        ],
-                    }));
-                }
-                else {
-                    fetchActions.push(openSnackbar({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: response.status.message,
-                            },
-                        ],
-                    }));
-                }
-                return from(fetchActions);
-            }
+            return from(getFetchFailureActions(taskId, response.status));
         }), catchError((error) => {
             console.error(`REST API call errored out ${error}`);
             return of(updateEditTaskFetchStatus({
@@ -91,3 +61,74 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
         return from(taskActions);
     }
 }));
+const getTaskDetailUrl = (zeniAPI, taskId) => `${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`;
+const getFetchFailureActions = (taskId, status) => [
+    updateEditTaskFetchStatus({ taskId, fetchState: 'Error', error: status }),
+    openSnackbar({
+        messageSection: 'fetch_task_detail',
+        messageText: 'failed',
+        type: 'error',
+        showStatusIcon: true,
+        variables: [
+            {
+                variableName: '_api-error_',
+                variableValue: status.message.includes('delete')
+                    ? 'Cannot retrieve deleted task.'
+                    : status.message,
+            },
+        ],
+    }),
+];
+// An unparseable token is never treated as stale, so the refresh still applies.
+const isOlderSyncToken = (candidate, stored) => {
+    const candidateTime = Date.parse(candidate ?? '');
+    const storedTime = Date.parse(stored);
+    return (!Number.isNaN(candidateTime) &&
+        !Number.isNaN(storedTime) &&
+        candidateTime < storedTime);
+};
+const isSaveInProgress = (state, taskId) => state.taskDetailState.editTaskStateById[taskId]?.saveStatus.fetchState ===
+    'In-Progress';
+// Live refresh of an open page: no reset or loading state, unsaved edits kept,
+// skipped during the user's own save, stale responses dropped.
+const refreshLoadedTaskDetail = (taskId, state$, zeniAPI) => {
+    if (isSaveInProgress(state$.value, taskId)) {
+        return EMPTY;
+    }
+    return zeniAPI
+        .getJSON(getTaskDetailUrl(zeniAPI, taskId))
+        .pipe(mergeMap((response) => {
+        if (!isSuccessResponse(response) || response.data == null) {
+            return from(getFetchFailureActions(taskId, response.status));
+        }
+        const state = state$.value;
+        const taskPayload = response.data.tasks.find((task) => task.task_id === taskId);
+        const storedTask = getTaskById(state.taskState, taskId);
+        const taskDetail = state.taskDetailState.editTaskStateById[taskId];
+        if (taskPayload == null ||
+            storedTask == null ||
+            taskDetail == null ||
+            isSaveInProgress(state, taskId) ||
+            isOlderSyncToken(taskPayload.sync_token, storedTask.syncToken)) {
+            return EMPTY;
+        }
+        const refreshedTask = mapTaskPayloadToTask(taskPayload, storedTask);
+        const actions = [
+            updateTasks(response.data.tasks),
+            updateTags(response.data.tasks.map((task) => task.tags).flat()),
+            saveTaskUpdatesToLocalStore({
+                taskId,
+                taskDetailLocalData: rebaseTaskDetailLocalData(taskDetail.taskDetailLocalData, buildTaskDetailLocalData(storedTask), buildTaskDetailLocalData(refreshedTask)),
+            }),
+        ];
+        if (refreshedTask.fileIds.length > 0 &&
+            !isEqual(refreshedTask.fileIds, storedTask.fileIds)) {
+            actions.push(fetchFileList(refreshedTask.fileIds));
+        }
+        return from(actions);
+    }), catchError((error) => {
+        // Keep the page on screen; the next update or reload recovers.
+        console.error(`Task detail refresh errored out ${error}`);
+        return EMPTY;
+    }));
+};

package/lib/esm/view/taskManager/taskDetailView/epics/fetchTaskDetailPageEpic.js

@@ -2,12 +2,20 @@ import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { fetchClassList } from '../../../classList/classListReducer';
 import { fetchUserListByType } from '../../../userListView/userListViewReducer';
+import { isLoadedTaskDetail } from '../taskDetailLocalData';
 import { fetchTaskDetail, fetchTaskDetailPage, fetchTaskHistory, } from '../taskDetailReducer';
 export const fetchTaskDetailPageEpic = (actions$, state$) => actions$.pipe(filter(fetchTaskDetailPage.match), mergeMap((action) => {
     const { cacheOverride, taskId } = action.payload;
     const taskDetailActions = [];
     const state = state$.value;
-    if (cacheOverride === true) {
+    if (cacheOverride === true &&
+        taskId != null &&
+        isLoadedTaskDetail(state.taskDetailState.editTaskStateById[taskId])) {
+        // Only the task changes on a live refresh; the list refetches would show the skeleton.
+        taskDetailActions.push(fetchTaskDetail(taskId, true));
+        taskDetailActions.push(fetchTaskHistory(taskId, true));
+    }
+    else if (cacheOverride === true) {
         taskDetailActions.push(fetchUserListByType('taskManagerCandidate', true));
         taskDetailActions.push(fetchClassList());
         if (taskId != null) {

package/lib/esm/view/taskManager/taskDetailView/epics/initializeTaskToLocalStoreEpic.js

@@ -1,35 +1,14 @@
 import recordGet from 'lodash/get';
 import { from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { buildTaskDetailLocalData } from '../taskDetailLocalData';
 import { initializeTaskToLocalStore, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus, } from '../taskDetailReducer';
 export const initializeTaskToLocalStoreEpic = (actions$, state$) => actions$.pipe(filter(initializeTaskToLocalStore.match), mergeMap((action) => {
     const { taskId } = action.payload;
     const state = state$.value;
     const task = recordGet(state.taskState.taskByID, taskId, undefined);
     if (task != null) {
-        const taskDetailLocalData = {
-            name: task.name,
-            description: task.description,
-            status: task.status.code,
-            assignee: task.assignees,
-            groupAssignees: task.groupAssignees,
-            dueDate: task.dueDate,
-            priority: task.priority.code,
-            tagIds: task.tagIds,
-            fileIds: task.fileIds,
-            type: task.type,
-            recurringFrequency: task.recurringFrequency,
-            recurringDaysOfWeek: task.recurringDaysOfWeek,
-            recurringEndDateLocalData: {
-                recurringDatePickerOptionsType: 'date', // by default, date would be selected
-                recurringEndDate: task.recurringEndDate,
-            },
-            savedRecurringEndDate: task.recurringEndDate,
-            recurringStartDate: task.recurringStartDate,
-            timeSpent: task.timeSpent,
-            isPrivate: task.isPrivate,
-            taskGroupId: task.taskGroupIds[0],
-        };
+        const taskDetailLocalData = buildTaskDetailLocalData(task);
         const actions = [
             saveTaskUpdatesToLocalStore({ taskDetailLocalData, taskId }),
             updateEditTaskFetchStatus({ taskId, fetchState: 'Completed' }),

package/lib/esm/view/taskManager/taskDetailView/taskDetailLocalData.js

@@ -0,0 +1,36 @@
+import isEqual from 'lodash/isEqual';
+export const buildTaskDetailLocalData = (task) => ({
+    name: task.name,
+    description: task.description,
+    status: task.status.code,
+    assignee: task.assignees,
+    groupAssignees: task.groupAssignees,
+    dueDate: task.dueDate,
+    priority: task.priority.code,
+    tagIds: task.tagIds,
+    fileIds: task.fileIds,
+    type: task.type,
+    recurringFrequency: task.recurringFrequency,
+    recurringDaysOfWeek: task.recurringDaysOfWeek,
+    recurringEndDateLocalData: {
+        recurringDatePickerOptionsType: 'date', // by default, date would be selected
+        recurringEndDate: task.recurringEndDate,
+    },
+    savedRecurringEndDate: task.recurringEndDate,
+    recurringStartDate: task.recurringStartDate,
+    timeSpent: task.timeSpent,
+    isPrivate: task.isPrivate,
+    taskGroupId: task.taskGroupIds[0],
+});
+// Untouched fields (still equal to `baseline`) take the server value; edited ones keep the user's.
+export const rebaseTaskDetailLocalData = (local, baseline, fresh) => {
+    const rebased = { ...fresh };
+    const keys = Object.keys({ ...local, ...fresh });
+    keys.forEach((key) => {
+        if (!isEqual(local[key], baseline[key])) {
+            Object.assign(rebased, { [key]: local[key] });
+        }
+    });
+    return rebased;
+};
+export const isLoadedTaskDetail = (taskDetail) => taskDetail?.fetchTaskStatus.fetchState === 'Completed';

package/lib/esm/view/taskManager/taskDetailView/taskDetailReducer.js

@@ -4,6 +4,7 @@ import { clearAll } from '../../../rootActions';
 import { initialCommonHistory } from '../../spendManagement/commonHistoryView/commonHistory';
 import { toHistoricEvent, } from '../../spendManagement/commonHistoryView/commonHistoryPayload';
 import { initialTaskDetail, } from './taskDetail';
+import { isLoadedTaskDetail } from './taskDetailLocalData';
 export const initialState = {
     newTaskState: initialTaskDetail,
     editTaskStateById: {},
@@ -23,9 +24,11 @@ const taskDetailView = createSlice({
                 const { taskId } = action.payload;
                 if (taskId != null) {
                     const detail = recordGet(draft.editTaskStateById, taskId, undefined);
-                    if (action.payload.cacheOverride === true ||
-                        detail == null ||
-                        detail.fetchTaskStatus.fetchState !== 'In-Progress') {
+                    const isRefresh = action.payload.cacheOverride === true && isLoadedTaskDetail(detail);
+                    if (!isRefresh &&
+                        (action.payload.cacheOverride === true ||
+                            detail == null ||
+                            detail.fetchTaskStatus.fetchState !== 'In-Progress')) {
                         draft.editTaskStateById[taskId] = {
                             ...initialTaskDetail,
                         };
@@ -350,6 +353,11 @@ const taskDetailView = createSlice({
         fetchSubTasks: {
             reducer(draft, action) {
                 const { parentTaskId } = action.payload;
+                // Only the first load reports In-Progress; it gates the detail page skeleton.
+                if (draft.subTaskListFetchStatusByParentId[parentTaskId]?.fetchState ===
+                    'Completed') {
+                    return;
+                }
                 draft.subTaskListFetchStatusByParentId[parentTaskId] = {
                     fetchState: 'In-Progress',
                     error: undefined,

package/lib/view/invoicing/couponView/couponViewReducer.d.ts

@@ -10,11 +10,14 @@ export declare const fetchInvoicingCouponList: import("@reduxjs/toolkit").Action
     filters?: InvoicingCouponFilters;
     keepExistingListItems?: boolean;
     sort?: InvoicingListSort;
+    /** The tab cache to fill; defaults to the active tab's. */
+    tabId?: string;
 }], {
     filters: InvoicingCouponFilters;
     cursor: string | undefined;
     keepExistingListItems: boolean;
     sort: InvoicingListSort | undefined;
+    tabId: string | undefined;
 }, "invoicingCouponView/fetchInvoicingCouponList", never, never>, fetchInvoicingCouponListPage: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[payload: {
     cacheOverride?: boolean;
     filters?: InvoicingCouponFilters;
@@ -27,7 +30,11 @@ export declare const fetchInvoicingCouponList: import("@reduxjs/toolkit").Action
     ids: ID[];
     keepExistingListItems: boolean;
     nextCursor: string | null;
-}, "invoicingCouponView/updateInvoicingCouponList">, updateInvoicingCouponListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponListFailure">, fetchInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCouponView/fetchInvoicingCouponCounts">, updateInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCouponView/updateInvoicingCouponCounts">, updateInvoicingCouponCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponCountsFailure">, updateInvoicingCouponFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCouponFilters, "invoicingCouponView/updateInvoicingCouponFilters">, setInvoicingCouponActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "inactive" | "all", "invoicingCouponView/setInvoicingCouponActiveTab">, addInvoicingCouponToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    tabId: string;
+}, "invoicingCouponView/updateInvoicingCouponList">, updateInvoicingCouponListFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    status: ZeniAPIStatus;
+    tabId: string;
+}, "invoicingCouponView/updateInvoicingCouponListFailure">, fetchInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"invoicingCouponView/fetchInvoicingCouponCounts">, updateInvoicingCouponCounts: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingListCounts, "invoicingCouponView/updateInvoicingCouponCounts">, updateInvoicingCouponCountsFailure: import("@reduxjs/toolkit").ActionCreatorWithPayload<ZeniAPIStatus<Record<string, unknown>>, "invoicingCouponView/updateInvoicingCouponCountsFailure">, updateInvoicingCouponFilters: import("@reduxjs/toolkit").ActionCreatorWithPayload<InvoicingCouponFilters, "invoicingCouponView/updateInvoicingCouponFilters">, setInvoicingCouponActiveTab: import("@reduxjs/toolkit").ActionCreatorWithPayload<"active" | "inactive" | "all", "invoicingCouponView/setInvoicingCouponActiveTab">, addInvoicingCouponToList: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     id: ID;
     status?: InvoicingCouponStatus;
 }, "invoicingCouponView/addInvoicingCouponToList">;

package/lib/view/invoicing/couponView/couponViewReducer.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addInvoicingCouponToList = exports.setInvoicingCouponActiveTab = exports.updateInvoicingCouponFilters = exports.updateInvoicingCouponCountsFailure = exports.updateInvoicingCouponCounts = exports.fetchInvoicingCouponCounts = exports.updateInvoicingCouponListFailure = exports.updateInvoicingCouponList = exports.fetchInvoicingCouponListPage = exports.fetchInvoicingCouponList = exports.initialState = void 0;
 const toolkit_1 = require("@reduxjs/toolkit");
 const rootActions_1 = require("../../../rootActions");
+const invoicingListTabCache_1 = require("../invoicingListTabCache");
+const couponViewState_1 = require("./couponViewState");
 // The discounts-list tabs look up counts by tab id ('active' / 'inactive'),
 // while a coupon's status is 'active' | 'expired' | 'archived'. Collapse the
 // non-active statuses onto the 'inactive' tab; a newly created coupon with no
@@ -12,17 +14,11 @@ function couponStatusToTabCountKey(status) {
     return status == null || status === 'active' ? 'active' : 'inactive';
 }
 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 couponView = (0, toolkit_1.createSlice)({
     name: 'invoicingCouponView',
@@ -30,14 +26,9 @@ const couponView = (0, toolkit_1.createSlice)({
     reducers: {
         fetchInvoicingCouponList: {
             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, couponViewState_1.INVOICING_COUPON_CLIENT_FILTERED_TAB_IDS), action.payload.keepExistingListItems);
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -46,12 +37,17 @@ const couponView = (0, toolkit_1.createSlice)({
                         cursor: payload.cursor,
                         keepExistingListItems: payload.keepExistingListItems ?? false,
                         sort: payload.sort,
+                        tabId: payload.tabId,
                     },
                 };
             },
         },
         fetchInvoicingCouponListPage: {
             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;
             },
@@ -66,16 +62,10 @@ const couponView = (0, toolkit_1.createSlice)({
             },
         },
         updateInvoicingCouponList(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);
         },
         updateInvoicingCouponListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            (0, invoicingListTabCache_1.failInvoicingListTabFetch)(draft.byTab, action.payload.tabId, action.payload.status);
         },
         fetchInvoicingCouponCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -93,8 +83,8 @@ const couponView = (0, toolkit_1.createSlice)({
         updateInvoicingCouponFilters(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.
         setInvoicingCouponActiveTab(draft, action) {
             draft.activeTab = action.payload;
         },
@@ -103,10 +93,9 @@ const couponView = (0, toolkit_1.createSlice)({
         // the same id/counts, so only creates dispatch this.
         addInvoicingCouponToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.ids.includes(id)) {
+            if (!(0, invoicingListTabCache_1.addToInvoicingListTabs)(draft.byTab, id, couponStatusToTabCountKey(status))) {
                 return;
             }
-            draft.ids = [id, ...draft.ids];
             draft.counts.all += 1;
             const tabCountKey = couponStatusToTabCountKey(status);
             draft.counts[tabCountKey] = (draft.counts[tabCountKey] ?? 0) + 1;