react-components-sample.js

const Option = ({ option, onChange }) => {
  return (
    <label for="">
      <option onChange={onChange} /> {option.title}
    </label>
  );
};

const Question = ({ question, onSubmit }) => {
  return (
    <form onSubmit={onSubmit}>
      <Option uuid={uuid} title="asdfasdf" />
      // return the Question HTML here
    </form>
  );
};

const Questionnaire = ({ questions, currentQuestion }) => {
  const question = questions[currentQuestion];

  return (
    <Question
      question={question}
      onSubmit={(answer) => {
        // dispatch QUESTION_ANSWER here
        store.dispatch(questionAnswerAction(question))
      }}
    />
  );
};

redux-actions-and-reducer.js

// Redux
const QUESTION_ANSWER = Symbol("QUESTION_ANSWER");

const questionAnswerAction = ({ questionUuid, answerUuid }) => {
  return {
    type: QUESTION_ANSWER,
    questionUuid,
    answerUuid,
  };
};

const stateReducer = (state, action) => {
  const newState = { ...state };

  switch (action.type) {
    case QUESTION_ANSWER:
      // - [ ] Store the answer on state.answers (it's a Map, so use its API)
      // - [ ] Check if chosen option has additional questions
      //   - [ ] Update currentQuestion (React will render accordingly)
      //   - [ ] If not, it must have a redirection URL - so send the user away
      break;

    default:
      throw new Error("Unknown action type");
  }

  return newState;
};

redux-state-layout.js

// - [ ] Convert Drupal-powered huge JSON data into sane JS objects
//   - [ ] Convert question_option_actions into either questions or redirections
// - [ ] Redux-powered state management
//   - [ ] Create action/action creators to answer questions (based on UUID) and update currentQuestion accordingly
//     - [ ] Create a "QUESTION_ANSWER" or something, that's called when the user answers a question
//   - [ ] Create "Reset Form" or "Go Back" action to start from the beginning

const state = {
  questions: [
    [
      {
        // Question object
        uuid: "abc-cde",
        type: "question",
        title: "I am a:",
        options: [
          {
            // Option oject
            uuid: "efg-hij",
            type: "option",
            value: "Student",
            questions: [
              /* Nested Question objects */
            ],
            url: "/path/to/internal/page?adsf=fdas",
          },
        ],
        answer: "<option uuid goes here>",
      },
    ],
  ],
  currentQuestion: "<uuid>",
  answers: {
    // This object needs to be a Map
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
    "<uuid 1>": "Student",
    "<uuid 2>": 31,
    "<uuid 3>": 31,
  },
};