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 mobileTimesheetsMachine = Machine({
    id: 'mobileTimesheets',
    initial: 'dayView',
    context: {
      currentDate: new Date(),
      error: null,
    },
    states: {
      dayView: {
        id: 'day',
        initial: 'idle',
        on: {
          VIEW_WEEK: '#week'
        },
        states: {
          idle: {
            on: {
              CLOCK_IN: 'clockIn',
              CLOCK_OUT: 'clockOut',
              BREAK: 'onBreak'
            }
          },
          clockIn: {
            initial: 'clockingIn',
            states: {
              clockingIn: {
                on: {
                  SUCCESS: 'clockedIn',
                  FAILURE: {target: '#day.history', actions: 'setError'}  
                },
              },
              clockedIn: {
                on: {
                  CLOCK_IN: '#day.clockOut',
                  BREAK: '#day.onBreak'
                }
              }
            }
          },
          clockOut: {
            initial: 'clockingOut',
            states: {
              clockingOut: {
                on: {
                  SUCCESS: 'clockedOut',
                  FAILURE: {target: '#day.history', actions: 'setError'}
                }
              },
              clockedOut: {
                on: {
                  CLOCK_IN: '#day.clockIn'
                }
              },
            }
          },
          onBreak: {
            initial: 'breaking',
            states: {
              breaking: {
                on: {
                  SUCCESS: 'breaked',
                  FAILURE: {target: '#day.history', actions: 'setError'}
                }
              },
              breaked: {
                on: {
                  CLOCK_IN: '#day.clockIn',
                  CLOCK_OUT: '#day.clockOut'
                }
              },
            }
          },
          history: {
            type: 'history',
            history: 'shallow'
          }
        }
      },
      weekView: {
        id: 'week',
        on: {
          SELECT_DAY: {target: 'dayView', actions: 'setCurrentDate'},
          PREVIOUS_WEEK: {actions: 'previousWeek'},
          NEXT_WEEK: {actions: 'nextWeek'},
          PRINT: {actions: 'printCurrentTimesheet'},
          PDF: {actions: 'downloadPdf'}
        }
      },
    }
  }, 
  {
    actions: {
      setCurrentDate: assign({
        currentDate: (context, event) => event.currentDate
      }),
      setError: assign({
        error: (context, event) => event.error
      })
    }
  })