Fix small bugs in TodoMVC

funkia · Aug 28, 2019 · f221ed0 · f221ed0
1 parent 5038df4
commit f221ed0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git 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<ItemOut[]>) =>
+const getCompletedIds = (outputs: H.Behavior<ItemOut[]>, 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<FromView>(
         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<FromView>(
       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<FromView>(
             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<FromView>(
         ),
         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
@@ -5,7 +5,7 @@ const { span, button, ul, li, a, footer, strong } = elements;
 export type Props = {
   currentFilter: H.Behavior<string>;
   itemsLeft: H.Behavior<number>;
-  areAnyCompleted: H.Behavior<boolean>;
+  noneAreCompleted: H.Behavior<boolean>;
   hidden: H.Behavior<boolean>;
 };
 
@@ -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" })
     ])