Dreaming_of_finite_state_machines.js

const completable = {
	_: 'pending',
	pending: {
		on: {
			COMPLETE: 'completed'
		}
	},
	completed: {
		on: {
			REASSIGN: 'pending'
		}
	}
};

const deletable = {
	_: 'alive',
	alive: {
		on: {
			DELETE: 'deleted'
		}
	},
	deleted: {
		final: true
	}
};

const editable = {
	_: 'content',
	content: {
		context: '',
		on: {
			EDIT: (action, state) => ({ _: 'content', context: action.payload })
		}
	}
};

const todoItem = {
	_: 'main',
	main: {
		compose: {
			completable,
			deletable,
			editable
		}
	}
};

const filterable = {
	_: 'pending',
	pending: {
		on: {
			FILTER_COMPLETED: 'completed',
			FILTER_ALL: 'all'
		}
	},
	completed: {
		on: {
			FILTER_PENDING: 'pending',
			FILTER_ALL: 'all'
		}
	},
	completed: {
		on: {
			FILTER_PENDING: 'pending',
			FILTER_COMPLETED: 'completed'
		}
	}
};

const iterable = itemMachine => ({
	_: 'list',
	list: {
		context: [],
		on: {
			ADD: (action, state) => ({
				_: 'list',
				context: [...state.context, transition(itemMachine)]
			}),
			REMOVE: (action, state) => ({
				_: 'list',
				context: state.context.filter((_, i) => i !== action.payload)
			}),

			// Pass on all other actions and remove deleted items
			_: (action, state) => {
				return {
					_: 'list',
					context: state.context
						.map(state => transition(itemMachine, state, action))
						.filter(state => !state.deletable || state.deletable !== 'deleted')
				};
			}
		}
	}
});

const todoList = {
	_: 'main',
	main: {
		compose: {
			filterable,
			items: iterable(todoItem)
		}
	}
};

// Avice:
// If in doubt make a sub-machine
// If in doubt make actions as specific as possible (they should usually just be tokens)
// and thus only rarely use context