react-experiment: fix logger's run not being completed (#165)

Author: QuentinRoy

.changeset/dull-buckets-decide.md

@@ -0,0 +1,5 @@
+---
+'@lightmill/react-experiment': patch
+---
+
+Fix logger's run not being marked as completed under run completion.

packages/react-experiment/src/run.tsx

@@ -16,6 +16,7 @@ export type RunProps<T extends RegisteredTask> = {
   logger?: Logger;
   confirmBeforeUnload?: boolean;
   cancelRunOnUnload?: boolean;
+  completeRunOnCompletion?: boolean;
 };
 
 // This component uses explicit return type to prevent the function from
@@ -26,14 +27,16 @@ export function Run<T extends RegisteredTask>({
   elements: { tasks, completed, loading, crashed },
   confirmBeforeUnload = true,
   cancelRunOnUnload = true,
+  completeRunOnCompletion = true,
 }: RunProps<T>): JSX.Element | null {
   // Logger and timeline are not controlled. We make sure any change to them
   // is ignored, and the previous value is used instead.
   let timelineRef = React.useRef(timelineProp);
   let loggerRef = React.useRef(loggerProp ?? null);
   let timelineState = useManagedTimeline(
     timelineRef.current,
-    loggerRef.current
+    loggerRef.current,
+    { cancelRunOnUnload, completeRunOnCompletion }
   );
   let [loggerState, setLoggerState] = React.useState<{
     status: 'error' | 'ok';
@@ -60,18 +63,6 @@ export function Run<T extends RegisteredTask>({
     confirmBeforeUnload && timelineState.status !== 'completed'
   );
 
-  // When the page is closed, one may want to mark the run as canceled.
-  React.useEffect(() => {
-    if (!cancelRunOnUnload) return;
-    let unloadHandler = () => {
-      loggerRef.current?.cancelRun?.();
-    };
-    globalThis.addEventListener('unload', unloadHandler);
-    return () => {
-      globalThis.removeEventListener('unload', unloadHandler);
-    };
-  }, [cancelRunOnUnload]);
-
   if (loggerState.status === 'error') {
     if (loggerState.error == null) {
       throw new Error('Could not add log to logger.');

packages/react-experiment/src/timeline.ts

@@ -23,9 +23,9 @@ type TimelineAction<T> =
   | { type: 'run-started' }
   | { type: 'task-started'; task: T; onTaskCompleted: () => void }
   | { type: 'task-completed' }
-  | { type: 'run-completed' }
+  | { type: 'all-tasks-completed' }
   | { type: 'run-canceled' }
-  | { type: 'logger-flushed' }
+  | { type: 'run-completed' }
   | { type: 'logger-error'; error: Error };
 
 export type Logger = {
@@ -51,11 +51,11 @@ function timelineReducer<T extends BaseTask>(
         onTaskCompleted: action.onTaskCompleted,
       };
     case 'task-completed':
-    case 'run-completed':
+    case 'all-tasks-completed':
       return { status: 'loading', task: null };
     case 'run-canceled':
       return { status: 'canceled', task: null };
-    case 'logger-flushed':
+    case 'run-completed':
       return { status: 'completed', task: null };
     case 'logger-error':
       return { status: 'crashed', task: null, error: action.error };
@@ -64,12 +64,29 @@ function timelineReducer<T extends BaseTask>(
 
 export default function useManagedTimeline<Task extends BaseTask>(
   timeline: Timeline<Task> | null,
-  logger: Logger | null
+  logger: Logger | null,
+  {
+    cancelRunOnUnload,
+    completeRunOnCompletion,
+  }: { cancelRunOnUnload: boolean; completeRunOnCompletion: boolean }
 ): TimelineState<Task> {
   const [state, dispatch] = React.useReducer(timelineReducer<Task>, {
     status: 'idle',
     task: null,
   });
+
+  // When the page is closed, one may want to mark the run as canceled.
+  React.useEffect(() => {
+    if (!cancelRunOnUnload) return;
+    let unloadHandler = () => {
+      logger?.cancelRun?.();
+    };
+    globalThis.addEventListener('unload', unloadHandler);
+    return () => {
+      globalThis.removeEventListener('unload', unloadHandler);
+    };
+  }, [cancelRunOnUnload, logger]);
+
   React.useEffect(() => {
     let hasEnded = false;
     async function doRun() {
@@ -99,10 +116,11 @@ export default function useManagedTimeline<Task extends BaseTask>(
         },
       });
       if (hasEnded) return;
-      dispatch({ type: 'run-completed' });
+      dispatch({ type: 'all-tasks-completed' });
       await logger?.flush();
+      await logger?.completeRun();
       if (hasEnded) return;
-      dispatch({ type: 'logger-flushed' });
+      dispatch({ type: 'run-completed' });
       hasEnded = true;
     }
     doRun();