Skip to content

Instantly share code, notes, and snippets.

@simontegg
Last active March 8, 2021 20:56
Show Gist options
  • Select an option

  • Save simontegg/8fb6bbb63eba2e996b909f1366419a15 to your computer and use it in GitHub Desktop.

Select an option

Save simontegg/8fb6bbb63eba2e996b909f1366419a15 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const events = {
SAVE: 'SAVE',
SUBMIT: 'SUBMIT',
DISMISS_WARNING: 'DISMISS_WARNING',
NAVIGATE_TO_SECTION: 'NAVIGATE_TO_SECTION',
CLONE: 'CLONE', // no clone?
DELETE: 'DELETE',
WITHDRAW: 'WITHDRAW',
PREVIEW: 'PREVIEW',
CLOSE_PREVIEW: 'CLOSE_PREVIEW',
APPROVE: 'APPROVE',
REJECT: 'REJECT',
CONFIRM: 'CONFIRM',
CANCEL: 'CANCEL',
// events from Uniform
FORM_INVALID: 'FORM_INVALID',
FORM_VALID: 'FORM_VALID'
}
const id = 'application'
const state = {
id,
initial: 'loading',
context: {
workflow: {
status: 'SUBMITTED',
interactor: {
type: 'LEARNER'
}
},
sectionIndex: 0
},
states: {
loading: {
on: {
[`${id}.queries.ALL_LOADED`]: [
{ target: 'ready', cond: 'isLearnerDraft' },
{ target: `#${id}.ready.learnerSubmitted`, cond: 'isLearnerSubmitted' },
{ target: `#${id}.ready.learnerApproved`, cond: 'isLearnerApproved' },
{ target: `#${id}.ready.learnerRejected`, cond: 'isLearnerRejected' },
{ target: `#${id}.ready.approverReviewing`, cond: 'isApproverReviewing' },
{ target: `#${id}.ready.approverApproved`, cond: 'isApproverApproved' },
{ target: `#${id}.ready.approverRejected`, },
]
},
},
ready: {
initial: 'learnerDrafting',
states: {
history: { type: 'history' },
on: {
},
learnerDrafting: {
initial: 'invalid',
states: {
invalid: {
on: {
[events.NAVIGATE_TO_SECTION]: { actions: 'navigateToSection' },
[events.SAVE]: 'savingDraft',
[events.FORM_INVALID]: `invalid`,
[events.FORM_VALID]: `valid`,
}
},
valid: {
on: {
[events.NAVIGATE_TO_SECTION]: { actions: 'navigateToSection' },
[events.SAVE]: 'savingDraft',
[events.SUBMIT]: 'toSubmit',
[events.FORM_INVALID]: `invalid`,
[events.FORM_VALID]: `valid`,
}
},
savingDraft: {
invoke: {
id: 'savingDraftMutation',
src: 'savingDraftMutation',
onDone: [
{ target: 'valid', cond: 'isValid'},
{ target: 'invalid' },
],
onError: { actions: 'errorNotify' }
}
},
toSubmit: {
initial: 'confirmSaving',
states: {
confirmSaving: {
invoke: {
id: 'savingDraftMutation',
src: 'savingDraftMutation',
onDone: [
{ target: 'confirmReady', cond: 'isValid' },
// distinction between a validation error and a network error?
{ target: `#${id}.ready.learnerDrafting.invalid` }
],
onError: { actions: 'errorNotify' }
}
},
confirmReady: {
on: {
[events.CONFIRM]: [
{ target: 'submitting', cond: 'isValid' },
{}
],
[events.CANCEL]: `#${id}.ready.learnerDrafting.valid`
},
},
submitting: {
invoke: {
id: 'submitMutation',
src: 'submitMutation',
onError: { actions: 'errorNotify' }
}
}
},
on: {
// machine receives a newly submitted workflow from cache after submitMutation
'workflow.LOADED': [
{ target: `#${id}.ready.learnerSubmitted`, cond: 'isLearnerSubmitted' }
]
},
},
warn: {
on: {
[events.DISMISS_WARNING]: 'invalid'
}
},
}
},
learnerSubmitted: {
initial: 'ready',
states: {
ready: {
on: {
[events.PREVIEW]: `#${id}.preview`
}
},
}
},
learnerApproved: {},
learnerRejected: {},
approverReviewing: {
states: {
ready: {
on: {
[events.APPROVE]: 'submittingApproval',
[events.REJECT]: 'submittingRejection'
},
},
submittingApproval: {
invoke: {
id: 'submittingApprovalMutation',
src: 'submittingApprovalMutation',
onError: { actions: 'errorNotify' }
},
on: {
// machine receives a newly submitted workflow from cache after submittingApprovalMutation
'workflow.LOADED': [
{ target: `#${id}.ready.approverApproved`, cond: 'isApproverApproved' }
]
},
},
submittingRejection: {
invoke: {
id: 'submittingRejectionMutation',
src: 'submittingRejectionMutation',
onError: { actions: 'errorNotify' }
},
on: {
// machine receives a newly submitted workflow from cache after submittingApprovalMutation
'workflow.LOADED': [
{ target: `#${id}.ready.approverRejected`, cond: 'isApproverRejected' }
]
},
}
}
},
approverApproved: {
on: {
[events.PREVIEW]: `#${id}.preview`
}
},
approverRejected: {
on: {
[events.PREVIEW]: `#${id}.preview`
}
},
}
},
preview: {
on: {
[events.CLOSE_PREVIEW]: `#${id}.ready.history`
}
}
}
}
const m = Machine(state)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment