(fix: M2-7581) Available activity starts not from the beginning after…

… Idle Timer ends (#523)

* Remove activityProgress after autoCompletion

* Fix: clearTimer when useEffect unmount phase

* fix: M2-7353

---------

Co-authored-by: Viktor Riabkov <[email protected]>

src/features/AutoCompletion/model/extractActivityidsToSubmitByParams.test.ts

@@ -48,4 +48,16 @@ describe('extractActivityIdsToSubmitByParams', () => {
 
     expect(result).toEqual(['activity3']);
   });
+
+  it('should return an array with the current activity id and the last activity id if isInterruptedActivityLast is false', () => {
+    const params = {
+      isFlow: true,
+      currentActivityId: 'activity2',
+      flowActivityIds: ['activity1', 'activity2', 'activity3'],
+    };
+
+    const result = extractActivityIdsToSubmitByParams(params);
+
+    expect(result).toEqual(['activity2', 'activity3']);
+  });
 });

src/i18n/en/translation.json

@@ -11,7 +11,7 @@
     "singUp": "Sign Up",
     "mobileOnly": "Mobile only",
     "start": "Start",
-    "startTimedActivity": "Start timed activity",
+    "startTimedActivity": "Start Timed Activity",
     "continue": "Continue",
     "save_and_exit": "Save & exit",
     "optional": "Optional",

src/i18n/fr/translation.json

@@ -11,7 +11,7 @@
     "singUp": "S'inscrire",
     "mobileOnly": "Mobile uniquement",
     "start": "Commencer",
-    "startTimedActivity": "Démarrer l'activité chronométrée",
+    "startTimedActivity": "Démarrer L'activité Chronométrée",
     "continue": "Continuer",
     "save_and_exit": "Enregistrer et quitter",
     "optional": "Facultatif",

src/widgets/AutoCompletion/ui/AutoCompletionScreen.tsx

@@ -23,6 +23,8 @@ export const AutoCompletionScreen = () => {
 
   const { entityCompleted } = appletModel.hooks.useGroupProgressStateManager();
 
+  const { removeActivityProgress } = appletModel.hooks.useActivityProgress();
+
   const { removeAutoCompletion } = AutoCompletionModel.useAutoCompletionStateManager();
 
   const { completionState, activityName } = useAutoCompletion();
@@ -50,6 +52,11 @@ export const AutoCompletionScreen = () => {
       eventId: context.eventId,
     });
 
+    removeActivityProgress({
+      activityId: context.activityId,
+      eventId: context.eventId,
+    });
+
     if (context.publicAppletKey) {
       return navigator.navigate(ROUTES.publicJoin.navigateTo(context.publicAppletKey), {
         replace: true,
@@ -62,12 +69,14 @@ export const AutoCompletionScreen = () => {
   }, [
     addWarningBanner,
     completionState,
+    context.activityId,
     context.appletId,
     context.entityId,
     context.eventId,
     context.publicAppletKey,
     entityCompleted,
     navigator,
+    removeActivityProgress,
     removeAutoCompletion,
     t,
   ]);

src/widgets/InactivityTracker/InactivityTracker.tsx

@@ -11,15 +11,14 @@ export const InactivityTracker = ({ children }: InactivityTrackerProps) => {
   const { logout } = useLogout();
 
   const IdleTimer = useIdleTimer({
-    onFinish: logout,
     events: interactionEvents,
     timerName: 'InactivityTracker',
   });
 
   useEffect(() => {
-    const listener = IdleTimer.createListener({
-      time: { hours: 0, minutes: 15 },
-    });
+    const time = { hours: 0, minutes: 15 };
+
+    const listener = IdleTimer.createListener(time, logout);
 
     IdleTimer.start(listener);
 

src/widgets/InactivityTracker/lib/useIdleTimer.ts

@@ -5,43 +5,25 @@ import useTimer from '~/shared/utils/useTimer';
 
 type Props = {
   timerName?: string;
-  onFinish: () => void;
   events: string[];
 };
 
-type CreateListenerProps = {
-  time: HourMinute;
-};
-
 export const useIdleTimer = (props: Props) => {
-  const { resetTimer, setTimer } = useTimer();
-
-  const onTimerExpire = useCallback(() => {
-    // Listener clean up. Removes the existing event listener from the window
-    props.events.forEach((eventName) => {
-      window.removeEventListener(eventName, resetTimer);
-    });
-
-    // Execute onComplete function
-    if (props.onFinish) {
-      props.onFinish();
-    }
-  }, [props, resetTimer]);
+  const { setTimer, resetTimer } = useTimer();
 
   const createListener = useCallback(
-    (input: CreateListenerProps) => {
+    (time: HourMinute, onFinish: () => void) => {
       return () => {
-        const duration: number =
-          getMsFromHours(input.time.hours) + getMsFromMinutes(input.time.minutes);
+        const duration: number = getMsFromHours(time.hours) + getMsFromMinutes(time.minutes);
 
         setTimer({
           time: duration,
-          onComplete: onTimerExpire,
           timerName: props.timerName,
+          onComplete: onFinish,
         });
       };
     },
-    [props.timerName, setTimer, onTimerExpire],
+    [props.timerName, setTimer],
   );
 
   const start = useCallback(
@@ -59,11 +41,13 @@ export const useIdleTimer = (props: Props) => {
     (listener: () => void) => {
       console.info(`[${props.timerName}] Idle timer has been removed`);
 
+      resetTimer();
+
       props.events.forEach((eventName) => {
         window.removeEventListener(eventName, listener);
       });
     },
-    [props.events, props.timerName],
+    [props.events, props.timerName, resetTimer],
   );
 
   return {

src/widgets/Survey/ui/PassingScreen.tsx

@@ -290,11 +290,6 @@ const PassingScreen = (props: Props) => {
   });
 
   const IdleTimer = useIdleTimer({
-    onFinish: () => {
-      if (props.onTimerFinish) {
-        props.onTimerFinish();
-      }
-    },
     events: interactionEvents,
     timerName: 'idleTimer',
   });
@@ -312,16 +307,14 @@ const PassingScreen = (props: Props) => {
       return;
     }
 
-    const listener = IdleTimer.createListener({
-      time: idleTimer,
-    });
+    const listener = IdleTimer.createListener(idleTimer, props.onTimerFinish);
 
     IdleTimer.start(listener);
 
     return () => {
       IdleTimer.stop(listener);
     };
-  }, [IdleTimer, autoCompletionState, context?.event?.timers?.idleTimer]);
+  }, [IdleTimer, autoCompletionState, context.event?.timers?.idleTimer, props.onTimerFinish]);
 
   return (
     <>