Skip to content

Instantly share code, notes, and snippets.

@simontegg
Last active November 17, 2020 00:08
Show Gist options
  • Select an option

  • Save simontegg/1a52731619cea0e59a9a39b4eb8137bb to your computer and use it in GitHub Desktop.

Select an option

Save simontegg/1a52731619cea0e59a9a39b4eb8137bb to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
"id": "playlist:1",
"initial": "loading",
"context": {
"playlistId": 1,
"playlist": {
"name": ""
},
"contribution": {
"cursor": {
"total": 0,
"next": null
},
"cards": []
}
},
"invoke": [
{
"id": "loadQueries",
"src": "loadQueries",
"data": {
"loadingCount": 2,
"getCards": {},
"getPlaylist": {}
}
}
],
"on": {
"playlist.LOAD": {
"actions": [
{
"type": "xstate.log",
"expr": "loadPlaylist"
},
"loadPlaylist"
]
},
"contribution.LOAD": {
"actions": "loadCards"
}
},
"states": {
"loading": {
"on": {
"loadQueries.ALL_LOADED": {
"actions": {
"type": "xstate.log",
"expr": "ALL_LOADED"
},
"target": "ready"
}
}
},
"ready": {
"id": "ready",
"type": "compound",
"initial": "init",
"entry": {
"type": "xstate.log",
"expr": "entered ready"
},
"on": {
"OPEN_CONTRIBUTE": "contributeOpen",
"BEGIN_DRAG": "dragging"
},
"states": {
"init": {
"id": "init",
"on": {
"EDIT_NAME": "#editingName"
}
},
"editingName": {
"id": "editingName",
"entry": {
"type": "xstate.log",
"expr": "entered editingName"
},
"on": {
"UPDATE_NAME": [
{
"target": "#updatingName",
"cond": "nameChange"
},
{
"target": "#init"
}
],
"CANCEL_EDIT_NAME": "#init"
}
},
"updatingName": {
"id": "updatingName",
"invoke": {
"id": "updatingNameMutation",
"onDone": "#ready",
"onError": "#error"
}
}
}
},
"contributeOpen": {
"entry": {
"type": "xstate.log",
"expr": "entered contributeOpen"
},
"on": {
"OPEN_ADDER": "adderOpen",
"CLOSE_CONTRIBUTE": "ready"
}
},
"adderOpen": {
"entry": {
"type": "xstate.log",
"expr": "entered adderOpen"
},
"on": {
"CLOSE_ADDER": "ready"
}
},
"dragging": {
"entry": {
"type": "xstate.log",
"expr": "entered dragging"
},
"on": {
"DROP": "#submittingDrop",
"END_DRAG": "#ready"
}
},
"submittingDrop": {
"id": "submittingDrop",
"invoke": {
"id": "submittingDropMutation",
"onDone": "#init",
"onError": "#error"
}
},
"error": {
"id": "error",
"invoke": {
"id": "errorNotify"
},
"onDone": "#init"
}
}
}, {
"services": {
"loadQueries": {
"id": "loadQueries",
"key": "loadQueries",
"context": {
"loadingCount": 2,
"getCards": {
"variables": {}
},
"getPlaylist": {
"variables": {}
}
},
"type": "compound",
"initial": "active",
"history": false,
"states": {
"active": {
"id": "loadQueries.active",
"key": "active",
"type": "atomic",
"history": false,
"states": {},
"on": {},
"transitions": [],
"entry": [],
"exit": [],
"activities": [],
"order": 1,
"invoke": []
},
"error": {
"id": "loadQueries.error",
"key": "error",
"type": "final",
"history": false,
"states": {},
"on": {},
"transitions": [],
"entry": [],
"exit": [],
"activities": [],
"order": 2,
"invoke": []
}
},
"on": {
"RESULT": [
{
"cond": {
"type": "xstate.guard",
"name": "hasErrors"
},
"target": [
"#loadQueries.error"
],
"event": "RESULT",
"actions": [],
"source": "#loadQueries",
"internal": false,
"eventType": "RESULT"
},
{
"cond": {
"type": "xstate.guard",
"name": "finalResult"
},
"actions": [
{
"type": "decrementLoadingCount"
},
{
"type": "load"
},
{
"type": "done"
}
],
"event": "RESULT",
"source": "#loadQueries",
"internal": true,
"eventType": "RESULT"
},
{
"actions": [
{
"type": "decrementLoadingCount"
},
{
"type": "load"
}
],
"event": "RESULT",
"source": "#loadQueries",
"internal": true,
"eventType": "RESULT"
}
]
},
"transitions": [
{
"cond": {
"type": "xstate.guard",
"name": "hasErrors"
},
"target": [
"#loadQueries.error"
],
"event": "RESULT",
"actions": [],
"source": "#loadQueries",
"internal": false,
"eventType": "RESULT"
},
{
"cond": {
"type": "xstate.guard",
"name": "finalResult"
},
"actions": [
{
"type": "decrementLoadingCount"
},
{
"type": "load"
},
{
"type": "done"
}
],
"event": "RESULT",
"source": "#loadQueries",
"internal": true,
"eventType": "RESULT"
},
{
"actions": [
{
"type": "decrementLoadingCount"
},
{
"type": "load"
}
],
"event": "RESULT",
"source": "#loadQueries",
"internal": true,
"eventType": "RESULT"
}
],
"entry": [],
"exit": [],
"activities": [
{
"id": "getCards",
"src": {
"type": "loadQueries:invocation[0]"
},
"type": "xstate.invoke"
},
{
"id": "getPlaylist",
"src": {
"type": "loadQueries:invocation[1]"
},
"type": "xstate.invoke"
}
],
"order": -1,
"invoke": [
{
"id": "getCards",
"src": {
"type": "loadQueries:invocation[0]"
},
"type": "xstate.invoke"
},
{
"id": "getPlaylist",
"src": {
"type": "loadQueries:invocation[1]"
},
"type": "xstate.invoke"
}
]
}
},
"guards": {
"nameChange": (context, event) => context.playlist.name !== event.name
},
"actions": {
"loadPlaylist": {
"type": "xstate.assign"
},
"loadCards": {
"type": "xstate.assign"
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment