preview of Todoovy app's code (using Monio library)

todoovy-preview-1.js

// ..

const nextTodoID = State(state => {
	var todoCounter = (state.todoCounter ?? 0) + 1;
	return {
		value: todoCounter,
		state: {
			...state,
			todoCounter
		}
	};
});

function makeTodoRecord(newTodoText) {
	return todoID => ({
		id: todoID,
		todo: newTodoText,
		complete: false
	});
}

function appendTodoRecord(newTodoRecord) {
	return State(state => ({
		value: newTodoRecord,
		state: {
			...state,
			todos: [ ...state.todos, newTodoRecord ]
		}
	}));
}

function saveNewTodo(newTodoText){
	return IO.do(function*(){
		// update state
		var { value: newTodoEntry } = yield applyState(
			State.do(function*(){
				var todoID = yield nextTodoID;
				var todoRecord = yield makeTodoRecord(newTodoText)(todoID);
				return appendTodoRecord(todoRecord);
			})
		);
		return newTodoEntry;
	});
}

// ..

todoovy-preview-2.js

// ..

function toggleTodoComplete(todoID) {
	return IO.do(function*(){
		// update state
		var { state: newState } = yield applyState(
			State.do(function*(){
				// find Todo record (throws if not found)
				var [ todoRecordIdx, todoRecord ] = (
					yield expectTodoEntry(
						todoID,
						`Todo (${todoID}) state record not found`
					)
				);

				// update Todo record
				var updatedTodoRecord = {
					...todoRecord,

					// toggle complete flag
					complete: !todoRecord.complete
				};

				// update state
				return State.modify(state => ({
					...state,

					// splice in updated Todo record
					todos: [
						...state.todos.slice(0,todoRecordIdx),
						updatedTodoRecord,
						...state.todos.slice(todoRecordIdx + 1)
					]
				}));
			})
		);

		// toggle completed visual marking for Todo element
		var todoElement = yield	expectElement(
			querySelector(`li[data-id='${todoID}']`)(newState.todosEl),
			`Todo (${todoID}) element not found`
		);
		return toggleClass("complete")(todoElement);
	});
}

// ..

ToDoovy.mp4