Skip to content

Instantly share code, notes, and snippets.

@rowild
Last active April 8, 2021 19:10
Show Gist options
  • Save rowild/69f8e4668724d9894f0ebaf7bbd4caf0 to your computer and use it in GitHub Desktop.
Save rowild/69f8e4668724d9894f0ebaf7bbd4caf0 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const editorMachine = Machine({
id: 'editor',
initial: 'idle',
context: {
// The item we want to edit
itemToEdit: { title: '', content: '' }
},
states: {
idle: {
enter: {
actions: ['clearInputFields']
},
on: {
NEW: {
target: 'createNewContent'
},
EDIT: {
target: 'editContent',
actions: ['setItemsToEdit']
}
}
},
createNewContent: {
enter: {
actions: ['clearInputFields']
},
on: {
ENTER_TITLE: {
actions: ['assignTitle']
},
ENTER_CONTENT: {
actions: ['assignContent']
},
SAVE: {
target: 'submittingItem'
},
CANCEL: {
target: 'idle'
},
EDIT: {
target: 'editContent',
actions: ['setItemsToEdit']
}
}
},
editContent: {
on: {
ENTER_TITLE: {
actions: ['assignTitle']
},
ENTER_CONTENT: {
actions: ['assignContent']
},
SAVE: {
target: 'updateItem'
},
CANCEL: {
target: 'idle',
actions: ['clearInputFields']
},
EDIT: {
target: 'editContent',
actions: ['setItemsToEdit']
},
NEW: {
target: 'createNewContent',
actions: ['clearInputFields']
}
}
},
submittingItem: {
invoke: {
id: 'submitItem',
src: 'submitItem',
onDone: {
target: 'idle',
actions: ['setSuccessMessage']
},
onError: {
actions: ['setErrorMessages']
}
},
},
updateItem: {
invoke: {
id: 'updateItem',
src: 'updateItem',
onDone: {
target: 'idle',
actions: ['setSuccessMessage']
},
onError: {
actions: ['setErrorMessages']
}
},
}
}
}, {
actions: {
setItemsToEdit: assign((ctx, event) => {
console.log('setItemsToEdit ctx =', ctx)
console.log('setItemsToEdit event =', event)
}),
clearInputFields: assign((ctx, event) => {
console.log('clearInputField ctx =', ctx)
console.log('clearInputField vent =', event)
}),
assignTitle: () => {},
assignContent: () => {},
setErrorMessage: () => {},
setSuccessMessages: () => {},
submitItem: ((ctx, event) => {}),
updateItem: ((ctx, event) => {})
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment