Skip to content

Instantly share code, notes, and snippets.

@thiagoadsix

thiagoadsix/machine.js

Last active October 1, 2020 18:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thiagoadsix/22f3757e1dab7d786f618c66bb931f69 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thiagoadsix/22f3757e1dab7d786f618c66bb931f69 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by XState Viz: https://xstate.js.org/viz
Raw
machine.js
const bookingMachine = Machine(
{
id: 'booking',
initial: 'marriage',
type: 'parallel',
states: {
marriage: {
type: 'parallel',
states: {
squire: {
initial: 'idle',
states: {
idle: {
on: {
'': {
actions: send('querying.to.get.data.squire'),
target: 'selectingSquires',
}
}
},
selectingSquires: {
initial: 'choosingSquire',
states: {
choosingSquire: {},
queryingToValidating: {
invoke: {
id: 'queryingToValidatingIDFromSquire',
src: () => 'do something here',
onDone: 'validating',
},
},
validating: {
entry: (ctx, e) => {
return console.log(e)
},
on: {
'selected.squire.available': {
target: 'choosingSquire',
actions: send('squire.chose.valid')
},
'selected.squire.not.available': {
target: 'notAvailable',
},
},
},
notAvailable: {
invoke: {
id: 'notAvailableIDFromSquire',
src: () => 'do something here',
onDone: {
target: '#booking.marriage.squire.selectingSquires',
actions: send('querying.to.get.data.squire'),
},
},
},
},
on: {
'action.id': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('squire.chose')
},
},
},
},
},
month: {
initial: 'idle',
states: {
idle: {
on: {
'squire.chose.valid': {
target: 'selectingMonth',
actions: send('querying.to.get.data.month')
},
},
},
selectingMonth: {
initial: 'choosingMonth',
states: {
choosingMonth: {},
queryingToValidating: {
invoke: {
id: 'queryingToValidatingIDFromMonth',
src: () => 'do something here',
onDone: 'validating',
},
},
validating: {
entry: (ctx, e) => {
return console.log(e)
},
on: {
'selected.squire.available': {
target: 'choosingMonth',
actions: send('month.chose.valid')
},
'selected.squire.not.available': {
target: 'notAvailable',
},
},
},
notAvailable: {
invoke: {
id: 'notAvailableIDMonth',
src: () => 'do something here',
onDone: {
target: '#booking.marriage.month.selectingMonth',
actions: send('querying.to.get.data.month')
},
},
},
},
on: {
'action.id.2': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('month.chose')
},
'squire.chose': {
actions: send('clear.front.view.piece')
},
},
},
},
},
day: {
initial: 'idle',
states: {
idle: {
on: {
'month.chose.valid': {
target: 'selectingDay',
actions: send('querying.to.get.data.day')
},
},
},
selectingDay: {
initial: 'choosingDay',
states: {
choosingDay: {
},
queryingToValidating: {
invoke: {
id: 'queryingToValidatingIDFromDay',
src: () => 'do something here',
onDone: 'validating',
},
},
validating: {
entry: (ctx, e) => {
return console.log(e)
},
on: {
'selected.squire.available': {
target: 'choosingDay',
actions: send('day.chose.valid')
},
'selected.squire.not.available': {
target: 'notAvailable',
},
},
},
notAvailable: {
invoke: {
id: 'notAvailableIDFromDay',
src: () =>
'do something here',
onDone: {
target: '#booking.marriage.day.selectingDay',
actions: send('querying.to.get.data.day')
},
},
},
},
on: {
'action.id.3': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('day.chose')
},
'squire.chose': {
actions: send('clear.front.view.piece')
},
'month.chose': {
actions: send('clear.front.view.piece')
}
},
},
},
},
hour: {
initial: 'idle',
states: {
idle: {
on: {
'day.chose.valid': {
target: 'selectingHour',
actions: send('querying.to.get.data.hour')
}
}
},
selectingHour: {
initial: 'choosingHour',
states: {
choosingHour: {},
queryingToValidating: {
invoke: {
id: 'queryingToValidatingIDFromHour',
src: () => 'do something here',
onDone: 'validating'
}
},
validating: {
on: {
'selected.hour.available': {
target: 'choosingHour',
actions: send('hour.chose.valid')
},
'selected.hour.is.not.available': {
target: 'notAvailable'
}
}
},
notAvailable: {
invoke: {
id: 'notAvailableFromHour',
src: () => 'do something here',
onDone: {
target: '#booking.marriage.hour.selectingHour',
actions: send('querying.to.get.data.hour')
}
}
}
},
on: {
'action.id.4': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('hour.chose')
},
'squire.chose': {
actions: send('clear.front.view.piece')
},
'month.chose': {
actions: send('clear.front.view.piece')
},
'day.chose': {
actions: send('clear.front.view.piece')
}
},
},
},
},
button: {
initial: 'idle',
states: {
idle: {
on: {
'hour.chose.valid': {
target: 'showButton'
}
}
},
showButton: {
on: {
'click.on.button': {
target: 'sendBooking'
},
'hour.chose': {
target: 'idle'
}
}
},
sendBooking: {
invoke: {
id: 'sendBookingIDFromButton',
src: () => 'do something here'
},
}
}
}
},
},
communications: {
initial: 'idle',
states: {
idle: {
on: {
'clear.front.view.piece': {
target: 'cleanFrontView'
},
'querying.to.get.data.month': {
target: 'queryingMonth'
},
'querying.to.get.data.day': {
target: 'queryingDay'
},
'querying.to.get.data.hour': {
target: 'queryingHour'
},
'querying.to.get.data.squire': {
target: 'queryingSquire'
}
}
},
cleanFrontView: {
invoke: {
id: 'cleanFrontViewIDFromCommunications',
src: () => 'do something here',
onDone: [
{target:'#booking.marriage.month.idle'},
{target: '#booking.marriage.day.idle'},
{target:'#booking.marriage.hour.idle'}
]
}
},
queryingSquire: {
invoke: {
id: 'queryingSquiresIDFromCommunications',
src: () => 'do something here',
onDone: 'idle'
}
},
queryingMonth: {
invoke: {
id: 'queryingMonthIDFromCommunications',
src: () => 'do something here',
onDone: 'idle'
},
},
queryingDay: {
invoke: {
id: 'queryingDayIDFromCommunications',
src: () => 'do something here',
onDone: 'idle'
}
},
queryingHour: {
invoke: {
id: 'queryingHourIDFromCommunications',
src: () => 'do something here',
onDone: 'idle'
}
}
}
}
},
},
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment