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

machine.js

const appMachine = Machine(
	{
		id: 'appOutlook',
		context: {
			office: null,
			startupPromise: null,
			delegateData: null,
			reservation: null,
			request: null,
			item: null,
			appointment: {
				dirty: false,
				changes: [],
				data: {
					subject: '',
					reservationId: null,
					occurrenceDate: '', // '2020-09-14 00:00 CET',
					requiredAttendees: [],
					optionalAttendees: [],
					startDate: '', // '2020-09-14 00:00 CET',
					duration: 0,
				},
			},
		},
		initial: 'willInitialize',
		states: {
			willInitialize: {
				on: {
					INIT: {
						target: 'loadOfficeApi',
						actions: [
							assign({
								startupPromise: (_context, { startupPromise }) => startupPromise,
							}),
						],
					},
				},
			},
			loadOfficeApi: {
				invoke: {
					src: 'loadOfficeApi',
					onDone: 'initialized',
					onError: 'officeApiLoadError',
				},
			},
			initialized: {
				type: 'parallel',
				states: {
					localization: {
						initial: 'noLocalesLoaded',
						states: {
							noLocalesLoaded: {
								invoke: {
									src: 'loadLocale',
									onDone: 'localesLoaded',
									onError: 'localesLoadError',
								},
							},
							localesLoaded: {},
							localesLoadError: {},
						},
					},
					authStatus: {
						initial: 'unknown',
						states: {
							unknown: {
								invoke: {
									src: 'restoreAuth',
									onDone: {
										target: 'authenticated',
										actions: ['resolveStartup'],
									},
									onError: {
										target: 'unauthenticated',
										actions: ['resolveStartup'],
									},
								},
							},
							authenticated: {
								initial: 'loading',
								on: {
									LOGOUT: {
										target: 'unauthenticated',
										actions: ['handleLogout'],
									},
								},
								states: {
									loading: {
										invoke: {
											src: 'checkDelegateExistingReservationAnyRequest',
											onDone: 'reservation',
											onError: 'error',
										},
									},
									reservation: {
										// might make sense to make this parallel so that we can
										// run a background-sync of the item - i.e. react to
										// changes from the outside
										entry: [
											assign({
												delegateData: (_context, { data: { delegateData } }) => delegateData,
												reservation: (_context, { data: { reservation } }) => reservation,
												request: (_context, { data: { request } }) => request,
												item: (_context, { data: { item } }) => item,
											}),
										],
										initial: 'unknown',
										states: {
											unknown: {
												on: {
													'': [
														{ target: 'message', cond: 'itemTypeIsMessage' },
														{ target: 'appointment' },
													],
												},
											},
											message: {},
											appointment: {
												initial: 'fetching',
												states: {
													fetching: {
														invoke: {
															src: 'fetchAppointment',
															onDone: {
																target: 'data',
																actions: ['setAppointment'],
															},
															onError: 'error',
														},
													},
													data: {
														initial: 'success',
														states: {
															reloading: {
																invoke: {
																	src: 'fetchAppointment',
																	onDone: [
																		{
																			target: 'success',
																			actions: ['setAppointment'],
																			cond: 'updatedAppointmentDataIsDirty',
																		},
																		{
																			target: 'success',
																		},
																	],
																	onError: 'error',
																},
															},
															success: {
																entry: [send('RELOAD', { delay: 15000 })],
																on: {
																	RELOAD: 'reloading',
																},
															},
															error: {},
														},
													},
													error: {
														// what do we do here?
														// retry?
													},
												},
											},
										},
									},
									error: {
										// unclear how to recover here -> do we go back to sign-in?
									},
								},
							},
							unauthenticated: {
								on: {
									LOGIN_SUCCESSFUL: {
										target: 'authenticated',
										actions: ['handleLogin'],
									},
								},
							},
						},
					},
				},
			},
			officeApiLoadError: {
				entry: 'rejectStartup',
				// what do we do here? We haven't loaded any localizations yet
			},
		},
	},
	{
		actions: {
			setAppointment: assign({
				appointment: (_context, { data }) => data,
			}),
			resolveStartup({ startupPromise }) {
				startupPromise.resolve();
			},
			rejectStartup({ startupPromise }) {
				startupPromise.reject();
			},
			handleLogin() {
				// save login data etc.
			},
			handleLogout() {
				// cleanup existing data etc
			},
		},
		services: {
			fetchAppointment: Promise.resolve,
			checkDelegateExistingReservationAnyRequest: Promise.resolve,
			loadOfficeApi: Promise.resolve,
			loadLocale: Promise.reseolve,
		},
		guards: {
			hasChanged: (context) => {
				return false;
			},
			itemTypeIsMessage: ({ item }) => {
				// TODO: make this a constant not a magic string
				return true;
			},
			updatedAppointmentDataIsDirty(_context, { data }) {
				return true
			},
		},
	}
);