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

machine.js

// State Machine for Charting
const stateMachine = Machine(
  {
    id: 'stateMachine',
    initial: 'idle',
    context: {
      file: undefined,
      svg: undefined,
      error: undefined
    },

    states: {
      idle: {
        on: {
          click: { target: 'idle', actions: 'startFileDialog' },
          change: { target: 'filePicked', cond: 'isFileListNotEmpty', actions: 'saveFileContext' }
        }
      },
      
      filePicked: {
        on: {
          '': [
            { target: 'readFile', cond: 'isSvgFile'},
            { target: 'wrongFileType'}
          ]          
        }
      },

      readFile: {
        exit: 'resetFileChange',
        invoke: {
          id: 'readFile',
          src: 'readFile',
          onDone: [
            { target: 'fileLoaded', cond: 'shouldSaveSvgContext', actions: 'saveSvgContext' },
            { target: 'idle', cond: 'isSvgContextUndefined' },
            { target: 'fileLoaded'},
          ],
          onError: { target: 'loadFailed', actions: 'saveErrorContext' },
        }
      },
      
      wrongFileType: {
        entry: 'showFileTypeAlert',
        exit: 'resetFileChange',
        on: {
          '': [
            { target: 'idle', cond: 'isSvgContextUndefined' },
            { target: 'fileLoaded'},
          ]
        }
      },
      
      fileLoaded: {
        on: {
          click: { target: 'fileLoaded', actions: 'startFileDialog' },
          change: { target: 'filePicked', cond: 'isFileListNotEmpty', actions: 'saveFileContext' }
        }
      },

      loadFailed: {
        on: {
          '': 'idle'
        }
      }   
    }
  }
);