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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
		id: "fleet-machine",
		initial: "preload",
		context: {
			selectedRequirement: {},
			selectedVessel: {},
			detailsPanelOpen: false,
			schedule: {},
			isLoading: false,
		},
		states: {
			preload: {
			  id: "preload",
			  
				// * fetch fleet schedule immediately
				initial: "loading",
				context: {
					schedule: {},
					selectedRequirement: {},
				},
				states: {
					loading: {
					  entry: assign({
					    isLoading: true
					  }),
						invoke: {
							id: "fetch-fleet-schedule",
							src: "getFleetSchedule",
							onDone: {
								target: "#ready",
								actions: assign({
									schedule: (context, event) =>
										event.data.schedule,
								}),
							},
							onError: {
								target: "failure",
							},
						},
					},
					
				},
			},
			requirementActive: {
				id: "requirementActive",
				on: {
				  click: "#detailsPanelActive.requirementClicked"
				}
			},
			vesselActive: {
				id: "vesselActive",
				on: {
				  CLICK: "#detailsPanelActive.vesselClicked"
				}
			},
			detailsPanelActive: {
			  id: "detailsPanelActive",
			  entry: assign({
			    detailsPanelOpen: true
			  }),
			  states: {
  				requirementClicked: {
  					id: "requirementClicked",
  				},
  				vesselClicked: {
  					id: "vesselClicked",
  				},
			  },
			  on: {
			    CLOSE: {
			      target: "#ready",
			      actions: assign({
			        detailsPanelOpen: false
			      })
			    }
			  }
			},
		},
	},
	{
		services: {
			getFleetSchedule: (context, event) => {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							schedule: {
								test: true,
							},
						});
					}, 2000);
				});
			},
			// fetch(fleetScheduleUrl).then((response) => response.json()),
		},
	});