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 MODAL = {
	CHAT_CREATOR: 'CHAT_CREATOR',
	CHAT_EDITOR: 'CHAT_EDITOR',
	BING_IMAGE_SELECTOR: 'BING_IMAGE_SELECTOR',
	IMAGE_CROPPER: 'IMAGE_CROPPER',
	MEMBER_LIST: 'MEMBER_LIST',
	NONE: 'NONE',
}

const EVENTS = {
	OPEN_MEMBER_LIST: 'OPEN_MEMBER_LIST',
	OPEN_BING_IMAGE_SELECTOR: 'OPEN_BING_IMAGE_SELECTOR',
	OPEN_IMAGE_CROPPER: 'OPEN_IMAGE_CROPPER',
	OPEN_CHAT_CREATOR: 'OPEN_CHAT_CREATOR',
	OPEN_CHAT_EDITOR: 'OPEN_CHAT_EDITOR',
	CLOSE_CHAT_EDITOR: 'CLOSE_CHAT_EDITOR',
	CLOSE_CHAT_CREATOR: 'CLOSE_CHAT_CREATOR'
}

const initialContext = {
		selectedMemberIds: [],
		selectedImage: '',
		isImageLoading: false,
		isPrivate: false,
		title: '',
	}
  
  const chatFlow = Machine(
		{
			id: 'ChatFlow',
			context: initialContext,
			initial: MODAL.NONE,
			states: {
				[MODAL.NONE]: {
					entry: ['clearContext'],
					on: {
						[EVENTS.OPEN_CHAT_EDITOR]: {
							target: MODAL.CHAT_EDITOR,
						},
						[EVENTS.OPEN_CHAT_CREATOR]: {
							target: MODAL.CHAT_CREATOR,
						},
					},
				},
				[MODAL.CHAT_CREATOR]: {
					on: {
						[EVENTS.OPEN_MEMBER_LIST]: {
							target: MODAL.MEMBER_LIST,
						},
						[EVENTS.OPEN_BING_IMAGE_SELECTOR]: {
							target: MODAL.BING_IMAGE_SELECTOR,
						},
						[EVENTS.OPEN_IMAGE_CROPPER]: {
							target: MODAL.IMAGE_CROPPER,
						},
						[EVENTS.CLOSE_CHAT_CREATOR]: {
							target: MODAL.NONE,
						},
					},
				},
				[MODAL.CHAT_EDITOR]: {
					entry: ['assignContext'],
					on: {
						[EVENTS.OPEN_BING_IMAGE_SELECTOR]: {
							target: MODAL.BING_IMAGE_SELECTOR,
						},
						[EVENTS.OPEN_IMAGE_CROPPER]: {
							target: MODAL.IMAGE_CROPPER,
						},
						[EVENTS.CLOSE_CHAT_EDITOR]: {
							target: MODAL.NONE,
						},
					},
				},
				[MODAL.MEMBER_LIST]: {
					entry: ['assignContext'],
					on: {
						[EVENTS.OPEN_CHAT_CREATOR]: {
							target: MODAL.CHAT_CREATOR,
						},
					},
				},
				[MODAL.IMAGE_CROPPER]: {
					entry: ['assignContext'],
					on: {
						[EVENTS.OPEN_CHAT_CREATOR]: {
							target: MODAL.CHAT_CREATOR,
						},
						[EVENTS.OPEN_CHAT_EDITOR]: {
							target: MODAL.CHAT_EDITOR,
						},
					},
				},
				[MODAL.BING_IMAGE_SELECTOR]: {
					entry: ['assignContext'],
					on: {
						[EVENTS.OPEN_CHAT_CREATOR]: {
							target: MODAL.CHAT_CREATOR,
						},
						[EVENTS.OPEN_CHAT_EDITOR]: {
							target: MODAL.CHAT_EDITOR,
						},
					},
				},
			},
		},
		{
			actions: {
				clearContext: () => {
					assign(initialContext)
				},
				assignContext: assign(
					(
						context,
						{
							selectedImage,
							selectedMemberIds,
							isImageLoading,
							isPrivate,
							title,
						}
					) => ({
						selectedMemberIds: selectedMemberIds || context.selectedMemberIds,
						selectedImage: selectedImage || context.selectedImage,
						isImageLoading: !!isImageLoading,
						isPrivate: !!isPrivate,
						title: title || context.title,
					})
				),
			},
		}
	)