lamtranweb

const machineDefinition = Machine({
  id: 'KYC',
  initial: 'pre_init',
  context: {
    phoneNumber: null,
    supportsGetUserMedia: true,
    forcedDesktop: false,
  },
  states: {
    pre_init: {

lamtranweb

Machine({
  id: 'KYC',
  initial: 'intro',
  context: {
  },
  states: {
    intro: {
      on: {
        NEXT: 'document_chooser'
      }

lamtranweb

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

lamtranweb

import * as React from "react";
import { render } from "react-dom";
import RemoteData from "ts-remote-data";
import { Machine, assign, DefaultContext } from "xstate";
import { useMachine } from "@xstate/react";
import { useEffect, useMemo, ReactNode } from "react";

import "./styles.css";

const URL = "https://jsonplaceholder.typicode.com/todos/1";

lamtranweb

import * as React from "react";
import { render } from "react-dom";
import RemoteData from "ts-remote-data";

import "./styles.css";
import { useState, useEffect, ReactNode } from "react";

const URL = "https://jsonplaceholder.typicode.com/todos/1";

interface Todo {

lamtranweb

import * as React from "react";
import { useState, useEffect, ReactNode } from "react";
import { render } from "react-dom";

import "./styles.css";

const URL = "https://jsonplaceholder.typicode.com/todos/1";

interface Todo {
  id: number;

lamtranweb

import * as React from "react";
import { render } from "react-dom";
import { Machine, assign } from "xstate";
import { useMachine } from "@xstate/react";
import { useEffect, useMemo, ReactNode } from "react";

import "./styles.css";

const URL = "https://jsonplaceholder.typicode.com/todos/1";

lamtranweb

import * as React from 'react';
import { ReactNode, useReducer } from 'react';
import { render } from 'react-dom';

import './styles.css';

const URL = 'https://jsonplaceholder.typicode.com/todos/1';

interface Todo {
  id: number;

lamtranweb

import * as React from 'react';
import { render } from 'react-dom';
import { Machine, assign } from 'xstate';
import { useMachine } from '@xstate/react';
import { useEffect, useMemo, ReactNode } from 'react';

import './styles.css';

const URL = 'https://jsonplaceholder.typicode.com/todos/1';

lamtranweb

Quiz
  Slide
    check -> Checked Slide
  Checked Slide
    next -> Slide
    uncheck -> Slide
    done -> Results
  Results
    reset -> Slide