Merge pull request #73 from complexdatacollective/fix/dyad-tie-strength

fix/dyad census and tie strength census

lib/interviewer/containers/Interfaces/DyadCensus/DyadCensus.js

@@ -89,7 +89,7 @@ const DyadCensus = ({
     if (isIntroduction) {
       // If there are no steps, clicking next should advance the stage
       if (stepsState.totalSteps === 0) {
-        navigationActions.moveForward();
+        navigationActions.moveForward({ forceChangeStage: true });
         return;
       }
 
@@ -132,6 +132,10 @@ const DyadCensus = ({
     }
 
     if (stepsState.isStageStart) {
+      if (stepsState.totalSteps === 0) {
+        navigationActions.moveBackward({ forceChangeStage: true });
+        return;
+      }
       navigationActions.moveBackward();
     }
 
@@ -146,14 +150,16 @@ const DyadCensus = ({
     previousStep,
     stepsState.isStageStart,
     stepsState.isStart,
+    stepsState.totalSteps,
   ]);
 
   const beforeNext = useCallback(
     (direction) => {
       if (direction === 'backwards') {
         back();
+      } else {
+        next();
       }
-      next();
 
       return false;
     },
@@ -206,7 +212,7 @@ const DyadCensus = ({
           >
             <div className="dyad-census__prompt">
               <Prompts
-                currentPrompt={stage.prompts[promptIndex].id}
+                currentPrompt={stage.prompts[promptIndex]?.id}
                 prompts={stage.prompts}
               />
             </div>

lib/interviewer/containers/Interfaces/DyadCensus/useEdgeState.js

@@ -28,7 +28,7 @@ export const matchEntry =
     (p === prompt && b === pair[0] && a === pair[1]);
 
 export const getIsPreviouslyAnsweredNo = (state, prompt, pair) => {
-  if (!state || pair.length !== 2) {
+  if (!Array.isArray(state) || pair.length !== 2) {
     return false;
   }
 
@@ -43,6 +43,9 @@ export const getIsPreviouslyAnsweredNo = (state, prompt, pair) => {
 
 export const stageStateReducer = (state = [], { pair, prompt, value }) => {
   // Remove existing entry, if it exists, and add new one on the end
+  if (!Array.isArray(state) || pair.length !== 2) {
+    return false;
+  }
   const newState = [
     ...state.filter((item) => !matchEntry(prompt, pair)(item)),
     [prompt, ...pair, value],

lib/interviewer/containers/Interfaces/DyadCensus/useSteps.js

@@ -2,44 +2,44 @@ import { useState } from 'react';
 
 /* given a map of steps, where are we given a specific 'total' step number */
 const getSubStep = (steps, nextStep) => {
-  const [r] = steps.reduce(([result, target], step, index) => {
-    if (step > target && result === null) {
-      return [{ step: target, stage: index }];
-    }
-
-    if (step <= target) {
-      return [result, target - step];
-    }
-
-    return [result, target];
-  }, [null, nextStep]);
+  const [r] = steps.reduce(
+    ([result, target], step, index) => {
+      if (step > target && result === null) {
+        return [{ step: target, stage: index }];
+      }
+
+      if (step <= target) {
+        return [result, target - step];
+      }
+
+      return [result, target];
+    },
+    [null, nextStep],
+  );
 
   return r;
 };
 
 // state reducer for steps state
-const stateReducer = ({
-  step,
-  substep,
-  stage,
-  direction,
-}) => (state) => {
-  const progress = step > state.progress ? step : state.progress;
-
-  return ({
-    ...state,
-    step,
-    progress,
-    substep,
-    stage,
-    direction,
-    isCompletedStep: progress > step,
-    isStageStart: substep === 0,
-    isStageEnd: substep >= state.steps[stage] - 1,
-    isStart: step === 0,
-    isEnd: step >= state.totalSteps - 1,
-  });
-};
+const stateReducer =
+  ({ step, substep, stage, direction }) =>
+  (state) => {
+    const progress = step > state.progress ? step : state.progress;
+
+    return {
+      ...state,
+      step,
+      progress,
+      substep,
+      stage,
+      direction,
+      isCompletedStep: progress > step,
+      isStageStart: substep === 0,
+      isStageEnd: substep >= state.steps[stage] - 1,
+      isStart: step === 0,
+      isEnd: step >= state.totalSteps - 1,
+    };
+  };
 
 /**
  * Models 'substeps' in prompts, which allows us to keep track
@@ -48,9 +48,7 @@ const stateReducer = ({
  *
  * @param {array} steps - map of steps per prompt, e.g. [3, 2, 1]
  */
-const useSteps = (
-  steps = [],
-) => {
+const useSteps = (steps = []) => {
   const totalSteps = steps.reduce((count, step) => count + step, 0);
 
   const initialValues = {
@@ -77,12 +75,14 @@ const useSteps = (
 
     const substep = getSubStep(steps, nextStep);
 
-    setState(stateReducer({
-      step: nextStep,
-      substep: substep.step,
-      stage: substep.stage,
-      direction: 'forward',
-    }));
+    setState(
+      stateReducer({
+        step: nextStep,
+        substep: substep.step,
+        stage: substep.stage,
+        direction: 'forward',
+      }),
+    );
   };
 
   const previous = () => {
@@ -94,12 +94,14 @@ const useSteps = (
 
     const substep = getSubStep(steps, nextStep);
 
-    setState(stateReducer({
-      step: nextStep,
-      substep: substep.step,
-      stage: substep.stage,
-      direction: 'backward',
-    }));
+    setState(
+      stateReducer({
+        step: nextStep,
+        substep: substep.step,
+        stage: substep.stage,
+        direction: 'backward',
+      }),
+    );
   };
 
   return [state, next, previous];

lib/interviewer/containers/Interfaces/TieStrengthCensus/TieStrengthCensus.js

@@ -79,7 +79,7 @@ const TieStrengthCensus = (props) => {
   const pair = get(pairs, stepsState.substep, null);
   const [fromNode, toNode] = getNodePair(nodes, pair);
 
-  const navigateActions = useNavigationHelpers();
+  const navigationActions = useNavigationHelpers();
 
   // hasEdge:
   //  - false: user denied
@@ -104,7 +104,7 @@ const TieStrengthCensus = (props) => {
     if (isIntroduction) {
       // If there are no steps, clicking next should advance the stage
       if (stepsState.totalSteps === 0) {
-        navigateActions.moveForward();
+        navigationActions.moveForward({ forceChangeStage: true });
         return;
       }
 
@@ -121,7 +121,7 @@ const TieStrengthCensus = (props) => {
     }
 
     if (stepsState.isStageEnd) {
-      navigateActions.moveForward();
+      navigationActions.moveForward();
     }
 
     if (stepsState.isEnd) {
@@ -133,7 +133,7 @@ const TieStrengthCensus = (props) => {
     edgeVariableValue,
     hasEdge,
     isIntroduction,
-    navigateActions,
+    navigationActions,
     nextStep,
     stepsState.isEnd,
     stepsState.isStageEnd,
@@ -150,7 +150,11 @@ const TieStrengthCensus = (props) => {
     }
 
     if (stepsState.isStageStart) {
-      navigateActions.moveBackward();
+      if (stepsState.totalSteps === 0) {
+        navigationActions.moveBackward({ forceChangeStage: true });
+        return;
+      }
+      navigationActions.moveBackward();
     }
 
     if (stepsState.isStart) {
@@ -160,18 +164,20 @@ const TieStrengthCensus = (props) => {
     previousStep();
   }, [
     isIntroduction,
-    navigateActions,
+    navigationActions,
     previousStep,
     stepsState.isStageStart,
     stepsState.isStart,
+    stepsState.totalSteps,
   ]);
 
   const beforeNext = useCallback(
     (direction) => {
       if (direction === 'backwards') {
         back();
+      } else {
+        next();
       }
-      next();
 
       return false;
     },
@@ -224,7 +230,7 @@ const TieStrengthCensus = (props) => {
           >
             <div className="tie-strength-census__prompt">
               <Prompts
-                currentPrompt={stage.prompts[promptIndex].id}
+                currentPrompt={stage.prompts[promptIndex]?.id}
                 prompts={stage.prompts}
               />
             </div>
@@ -259,8 +265,9 @@ const TieStrengthCensus = (props) => {
                       // Set the max width of the container based on the number of options
                       // This prevents them getting too wide, but also ensures that they
                       // expand to take up all available space.
-                      maxWidth: `${(edgeVariableOptions.length + 1) * 20 + 3.6
-                        }rem`,
+                      maxWidth: `${
+                        (edgeVariableOptions.length + 1) * 20 + 3.6
+                      }rem`,
                     }}
                   >
                     <div className="tie-strength-census__options">

lib/interviewer/containers/Interfaces/TieStrengthCensus/useEdgeState.js

@@ -35,7 +35,7 @@ export const matchEntry =
     (p === prompt && b === pair[0] && a === pair[1]);
 
 export const getIsPreviouslyAnsweredNo = (state, prompt, pair) => {
-  if (!state || pair.length !== 2) {
+  if (!Array.isArray(state) || pair.length !== 2) {
     return false;
   }
 
@@ -50,6 +50,9 @@ export const getIsPreviouslyAnsweredNo = (state, prompt, pair) => {
 
 export const stageStateReducer = (state = [], { pair, prompt, value }) => {
   // Remove existing entry, if it exists, and add new one on the end
+  if (!Array.isArray(state) || pair.length !== 2) {
+    return false;
+  }
   const newState = [
     ...state.filter((item) => !matchEntry(prompt, pair)(item)),
     [prompt, ...pair, value],

lib/interviewer/hooks/useNavigationHelpers.ts

@@ -10,6 +10,10 @@ import { parseAsInteger, useQueryState } from 'nuqs';
 
 export type directions = 'forwards' | 'backwards';
 
+type NavigationOptions = {
+  forceChangeStage?: boolean;
+};
+
 export const useNavigationHelpers = () => {
   const dispatch = useDispatch();
   const skipMap = useSelector(getSkipMap);
@@ -94,12 +98,13 @@ export const useNavigationHelpers = () => {
     [beforeNextFunction],
   );
 
-  const moveForward = async () => {
+  const moveForward = async (options?: NavigationOptions) => {
     if (!(await checkCanNavigate('forwards'))) {
       return;
     }
 
-    if (isLastPrompt) {
+    // forceChangeStage used in Dyad Census and Tie Strength Census when there are no steps
+    if (isLastPrompt || options?.forceChangeStage) {
       const nextStage = calculateNextStage();
       void setCurrentStage(nextStage);
       return;
@@ -110,12 +115,13 @@ export const useNavigationHelpers = () => {
     );
   };
 
-  const moveBackward = async () => {
+  const moveBackward = async (options?: NavigationOptions) => {
     if (!(await checkCanNavigate('backwards'))) {
       return;
     }
 
-    if (isFirstPrompt) {
+    // forceChangeStage used in Dyad Census and Tie Strength Census when there are no steps
+    if (isFirstPrompt || options?.forceChangeStage) {
       const previousStage = calculatePreviousStage();
       void setCurrentStage(previousStage);
       return;