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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)

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 fetchMachine = Machine({
    id: 'Machine',
    initial: 'welcome',
    context: {
      currentQuestion: 0,
      currentQuestionDisplay: 1,
      displayConfetti: false,
      questions: [],
      totalCorrectAnswers: 0,
    },
    states: {
      welcome: {
        on: {
          START_QUIZ: {
            target: 'loading',
            actions: 'routeToQuiz',
          },
        },
      },
      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: ['updateDisplayConfetti', 'routeToResults'],
            cond: 'allQuestionsAnswered',
          },
          ANSWER: {
            actions: 'updateAnswer',
          },
        },
      },
      results: {
        on: {
          PLAY_AGAIN: {
            target: 'welcome',
            actions: 'routeToWelcome',
          },
        },
        exit: 'resetGame',
      },
    },
  },
  {
    actions: {
      routeToQuiz: () => `/quiz`,
      routeToResults: () => `/results`,
      routeToWelcome: () => `/`,
      resetGame: assign({
        currentQuestion: 0,
        currentQuestionDisplay: 1,
        displayConfetti: false,
        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,
      })),
      updateDisplayConfetti: assign({
        displayConfetti: ctx =>
          ctx.totalCorrectAnswers >= ctx.questions.length / 2,
      }),
    },
    guards: {
      allQuestionsAnswered: context => {
        return (
          context.questions.filter(question => question.correct !== undefined)
            .length === context.questions.length && true
        )
      },
    },
  });