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

machine.js

  const fetchMachine = Machine({
    id: 'server',
    initial: 'idle',
    context: {
      reason: '',
      message: '',
      token: '',
    },
    states: {
      idle: {
        on: {
          BEGIN: 'offline',
        }
      },
      offline: {
        initial: 'check',
        states: {
          check: {
            invoke: {
              src: 'canRearchServer',
              onDone: [
                { 
                  target: '#online', 
                  //cond: (_, e) => e.data === true 
                }, {
                  target: 'waiting'
                  
                },
              ]
            }
          },
          waiting: {
            after: {
              1000: {
                target: 'check',
              }
            }
          }
        }
      },
      online: {
        id: 'online',
        initial: 'unauthenticated',
        on: {
           OFFLINE_DETECTED: {
             target: 'offline',
             actions: 'clear_user',
           },
        },
        states: {
          unauthenticated: {
            on: {
              // Automatically try auth
              '': {
                target: 'checking_token',
                cond: 'hasToken',
              },
              LOGIN: 'logging_in'
            }
          },
          checking_token: {
            invoke: {
              src: 'doCheckToken',
              onDone: {
                target: 'connected',
                actions: 'set_user_token',
              },
              onError: {
                target: 'unauthenticated',
                actions: 'clear_user_token',
              }
            }
          },
          logging_in: {
            invoke: {
              // event: user, pwd
              src: 'doLogin',
              onDone: {
                target: 'connected',
                action: 'set_user_token',
              },
              onError: {
                target: 'unauthenticated',
                actions: ['clear_user_token', 'set_reason']
              }
            }
          },
          connected: {
            on: {
              LOGOUT: 'logging_out'
            }
          },  
          logging_out: {
            invoke: {
              src: 'doLogout',
              onDone: {
                target: 'unauthenticated',
                actions: ['clear_user_token'],
              }
            }
          }
        }
      },
      
    }
  });