Generated by XState Viz: https://xstate.js.org/viz

machine.js

  
  const fetchMachine = Machine(	{
		id: "connection",
		initial: "disconnected",
		context: {
			wsServerUrl: null,
			socket: null,
			error: null,
			recievedPacket: null,
			sentPacket: null,
		},
		states: {
			disconnected: {
				initial: "idle",
				on: {
					ERROR: {
						actions: ["setError"],
					},
					REMOVE_ERROR: {
						actions: ["removeError"],
					},
				},
				states: {
					idle: {
						on: {
							DOWNLOAD_PACKET: {
								target: "downloading",
							},
							CONNECT: {
								target: "#connection.connecting",
							},
						},
					},
					downloading: {
						invoke: {
							src: "downloadPacket",
							onDone: {
								target: "idle",
								actions: ["setSentPacket", "removeError"],
							},
							onError: {
								target: "idle",
								actions: ["setError"],
							},
						},
					},
				},
			},
			connected: {
				initial: "idle",
				on: {
					ERROR: {
						actions: ["setError"],
					},
					REMOVE_ERROR: {
						actions: ["removeError"],
					},
				},
				states: {
					idle: {
						on: {
							DOWNLOAD_PACKET: {
								target: "downloading",
							},
							SEND_PACKET: [
								{
									cond: {
										type: "packetDownloaded",
									},
									target: "sending",
								},
							],
							RECIEVE_PACKET: {
								target: "recieving",
							},
							DISCONNECT: {
								target: "#connection.disconnected",
								actions: ["disconnect", "removeSocket"],
							},
						},
					},
					downloading: {
						invoke: {
							src: "downloadPacket",
							onDone: {
								target: "idle",
								actions: ["setSentPacket", "removeError"],
							},
							onError: {
								target: "idle",
								actions: ["setError"],
							},
						},
					},
					sending: {
						invoke: {
							src: "sendPacket",
							onDone: {
								target: "idle",
								actions: ["markPacketAsSent", "removeError"],
							},
							onError: {
								target: "idle",
								actions: ["setError"],
							},
						},
					},
					recieving: {
						invoke: {
							src: "parseIncomingPacket",
							onDone: {
								target: "idle",
								actions: ["setRecievedPacket", "removeError"],
							},
							onError: {
								target: "idle",
								actions: ["setError"],
							},
						},
					},
				},
			},

			connecting: {
				invoke: {
					src: "connectToWsServer",
					onDone: {
						target: "connected",
						actions: ["setSocket", "removeError"],
					},
					onError: {
						target: "disconnected",
						actions: ["setError"],
					},
				},
			},
		},
	});