deploy: eef0b83

lib/components/todo/TodoItem.tsx

@@ -4,14 +4,17 @@ import { useSelector } from 'react-redux';
 
 import type { TransitionAction } from '~transitions';
 
+import cloneDeep from 'lodash/cloneDeep';
 import { CheckMark, Cross, Spinner } from '~usecases/lib/components/todo/Icons';
+import type { OptimisticActions } from '~usecases/lib/store/actions';
+import { createTodo, editTodo } from '~usecases/lib/store/actions';
 import { useTodoState } from '~usecases/lib/store/hooks';
 import { selectTodo } from '~usecases/lib/store/selectors';
 import type { Todo } from '~usecases/lib/store/types';
 
 type Props = {
     todo: Todo;
-    onRetry: (action: TransitionAction) => void;
+    onRetry: (action: TransitionAction<OptimisticActions>) => void;
     onEdit: (todo: Todo) => void;
     onDelete: (todo: Todo) => void;
 };
@@ -21,9 +24,9 @@ const TodoConflict: FC<{ id: string }> = ({ id }) => {
     const Tag: keyof JSX.IntrinsicElements = todo.done ? 's' : 'em';
 
     return (
-        <span className="text-xs text-red-400">
+        <div className="text-[9px] text-red-300">
             Conflict : "<Tag>{todo.value}</Tag>"
-        </span>
+        </div>
     );
 };
 
@@ -37,15 +40,17 @@ export const TodoItem: FC<Props> = ({ todo, onEdit, onRetry, onDelete }) => {
         if (loading) return;
 
         if (failedAction) {
-            onRetry({
-                ...failedAction,
-                payload: {
-                    todo: {
-                        ...failedAction.payload.todo,
-                        ...mutation,
-                    },
-                },
-            });
+            if (createTodo.stage.match(failedAction)) {
+                const create = cloneDeep(failedAction);
+                create.payload.todo = { ...create.payload.todo, ...mutation };
+                onRetry(create);
+            }
+
+            if (editTodo.stage.match(failedAction)) {
+                const edit = cloneDeep(failedAction);
+                edit.payload.todo = { ...edit.payload.todo, ...mutation };
+                onRetry(edit);
+            }
         } else onEdit({ ...todo, revision: todo.revision + 1, ...mutation });
     };
 

lib/store/actions.ts

@@ -11,4 +11,9 @@ export const createTodo = createTransitions('todos::add')(create);
 export const editTodo = createTransitions('todos::edit')(edit);
 export const deleteTodo = createTransitions('todos::delete', TransitionDedupeMode.TRAILING)(remove);
 
+export type OptimisticActions =
+    | ReturnType<typeof createTodo.stage>
+    | ReturnType<typeof editTodo.stage>
+    | ReturnType<typeof deleteTodo.stage>;
+
 export const sync = createAction('todos::sync');

lib/store/middleware.ts

@@ -1,4 +1,4 @@
-import type { Middleware } from 'redux';
+import { isAction, type Middleware } from 'redux';
 import { isTransition, type TransitionAction } from '~transitions';
 
 type TransitionEvent = CustomEvent<TransitionAction>;
@@ -31,7 +31,7 @@ export const createOptimistronMiddlware = (): [Middleware, TransitionEventBus] =
 
     return [
         () => (next) => (action) => {
-            if (isTransition(action)) eventBus.publish(action);
+            if (isAction(action) && isTransition(action)) eventBus.publish(action);
             next(action);
         },
         eventBus,

lib/store/reducer.ts

@@ -39,7 +39,13 @@ export const todos = optimistron(
             /** Simulate items all being bumped to a new revision. If we
              * have ongoing transitions, these should create conflicts */
             return Object.fromEntries(
-                Object.entries(getState()).map(([key, todo]) => [key, { ...todo, revision: todo.revision + 10 }]),
+                Object.entries(getState()).map(([key, todo]) => [
+                    key,
+                    {
+                        ...todo,
+                        revision: todo.revision + 10,
+                    },
+                ]),
             );
         }
 

lib/store/selectors.ts

@@ -7,7 +7,7 @@ import {
     selectIsOptimistic,
     selectOptimistic,
 } from '~selectors';
-import { type State } from '~usecases/lib/store/store';
+import type { State } from '~usecases/lib/store/store';
 
 export const selectTodo = (id: string) =>
     createSelector(

thunks/index.tsx

@@ -1,14 +1,14 @@
 import type { FC } from 'react';
 import { useEffect } from 'react';
 import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 
 import { TransitionHistoryProvider } from '~usecases/lib/components/graph/TransitionHistoryProvider';
 import { useMockApi } from '~usecases/lib/components/mocks/MockApiProvider';
 import { createDebugStore } from '~usecases/lib/store/store';
 import { App } from '~usecases/thunks/App';
 
-export const { store, eventBus } = createDebugStore(thunk.withExtraArgument({}));
+export const { store, eventBus } = createDebugStore(thunk);
 
 const Usecase: FC = () => {
     const mockApi = useMockApi();

thunks/thunk.ts

@@ -1,12 +1,12 @@
-import type { AnyAction } from 'redux';
+import type { Action } from 'redux';
 import type { ThunkAction } from 'redux-thunk';
 
 import { createTodo, deleteTodo, editTodo } from '~usecases/lib/store/actions';
 import type { State } from '~usecases/lib/store/store';
 import type { Todo } from '~usecases/lib/store/types';
 import { generateId, simulateAPIRequest } from '~usecases/lib/utils/mock-api';
 
-export const createTodoThunk = (todo: Todo): ThunkAction<void, State, undefined, AnyAction> => {
+export const createTodoThunk = (todo: Todo): ThunkAction<void, State, undefined, Action> => {
     return async (dispatch) => {
         const transitionId = todo.id;
 
@@ -21,7 +21,7 @@ export const createTodoThunk = (todo: Todo): ThunkAction<void, State, undefined,
     };
 };
 
-export const editTodoThunk = (id: string, update: Todo): ThunkAction<void, State, undefined, AnyAction> => {
+export const editTodoThunk = (id: string, update: Todo): ThunkAction<void, State, undefined, Action> => {
     return async (dispatch) => {
         const transitionId = id;
 
@@ -35,7 +35,7 @@ export const editTodoThunk = (id: string, update: Todo): ThunkAction<void, State
     };
 };
 
-export const deleteTodoTunk = (id: string): ThunkAction<void, State, undefined, AnyAction> => {
+export const deleteTodoTunk = (id: string): ThunkAction<void, State, undefined, Action> => {
     return async (dispatch) => {
         const transitionId = id;