How to implement a stepper decision flow in JavaScript?

Question

I'm not actually sure of the best name for what I'm trying to describe. Decision flow, decision matrix, flow chart...

What is the best way to implement a flow that is basically a "Choose Your Own Adventure" stepper, or a flowchart turned into a stepper?

For example, you have a UI with steps, and the next and previous step that will appear depend on data from the previous step. Right now, I have a switch statement to determine which step to appear, and very ugly logic to determine which step should be next or previous.

(I'm using React to render components for each step, but I don't think that matters much with regards to the question).

renderStep = () => {
    switch (currentStep) {
      case 1:
        return <FirstStep/>
      case 2:
        return <SecondStep />
      case 2.5:
        return <SecondStepA />
      case 3:
        return <ThirdStep />
      case 3.25:
        return <ThirdStepA />
      case 3.5:
        return <ThirdStepB />
      case 3.75:
        return <ThirdStepC />
      case 4:
        return <FourthStep />
      default:
        return null
    }
  }

Now clicking "Next" or "Previous" will send the data, and determine for each step which step to go to. If the flow were linear, it would be very easy - update the data, increment or decrement by one. But with the conditional flow, it gets more complicated.

  goToPreviousStep = () => {
    const { currentStep } = this.state

    this.setState(prevState => {
      if (currentStep === 4 && prevState.someDataHappened) {
        return { currentStep: prevState.currentStep - 0.5 }
      } else if (currentStep === 3.5) {
        return { currentStep: prevState.currentStep - 0.5 }
      } else {
        return { currentStep: prevState.currentStep - 1 }
      }
    })
  }

Potentially trying to support additional nesting beyond that would be even more complex. As this grows, I know it's going to become unmaintainable, but I can't find any good resources for storing this data in a table or something to make it more programmatic. Can someone point me in the right direction?

Not sure if I have to write some non-deterministic finite automata or something...

Answer 1

Have you looked at something similar to how a linked list works? Each step is an object and each step has a reference to its previous step as well as potential next steps. Traversal can be done by following these links, and the current step can be stored as the object instead of some kind of number. If you want to number them, you can simply count all the steps and then traverse backwards to the first step to see what step number you're on.

You can put as much data as you need in the Step prototype so that each steps defines everything needed to render it, to take actions based on it, etc. Title, text, associated urls, etc.

function Step() {}

Step.prototype.previous = null;
Step.prototype.next = [];

Step.prototype.addNext = function(nextStep) {
  let step = Object.assign(new Step(), nextStep);
  step.previous = this;
  this.next.push(step);
}

Step.prototype.getNumber = function() {
  var number = 0;
  var step = this;
  
  while(step) {
    step = step.previous;
    number += 1;
  }
  
  return number;
}


let CurrentStep = null;
function createSteps() {

  const step1 = new Step();
  const step2 = new Step();
  const step2_1 = new Step();
  const step2_2 = new Step();
  const step3 = new Step();
  
  CurrentStep = step1;
  
  step1.addNext(step2);
  step1.addNext(step2_1);
  step1.addNext(step2_2);
  
  step2.addNext(step3);
  step2_1.addNext(step3);
  step2_2.addNext(step3);

}

createSteps();

console.log(CurrentStep.getNumber());
console.log(CurrentStep.next[0].getNumber());
console.log(CurrentStep.next[1].getNumber());
console.log(CurrentStep.next[2].getNumber());