Fix form skip logic

app/(interview)/interview/_components/ServerSync.tsx

@@ -5,7 +5,7 @@ import { type ReactNode, useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import type { SyncInterviewType } from '~/actions/interviews';
 import usePrevious from '~/hooks/usePrevious';
-import { getActiveSession } from '~/lib/interviewer/selectors/session';
+import { getActiveSession } from '~/lib/interviewer/selectors/shared';
 
 // The job of ServerSync is to listen to actions in the redux store, and to sync
 // data with the server.

lib/interviewer/containers/ProtocolScreen.tsx

@@ -2,9 +2,9 @@
 
 import type { AnyAction } from '@reduxjs/toolkit';
 import {
-    motion,
-    useAnimate,
-    type ValueAnimationTransition,
+  motion,
+  useAnimate,
+  type ValueAnimationTransition,
 } from 'motion/react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -14,9 +14,9 @@ import Navigation from '../components/Navigation';
 import { actionCreators as sessionActions } from '../ducks/modules/session';
 import useReadyForNextStage from '../hooks/useReadyForNextStage';
 import {
-    getCurrentStage,
-    getNavigationInfo,
-    makeGetFakeSessionProgress,
+  getCurrentStage,
+  getNavigationInfo,
+  makeGetFakeSessionProgress,
 } from '../selectors/session';
 import { getNavigableStages } from '../selectors/skip-logic';
 import Stage from './Stage';
@@ -72,6 +72,17 @@ export default function ProtocolScreen() {
   const prevCurrentStep = usePrevious(currentStep);
   const { nextValidStageIndex, previousValidStageIndex, isCurrentStepValid } =
     useSelector(getNavigableStages);
+  const nextValidStageIndexRef = useRef(nextValidStageIndex);
+  const previousValidStageIndexRef = useRef(previousValidStageIndex);
+
+  // update the ref when the value from the selector changes
+  useEffect(() => {
+    nextValidStageIndexRef.current = nextValidStageIndex;
+  }, [nextValidStageIndex]);
+
+  useEffect(() => {
+    previousValidStageIndexRef.current = previousValidStageIndex;
+  }, [previousValidStageIndex]);
 
   const [progress, setProgress] = useState(
     makeFakeSessionProgress(currentStep, promptIndex),
@@ -130,25 +141,27 @@ export default function ProtocolScreen() {
       }
 
       // from this point on we are definitely navigating, so set up the animation
-      setProgress(makeFakeSessionProgress(nextValidStageIndex, 0));
+      setProgress(makeFakeSessionProgress(nextValidStageIndexRef.current, 0));
       await animate(scope.current, { y: '-100vh' }, animationOptions);
       // If the result is true or 'FORCE' we can reset the function here:
       registerBeforeNext(null);
       dispatch(
-        sessionActions.updateStage(nextValidStageIndex) as unknown as AnyAction,
+        sessionActions.updateStage(
+          nextValidStageIndexRef.current,
+        ) as unknown as AnyAction,
       );
     })();
 
     setForceNavigationDisabled(false);
   }, [
+    isLastPrompt,
+    makeFakeSessionProgress,
+    nextValidStageIndexRef,
     animate,
+    scope,
+    registerBeforeNext,
     dispatch,
-    isLastPrompt,
-    nextValidStageIndex,
     promptIndex,
-    registerBeforeNext,
-    scope,
-    makeFakeSessionProgress,
   ]);
 
   const moveBackward = useCallback(async () => {
@@ -169,28 +182,30 @@ export default function ProtocolScreen() {
         return;
       }
 
-      setProgress(makeFakeSessionProgress(previousValidStageIndex, 0));
+      setProgress(
+        makeFakeSessionProgress(previousValidStageIndexRef.current, 0),
+      );
 
       // from this point on we are definitely navigating, so set up the animation
       await animate(scope.current, { y: '100vh' }, animationOptions);
       registerBeforeNext(null);
       dispatch(
         sessionActions.updateStage(
-          previousValidStageIndex,
+          previousValidStageIndexRef.current,
         ) as unknown as AnyAction,
       );
     })();
 
     setForceNavigationDisabled(false);
   }, [
+    isFirstPrompt,
+    makeFakeSessionProgress,
+    previousValidStageIndexRef,
     animate,
+    scope,
+    registerBeforeNext,
     dispatch,
-    isFirstPrompt,
-    previousValidStageIndex,
     promptIndex,
-    registerBeforeNext,
-    scope,
-    makeFakeSessionProgress,
   ]);
 
   const getNavigationHelpers = useCallback(
@@ -220,7 +235,7 @@ export default function ProtocolScreen() {
       // first stage is always valid.
       dispatch(
         sessionActions.updateStage(
-          previousValidStageIndex,
+          previousValidStageIndexRef.current,
         ) as unknown as AnyAction,
       );
     }

lib/interviewer/hooks/useExternalData.js

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { getVariableTypeReplacements } from '../containers/withExternalData';
 import { getAssetManifest, getProtocolCodebook } from '../selectors/protocol';
-import { getActiveSession } from '../selectors/session';
+import { getActiveSession } from '../selectors/shared';
 import getParentKeyByNameValue from '../utils/getParentKeyByNameValue';
 import loadExternalData from '../utils/loadExternalData';
 

lib/interviewer/selectors/network.ts

@@ -16,7 +16,7 @@ import customFilter from '~/lib/network-query/filter';
 import type { RootState } from '../store';
 import { getStageSubject, getSubjectType } from './prop';
 import { getProtocolCodebook } from './protocol';
-import { getActiveSession } from './session';
+import { getActiveSession } from './shared';
 import { createDeepEqualSelector } from './utils';
 
 export const getNetwork = createSelector(

lib/interviewer/selectors/protocol.js

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { get } from 'es-toolkit/compat';
 import { v4 as uuid } from 'uuid';
 import { getStageSubject } from './prop';
+import { getActiveSession } from './shared';
 
 const DefaultFinishStage = {
   // `id` is used as component key; must be unique from user input
@@ -10,9 +11,6 @@ const DefaultFinishStage = {
   label: 'Finish Interview',
 };
 
-const getActiveSession = (state) =>
-  state.activeSessionId && state.sessions[state.activeSessionId];
-
 const getInstalledProtocols = (state) => state.installedProtocols;
 
 const getCurrentSessionProtocol = createSelector(

lib/interviewer/selectors/session.ts

@@ -1,23 +1,7 @@
 import type { Stage } from '@codaco/shared-consts';
-import { getProtocolStages } from './protocol';
 import { createSelector } from '@reduxjs/toolkit';
-import type { RootState } from '../store';
-
-const getActiveSessionId = (state: RootState) => state.activeSessionId;
-
-const getSessions = (state: RootState) => state.sessions;
-
-export const getActiveSession = createSelector(
-  getActiveSessionId,
-  getSessions,
-  (activeSessionId, sessions) => {
-    return sessions[activeSessionId]!;
-  },
-);
-
-export const getStageIndex = createSelector(getActiveSession, (session) => {
-  return session.currentStep;
-});
+import { getProtocolStages } from './protocol';
+import { getActiveSession, getStageIndex } from './shared';
 
 // Stage stage is temporary storage for stages used by TieStrengthCensus and DyadCensus
 export const getStageMetadata = createSelector(

lib/interviewer/selectors/shared.ts

@@ -0,0 +1,18 @@
+import { createSelector } from '@reduxjs/toolkit';
+import type { RootState } from '../store';
+
+const getActiveSessionId = (state: RootState) => state.activeSessionId;
+
+const getSessions = (state: RootState) => state.sessions;
+
+export const getActiveSession = createSelector(
+  getActiveSessionId,
+  getSessions,
+  (activeSessionId, sessions) => {
+    return sessions[activeSessionId]!;
+  },
+);
+
+export const getStageIndex = createSelector(getActiveSession, (session) => {
+  return session.currentStep;
+});

lib/interviewer/selectors/skip-logic.ts

@@ -1,10 +1,10 @@
+import type { NcNetwork, SkipDefinition, Stage } from '@codaco/shared-consts';
+import { createSelector } from '@reduxjs/toolkit';
 import getQuery from '~/lib/network-query/query';
-import { getProtocolStages } from './protocol';
-import { getNetwork } from './network';
 import { SkipLogicAction } from '../protocol-consts';
-import { createSelector } from '@reduxjs/toolkit';
-import type { NcNetwork, SkipDefinition, Stage } from '@codaco/shared-consts';
-import { getStageIndex } from './session';
+import { getNetwork } from './network';
+import { getProtocolStages } from './protocol';
+import { getStageIndex } from './shared';
 
 const formatQueryParameters = (params: Record<string, unknown>) => ({
   rules: [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fresco",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "private": true,
   "type": "module",
   "packageManager": "[email protected]+sha256.9551e803dcb7a1839fdf5416153a844060c7bce013218ce823410532504ac10b",