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 fetchMachine = Machine({
    id: 'ImpactApp',
    initial: 'initializing',
    context: {
      version: 1,
      view: 'projects',
      projects: new Map([[1, {id: 1}], [2, {id: 2}]]),
      currentProject: {id: 1}
    },
    states: {
      initializing: {
        on: {
          APP_DATA_INITIALIZED: {
            target: 'initialized',
            cond: 'validAppDataLoaded'
          }
        },
      },
      initialized: {
          initial: 'online',
          states: {
            // The dialog bit is for demonstration purposes only; you likely want views to be a state machine in & of itself
            online: {
              initial: 'normal',
              on: {
                NETWORK_OFFLINE: 'offline',
                
              },
              states: {
                  normal: {
                    // This would normally be a parallel state
                    on: {
                      OPEN_PROJECTS_DIALOG: {
                        target: 'projects_dialog_opened',
                        cond: 'validProjectIsSelected'
                      }
                    }
                  },
                  projects_dialog_opened: {
                    on: {
                    CLOSE_PROJECTS_DIALOG: 'normal'  
                    }
                    
                  }
                }
            },
            offline: {
              on: {
                NETWORK_ONLINE: 'online'
              }
            }
          },
          on: {
            RESET_APP: {
              target: 'initializing',
            }
          },
          
      }
    },
   
  }, {
     guards: {
      validAppDataLoaded: context => !!Number.isSafeInteger(context.version),
      
      validProjectIsSelected: context => ( !!context.currentProject && !!context.projects && context.view == 'projects' && context.projects.has(context.currentProject.id) )
    }
  });