Skip to content

Instantly share code, notes, and snippets.

@thiagoadsix

thiagoadsix/machine.js

Created October 15, 2020 12:14
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save thiagoadsix/4d76ec68b6b06ee15ef37e83a8c4d637 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',
type: 'parallel',
states: {
communicate: {
initial: 'idle',
states: {
idle: {
on: {
'view.piece.done': {
target: 'done'
},
'view.piece.error': {
target: 'error'
}
}
},
done: {
invoke: {
id: 'doneId',
src: 'donePromise',
onDone: {
actions: send('done'),
target: 'idle'
}
}
},
error: {
invoke: {
id: 'errorId',
src: 'errorPromise',
onDone: {
actions: send('error'),
target: 'idle'
}
}
}
}
},
form: {
type: 'parallel',
states: {
squire: {
initial: 'queryingSquire',
states: {
queryingSquire: {
invoke: {
id: 'queryingSquireIDFromSquire',
src: () => 'do query to get squires',
onDone: {
target: 'selectingSquires',
actions: send('view.piece.done')
},
},
},
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.form.squire.queryingSquire',
actions: send('view.piece.error')
},
},
},
},
on: {
'action.id': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('squire.chose')
},
},
},
},
},
month: {
initial: 'idle',
states: {
idle: {
on: {
'squire.chose.valid': 'queryingMonth',
},
},
queryingMonth: {
invoke: {
id: 'queryingMonthIDFromMonth',
src: () => 'do something here',
onDone: {
target: 'selectingMonth',
actions: send('view.piece.done')
},
},
on: {
'squire.chose': {
target: 'idle'
}
}
},
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.form.month.queryingMonth',
actions: send('view.piece.error')
},
},
},
},
on: {
'action.id.2': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('month.chose')
},
'squire.chose': {
target: 'idle',
actions: send('view.piece.done')
},
},
},
},
},
day: {
initial: 'idle',
states: {
idle: {
on: {
'month.chose.valid': 'queryingDay',
},
},
queryingDay: {
invoke: {
id: 'queryingDayIDFromDay',
src: () => 'do something',
onDone: {
target: 'selectingDay',
actions: send('view.piece.done')
},
},
on: {
'month.chose': {
target: 'idle'
}
}
},
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.form.day.queryingDay',
actions: send('view.piece.error')
},
},
},
},
on: {
'action.id.3': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('day.chose')
},
'squire.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'month.chose': {
target: 'idle',
actions: send('view.piece.done')
}
},
},
},
},
hour: {
initial: 'idle',
states: {
idle: {
on: {
'day.chose.valid': {
target: 'queryingHour'
}
}
},
queryingHour: {
invoke: {
id: 'queryingHourIDFromHour',
src: () => 'do something here',
onDone: {
target: 'selectingHour',
actions: send('view.piece.done')
},
},
on: {
'day.chose': {
target: 'idle'
}
}
},
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.form.hour.queryingHour',
actions: send('view.piece.error')
}
}
}
},
on: {
'action.id.4': {
target: '.queryingToValidating',
cond: (ctx, evt) => true,
actions: send('hour.chose')
},
'squire.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'month.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'day.chose': {
target: 'idle',
actions: send('view.piece.done')
}
},
},
},
},
button: {
initial: 'idle',
states: {
idle: {
on: {
'hour.chose.valid': {
target: 'sendButtonToFront',
}
}
},
sendButtonToFront: {
invoke: {
id: 'sendButtonToFrontIDFromButton',
scr: () => 'do something here (send button to front)',
onDone: {
target: 'showButton',
actions: send('view.piece.done')
}
}
},
showButton: {
on: {
'view.submit.actionId': {
target: 'queryingToValidating',
actions: send('view.piece.done')
},
'squire.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'month.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'day.chose': {
target: 'idle',
actions: send('view.piece.done')
},
'hour.chose': {
target: 'idle',
actions: send('view.piece.done')
}
}
},
queryingToValidating: {
invoke: {
id: 'queryingToValidatingIDFromButton',
src: () => 'do something here',
onDone: {
target: 'validating'
}
}
},
validating: {
entry: (ctx, e) => {
return console.log(e)
},
on: {
'form.is.valid': {
target: 'sendBooking',
actions: send('view.piece.done')
},
'form.is.not.valid': {
target: '#booking.form',
actions: send('view.piece.error')
},
},
},
sendBooking: {
invoke: {
id: 'sendBookingIDFromButton',
src: () => 'do something here',
onDone: {
actions: send('button.book.done')
}
},
},
}
}
},
},
success: {
initial: 'idle',
states: {
idle: {
on: {
'button.book.done': 'finished',
},
},
finished: {
type: 'final'
}
}
}
},
},
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment