Generated by XState Viz: https://xstate.js.org/viz

machine.js

const fetchQuizData = () =>
  fetch(
    `https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`,
  ).then(response => response.json())

const normalizeQuizData = (data) =>
  data.reduce(
    (acc, obj) => [
      ...acc,
      {
        category: obj.category,
        question: obj.question,
        correctAnswer: obj.correct_answer === 'True' ? true : false,
        userAnswer: undefined,
        correct: undefined,
      },
    ],
    [],
  )

const fetchAndNormalizeQuizData = () =>
  new Promise(async (resolve, reject) => {
    try {
      const data = await fetchQuizData()
      resolve(normalizeQuizData(data.results))
    } catch (error) {
      reject(error)
    }
  })
  
  
const machine = Machine(
  {
    id: 'Machine',
    initial: 'welcome',
    context: {
      currentQuestion: 0,
      currentQuestionDisplay: 1,
      questions: [],
      totalCorrectAnswers: 0,
    },
    states: {
      welcome: {
        on: {
          START_QUIZ: 'loading',
        },
      },
      loading: {
        invoke: {
          id: 'getQuizData',
          src: 'fetchAndNormalizeQuizData',
          onDone: {
            target: 'quiz',
            actions: assign({
              questions: (_, event) => (event.data)
            }),
          },
          onError: {
            target: 'failure',
          },
        },
      },
      failure: {
        on: {
          RETRY: 'loading',
          START_OVER: 'welcome',
        },
      },
      quiz: {
        on: {
          '': {
            target: 'results',
            actions: [],
            cond: 'allQuestionsAnswered',
          },
          ANSWER_FALSE: {
            actions: 'updateAnswer',
          },
          ANSWER_TRUE: {
            actions: 'updateAnswer',
          },
        },
      },
      results: {
        on: {
          PLAY_AGAIN: 'welcome',
        },
        exit: 'resetGame',
      },
    },
  },
  {
    actions: {
      resetGame: assign({
        currentQuestion: 0,
        currentQuestionDisplay: 1,
        questions: [],
        totalCorrectAnswers: 0,
      }),
      updateAnswer: assign((ctx, event) => ({
        questions: [
          ...ctx.questions.slice(0, ctx.currentQuestion),
          {
            ...ctx.questions[ctx.currentQuestion],
            userAnswer: event.answer,
            correct:
              ctx.questions[ctx.currentQuestion].correctAnswer === event.answer,
          },
          ...ctx.questions.slice(ctx.currentQuestion + 1),
        ],
        totalCorrectAnswers:
          ctx.questions[ctx.currentQuestion].correctAnswer === event.answer
            ? (ctx.totalCorrectAnswers += 1)
            : ctx.totalCorrectAnswers,
        currentQuestion: ctx.currentQuestion += 1,
        currentQuestionDisplay: ctx.currentQuestionDisplay += 1,
      })),
    },
    guards: {
      allQuestionsAnswered: ctx => {
        return (
          ctx.questions.filter(
            question => question.correct !== undefined,
          ).length === ctx.questions.length && true
        )
      },
    },
    services: {
      fetchAndNormalizeQuizData: () => fetchAndNormalizeQuizData()
    }
  },
)