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({
    initial: 'hidden',
    context: {
      count: 0,
      user: '',
    },
    states: {
      hidden: {
        on: {
          TURN_ON: {
            target: ['visible.mode.hist', 'visible.brightness.hist'],
            cond: context => context.count < 5        
          },        
        },
      },
      visible: {
        entry: assign({
          count: context => context.count +1
        }),
        on: {
          TURN_OFF:{
            target: 'hidden'
          }
        },
        exit: assign({
          user: context => `@nahumt- ${context.count}`,
        }),
        type: 'parallel',
        states: {
          mode: {
            initial: 'light',
            states: {
              light: {
                on: {
                  SWITCH: {
                    target:'dark',
                  }
                },
                after: {
                  5000: {
                    target: 'dark'
                  }
                }
              },
              dark:{
                on: {
                  SWITCH: {
                    target:'light',
                  }
                },
                after:{
                  5000: {
                    target: 'light'
                  }
                }
              },            
              hist: {
                type: 'history'
              }
            }
          },
          brightness: {
            initial: 'bright',
            states: {
              bright: {
                on: {
                  SWITCH: {
                    target:'dim',
                  }
                },
                after: {
                  5000: {
                    target: 'dim'
    
                  }
                }
              },
              dim: {
                on: {
                  SWITCH: {
                    target:'bright',
                  }
                },
                after: {
                  5000: {
                    target: 'bright'
                  }
                }
              },
              hist: {
                type: 'history'
              }
    
            }
          }
        }
      },
    },
  });