diff --git a/examples/todo/src/TodoApp.ts b/examples/todo/src/TodoApp.ts index 4ebf9b9..88b2007 100644 --- a/examples/todo/src/TodoApp.ts +++ b/examples/todo/src/TodoApp.ts @@ -25,10 +25,10 @@ type FromView = { // A behavior representing the current value of the localStorage property const todoListStorage = itemBehavior("todoList"); -const getCompletedIds = (outputs: H.Behavior) => +const getCompletedIds = (outputs: H.Behavior, completed: boolean) => H.moment((at) => { return at(outputs) - .filter((o) => at(o.completed)) + .filter((o) => at(o.completed) === completed) .map((o) => o.id); }); @@ -70,7 +70,8 @@ export const app = component( list.length > 0 ? combine(...list.map((o) => o.destroyItemId)) : H.empty ) ); - const completedIds = getCompletedIds(on.itemOutputs); + const completedIds = getCompletedIds(on.itemOutputs, true); + const uncompletedIds = getCompletedIds(on.itemOutputs, false); const savedTodoName: ItemParams[] = yield H.sample(todoListStorage); const restoredTodoName = savedTodoName === null ? [] : savedTodoName; @@ -93,13 +94,6 @@ export const app = component( H.changes(todoNames).map((n) => setItemIO("todoList", n)) ); - const areAllCompleted = H.lift( - (a, b) => a.length === b.length, - completedIds, - on.itemOutputs - ); - const areAnyCompleted = completedIds.map(isEmpty).map((b) => !b); - // Strip the leading `/` from the hash location const currentFilter = locationHashB.map((s) => s.slice(1)); const hidden = todoNames.map(isEmpty); @@ -122,7 +116,7 @@ export const app = component( checkbox({ class: "toggle-all", attrs: { id: "toggle-all" }, - props: { checked: areAllCompleted } + props: { checked: uncompletedIds.map(isEmpty) } }).use({ toggleAll: "checkedChange" }), label({ attrs: { for: "toggle-all" } }, "Mark all as complete"), ul( @@ -142,7 +136,7 @@ export const app = component( ), todoFooter({ itemsLeft, - areAnyCompleted, + noneAreCompleted: completedIds.map(isEmpty), currentFilter, hidden }).use({ clearCompleted: "clearCompleted" }) diff --git a/examples/todo/src/TodoFooter.ts b/examples/todo/src/TodoFooter.ts index 0fd77d9..1fffdc3 100644 --- a/examples/todo/src/TodoFooter.ts +++ b/examples/todo/src/TodoFooter.ts @@ -5,7 +5,7 @@ const { span, button, ul, li, a, footer, strong } = elements; export type Props = { currentFilter: H.Behavior; itemsLeft: H.Behavior; - areAnyCompleted: H.Behavior; + noneAreCompleted: H.Behavior; hidden: H.Behavior; }; @@ -39,7 +39,7 @@ const todoFooter = (props: Props) => filterItem("Completed", "completed", props.currentFilter) ]), button( - { class: ["clear-completed", { hidden: props.areAnyCompleted }] }, + { class: ["clear-completed", { hidden: props.noneAreCompleted }] }, "Clear completed" ).use({ clearCompleted: "click" }) ])