chore: usecases with new exposed selectors

edvincandon · edvincandon · commit f05799174cb9 · 2026-02-25T12:25:36.000+01:00
diff --git a/usecases/basic/App.tsx b/usecases/basic/App.tsx
@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useStore } from 'react-redux';
 
 import type { StagedAction } from '~transitions';
 
@@ -9,11 +9,16 @@ import { ProjectBoard } from '~usecases/lib/components/projects/ProjectBoard';
 import { Layout, type UsecaseDescription } from '~usecases/lib/components/todo/Layout';
 import { TodoApp } from '~usecases/lib/components/todo/TodoApp';
 import { useAutoRetry } from '~usecases/lib/hooks/useAutoRetry';
+import { activitySelectors } from '~usecases/lib/store/activity/reducer';
 import { dismissActivity, editActivity, logActivity } from '~usecases/lib/store/activity/actions';
 import { createEpic, deleteEpic, editEpic } from '~usecases/lib/store/epics/actions';
+import { epicsSelectors } from '~usecases/lib/store/epics/reducer';
+import { profileSelectors } from '~usecases/lib/store/profile/reducer';
 import { updateProfile } from '~usecases/lib/store/profile/actions';
+import { projectsSelectors } from '~usecases/lib/store/projects/reducer';
 import { createProjectTodo, deleteProjectTodo, editProjectTodo } from '~usecases/lib/store/projects/actions';
 import type { ActivityEntry, Epic, Profile, ProjectTodo } from '~usecases/lib/store/types';
+import type { State } from '~usecases/lib/store/store';
 import { generateId, simulateAPIRequest } from '~usecases/lib/utils/mock-api';
 
 import { C, F, O } from '~usecases/lib/components/todo/CodeTags';
@@ -144,14 +149,27 @@ export const App: FC = () => {
     };
 
     /** Route failed transitions through the correct lifecycle handler on reconnect */
-    useAutoRetry((action: StagedAction) => {
+    const store = useStore<State>();
+
+    const retryAction = (action: StagedAction) => {
         if (createEpic.stage.match(action)) return handleCreateEpic(action.payload);
         if (editEpic.stage.match(action)) return handleEditEpic(action.payload as Epic);
         if (updateProfile.stage.match(action)) return handleUpdateProfile(action.payload);
         if (createProjectTodo.stage.match(action)) return handleCreateProjectTodo(action.payload);
         if (editProjectTodo.stage.match(action)) return handleEditProjectTodo(action.payload as ProjectTodo);
         if (logActivity.stage.match(action)) return handleLogActivity(action.payload);
         if (editActivity.stage.match(action)) return handleEditActivity(action.payload as ActivityEntry);
+    };
+
+    useAutoRetry(() => {
+        const state = store.getState();
+        const failed = [
+            ...epicsSelectors.selectFailures(state.epics),
+            ...profileSelectors.selectFailures(state.profile),
+            ...projectsSelectors.selectFailures(state.projects),
+            ...activitySelectors.selectFailures(state.activity),
+        ];
+        failed.forEach(retryAction);
     });
 
     return (
diff --git a/usecases/lib/hooks/useAutoRetry.ts b/usecases/lib/hooks/useAutoRetry.ts
@@ -1,28 +1,17 @@
 import { useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
-
-import type { StagedAction } from '~transitions';
 
 import { useMockApi } from '~usecases/lib/components/mocks/MockApiProvider';
-import { selectAllFailedTransitions } from '~usecases/lib/store/epics/selectors';
 
-/** Retries all failed transitions when coming back online.
- *  Only fires on the offline → online transition, not while already online.
- *  The `retry` callback is pattern-specific:
- *  - Basic/Thunks: routes each action to the correct handler/thunk
- *  - Sagas: re-dispatches the stage action (saga watcher picks it up) */
-export const useAutoRetry = (retry: (action: StagedAction) => void) => {
+/** Calls `onReconnect` exactly once on the offline → online transition.
+ *  The retry strategy (what to dispatch) is the caller's concern. */
+export const useAutoRetry = (onReconnect: () => void) => {
     const { online } = useMockApi();
-    const failedTransitions = useSelector(selectAllFailedTransitions);
-    const retryRef = useRef(retry);
-    retryRef.current = retry;
-
     const wasOnline = useRef(online);
+    const onReconnectRef = useRef(onReconnect);
+    onReconnectRef.current = onReconnect;
 
     useEffect(() => {
-        if (online && !wasOnline.current) {
-            failedTransitions.forEach((a) => retryRef.current(a));
-        }
+        if (online && !wasOnline.current) onReconnectRef.current();
         wasOnline.current = online;
-    }, [online, failedTransitions]);
+    }, [online]);
 };
diff --git a/usecases/lib/store/activity/reducer.ts b/usecases/lib/store/activity/reducer.ts
@@ -13,7 +13,7 @@ const compare = (a: ActivityEntry) => (b: ActivityEntry) => {
 
 const eq = (a: ActivityEntry) => (b: ActivityEntry) => a.message === b.message && a.category === b.category;
 
-export const { reducer: activity, selectOptimistic } = optimistron(
+const { reducer: activity, selectors } = optimistron(
     'activity',
     [] as ActivityEntry[],
     listState<ActivityEntry>({ key: 'id', compare, eq }),
@@ -30,3 +30,5 @@ export const { reducer: activity, selectOptimistic } = optimistron(
         },
     },
 );
+
+export { activity, selectors as activitySelectors };
diff --git a/usecases/lib/store/activity/selectors.ts b/usecases/lib/store/activity/selectors.ts
@@ -1,8 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { selectIsConflicting, selectIsFailed, selectIsOptimistic } from '~selectors/selectors';
-import { selectOptimistic } from '~usecases/lib/store/activity/reducer';
+import { activitySelectors } from '~usecases/lib/store/activity/reducer';
 import type { State } from '~usecases/lib/store/store';
 
+const { selectOptimistic, selectIsOptimistic, selectIsFailed, selectIsConflicting } = activitySelectors;
+
 export const selectOptimisticActivity = createSelector(
     (state: State) => state.activity,
     selectOptimistic((activity) => [...activity.state].sort((a, b) => b.timestamp - a.timestamp)),
diff --git a/usecases/lib/store/epics/reducer.ts b/usecases/lib/store/epics/reducer.ts
@@ -22,7 +22,7 @@ const compare = (a: Epic) => (b: Epic) => {
 
 const eq = (a: Epic) => (b: Epic) => a.done === b.done && a.value === b.value;
 
-export const { reducer: epics, selectOptimistic } = optimistron(
+const { reducer: epics, selectors } = optimistron(
     'epics',
     initial,
     recordState<Epic>({ key: 'id', compare, eq }),
@@ -44,3 +44,5 @@ export const { reducer: epics, selectOptimistic } = optimistron(
         },
     },
 );
+
+export { epics, selectors as epicsSelectors };
diff --git a/usecases/lib/store/epics/selectors.ts b/usecases/lib/store/epics/selectors.ts
@@ -1,8 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { selectAllFailedTransitions as selectAllFailed, selectIsConflicting, selectIsFailed, selectIsOptimistic } from '~selectors/selectors';
-import { selectOptimistic } from '~usecases/lib/store/epics/reducer';
+import { epicsSelectors } from '~usecases/lib/store/epics/reducer';
 import type { State } from '~usecases/lib/store/store';
 
+const { selectOptimistic, selectIsOptimistic, selectIsFailed, selectIsConflicting } = epicsSelectors;
+
 export const selectEpic = (id: string) =>
     createSelector(
         (state: State) => state.epics,
@@ -24,15 +25,6 @@ export const selectOptimisticEpicState = (id: string) =>
         }),
     );
 
-/** All failed transitions across every slice — used by useAutoRetry */
-export const selectAllFailedTransitions = createSelector(
-    (state: State) => state.epics,
-    (state: State) => state.profile,
-    (state: State) => state.projects,
-    (state: State) => state.activity,
-    (epics, profile, projects, activity) => selectAllFailed(epics, profile, projects, activity),
-);
-
 /** Combined transitions from all reducers — feeds the transition graph */
 export const selectAllTransitions = createSelector(
     (state: State) => state.epics.transitions,
diff --git a/usecases/lib/store/profile/reducer.ts b/usecases/lib/store/profile/reducer.ts
@@ -15,7 +15,7 @@ const eq = (a: Profile) => (b: Profile) => a.displayName === b.displayName && a.
 
 const initial: Profile = { displayName: 'Andy ZEN', avatarUrl: 'https://i.pravatar.cc/80?u=andy', revision: 0 };
 
-export const { reducer: profile, selectOptimistic } = optimistron(
+const { reducer: profile, selectors } = optimistron(
     'profile',
     initial,
     singularState<Profile>({ compare, eq }),
@@ -32,3 +32,5 @@ export const { reducer: profile, selectOptimistic } = optimistron(
         },
     },
 );
+
+export { profile, selectors as profileSelectors };
diff --git a/usecases/lib/store/profile/selectors.ts b/usecases/lib/store/profile/selectors.ts
@@ -1,8 +1,9 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { selectIsConflicting, selectIsFailed, selectIsOptimistic } from '~selectors/selectors';
-import { selectOptimistic } from '~usecases/lib/store/profile/reducer';
+import { profileSelectors } from '~usecases/lib/store/profile/reducer';
 import type { State } from '~usecases/lib/store/store';
 
+const { selectOptimistic, selectIsOptimistic, selectIsFailed, selectIsConflicting } = profileSelectors;
+
 export const selectOptimisticProfile = createSelector(
     (state: State) => state.profile,
     selectOptimistic((profile) => profile.state),
diff --git a/usecases/lib/store/projects/reducer.ts b/usecases/lib/store/projects/reducer.ts
@@ -31,7 +31,7 @@ const initial = (() => {
     return state;
 })();
 
-export const { reducer: projects, selectOptimistic } = optimistron(
+const { reducer: projects, selectors } = optimistron(
     'projects',
     initial,
     nestedRecordState<ProjectTodo>()({ keys: ['projectId', 'id'], compare, eq }),
@@ -59,3 +59,5 @@ export const { reducer: projects, selectOptimistic } = optimistron(
         },
     },
 );
+
+export { projects, selectors as projectsSelectors };
diff --git a/usecases/lib/store/projects/selectors.ts b/usecases/lib/store/projects/selectors.ts
@@ -1,9 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { selectIsConflicting, selectIsFailed, selectIsOptimistic } from '~selectors/selectors';
-import { selectOptimistic } from '~usecases/lib/store/projects/reducer';
+import { projectsSelectors } from '~usecases/lib/store/projects/reducer';
 import type { State } from '~usecases/lib/store/store';
 import type { ProjectTodo } from '~usecases/lib/store/types';
 
+const { selectOptimistic, selectIsOptimistic, selectIsFailed, selectIsConflicting } = projectsSelectors;
+
 export const selectOptimisticProjectTodos = (projectId: string) =>
     createSelector(
         (state: State) => state.projects,
diff --git a/usecases/lib/utils/mock-api.ts b/usecases/lib/utils/mock-api.ts
@@ -5,7 +5,7 @@ declare global {
     }
 }
 
-export const getMockApiOnline = () => window.__mock_api_online ?? true;
+export const getMockApiOnline = () => window.__mock_api_online ?? false;
 export const setMockApiOnline = (value: boolean) => (window.__mock_api_online = value);
 
 export const getMockApiTimeout = () => window.__mock_api_timeout ?? 500;
diff --git a/usecases/sagas/App.tsx b/usecases/sagas/App.tsx
@@ -12,6 +12,7 @@ import { createEpic, deleteEpic, editEpic } from '~usecases/lib/store/epics/acti
 import { updateProfile } from '~usecases/lib/store/profile/actions';
 import { createProjectTodo, deleteProjectTodo, editProjectTodo } from '~usecases/lib/store/projects/actions';
 import type { ActivityEntry, Epic, Profile, ProjectTodo } from '~usecases/lib/store/types';
+import { retryAll } from '~usecases/sagas/saga';
 
 import { C, F, O } from '~usecases/lib/components/todo/CodeTags';
 
@@ -39,8 +40,8 @@ export const App: FC = () => {
     const handleEditActivity = (entry: ActivityEntry) => dispatch(editActivity.stage(entry));
     const handleDismissActivity = (entry: ActivityEntry) => dispatch(dismissActivity.stage({ id: entry.id }));
 
-    /** Sagas watch stage actions — retry is just a re-dispatch */
-    useAutoRetry((action) => dispatch(action));
+    /** Dispatch a single action — the saga selects & re-dispatches all failed transitions */
+    useAutoRetry(() => dispatch(retryAll()));
 
     return (
         <Layout title="Sagas" description={description}>
diff --git a/usecases/sagas/saga.ts b/usecases/sagas/saga.ts
@@ -1,13 +1,41 @@
-import { put, takeEvery } from 'redux-saga/effects';
+import { createAction } from '@reduxjs/toolkit';
+import { put, select, takeEvery, takeLeading } from 'redux-saga/effects';
 
+import type { StagedAction } from '~transitions';
 import { getTransitionMeta } from '~transitions';
+import { activitySelectors } from '~usecases/lib/store/activity/reducer';
 import { dismissActivity, editActivity, logActivity } from '~usecases/lib/store/activity/actions';
 import { createEpic, deleteEpic, editEpic } from '~usecases/lib/store/epics/actions';
+import { epicsSelectors } from '~usecases/lib/store/epics/reducer';
+import { profileSelectors } from '~usecases/lib/store/profile/reducer';
 import { updateProfile } from '~usecases/lib/store/profile/actions';
+import { projectsSelectors } from '~usecases/lib/store/projects/reducer';
 import { createProjectTodo, deleteProjectTodo, editProjectTodo } from '~usecases/lib/store/projects/actions';
+import type { State } from '~usecases/lib/store/store';
 import { generateId, simulateAPIRequest } from '~usecases/lib/utils/mock-api';
 
+export const retryAll = createAction('optimistron::retryAll');
+
+function* retryAllFailed() {
+    const epics: State['epics'] = yield select((s: State) => s.epics);
+    const profile: State['profile'] = yield select((s: State) => s.profile);
+    const projects: State['projects'] = yield select((s: State) => s.projects);
+    const activity: State['activity'] = yield select((s: State) => s.activity);
+
+    const failed: StagedAction[] = [
+        ...epicsSelectors.selectFailures(epics),
+        ...profileSelectors.selectFailures(profile),
+        ...projectsSelectors.selectFailures(projects),
+        ...activitySelectors.selectFailures(activity),
+    ];
+
+    for (const action of failed) {
+        yield put(action);
+    }
+}
+
 export function* rootSaga() {
+    yield takeLeading(retryAll.match, retryAllFailed);
     yield takeEvery(createEpic.stage.match, function* (action) {
         const transitionId = getTransitionMeta(action).id;
         try {
diff --git a/usecases/thunks/App.tsx b/usecases/thunks/App.tsx
@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useStore } from 'react-redux';
 
 import type { StagedAction } from '~transitions';
 
@@ -9,11 +9,16 @@ import { ProjectBoard } from '~usecases/lib/components/projects/ProjectBoard';
 import { Layout, type UsecaseDescription } from '~usecases/lib/components/todo/Layout';
 import { TodoApp } from '~usecases/lib/components/todo/TodoApp';
 import { useAutoRetry } from '~usecases/lib/hooks/useAutoRetry';
+import { activitySelectors } from '~usecases/lib/store/activity/reducer';
 import { editActivity, logActivity } from '~usecases/lib/store/activity/actions';
 import { createEpic, editEpic } from '~usecases/lib/store/epics/actions';
+import { epicsSelectors } from '~usecases/lib/store/epics/reducer';
+import { profileSelectors } from '~usecases/lib/store/profile/reducer';
 import { updateProfile } from '~usecases/lib/store/profile/actions';
+import { projectsSelectors } from '~usecases/lib/store/projects/reducer';
 import { createProjectTodo, editProjectTodo } from '~usecases/lib/store/projects/actions';
 import type { ActivityEntry, Epic, Profile, ProjectTodo } from '~usecases/lib/store/types';
+import type { State } from '~usecases/lib/store/store';
 import type { store } from '~usecases/thunks';
 import {
     createEpicThunk,
@@ -55,14 +60,27 @@ export const App: FC = () => {
     const handleDismissActivity = async (entry: ActivityEntry) => dispatch(dismissActivityThunk(entry));
 
     /** Route failed transitions through the correct thunk on reconnect */
-    useAutoRetry((action: StagedAction) => {
+    const store = useStore<State>();
+
+    const retryAction = (action: StagedAction) => {
         if (createEpic.stage.match(action)) return handleCreateEpic(action.payload);
         if (editEpic.stage.match(action)) return handleEditEpic(action.payload as Epic);
         if (updateProfile.stage.match(action)) return handleUpdateProfile(action.payload);
         if (createProjectTodo.stage.match(action)) return handleCreateProjectTodo(action.payload);
         if (editProjectTodo.stage.match(action)) return handleEditProjectTodo(action.payload as ProjectTodo);
         if (logActivity.stage.match(action)) return handleLogActivity(action.payload);
         if (editActivity.stage.match(action)) return handleEditActivity(action.payload as ActivityEntry);
+    };
+
+    useAutoRetry(() => {
+        const state = store.getState();
+        const failed = [
+            ...epicsSelectors.selectFailures(state.epics),
+            ...profileSelectors.selectFailures(state.profile),
+            ...projectsSelectors.selectFailures(state.projects),
+            ...activitySelectors.selectFailures(state.activity),
+        ];
+        failed.forEach(retryAction);
     });
 
     return (
