Tweak how navigation works in TodoMVC

funkia · Aug 18, 2019 · 9cd611f · 9cd611f
1 parent 4cac7b9
commit 9cd611f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 47 deletions.
diff --git a/examples/todo/src/Item.ts b/examples/todo/src/Item.ts
@@ -3,7 +3,6 @@ import {
   Behavior,
   changes,
   filter,
-  Future,
   keepWhen,
   performStream,
   sample,
@@ -139,8 +138,8 @@ const itemModel = fgo(function*(
 
   const shouldHide = routePath(
     {
-      active: () => (a: boolean) => a,
-      completed: () => (a: boolean) => !a,
+      "/active": () => (a: boolean) => a,
+      "/completed": () => (a: boolean) => !a,
       "*": () => () => false
     },
     router
@@ -165,7 +164,6 @@ function itemView({
   taskName,
   isComplete,
   isEditing,
-  newName,
   focusInput,
   hidden
 }: ToView) {

diff --git a/examples/todo/src/TodoFooter.ts b/examples/todo/src/TodoFooter.ts
@@ -1,7 +1,7 @@
-import { Behavior, Stream, moment, combine } from "@funkia/hareactive";
-import { elements, modelView, view, fgo } from "../../../src";
+import { Behavior, Stream, moment } from "@funkia/hareactive";
+import { elements, view } from "../../../src";
 const { span, button, ul, li, a, footer, strong } = elements;
-import { navigate, Router, routePath } from "@funkia/rudolph";
+import { Router, routePath } from "@funkia/rudolph";
 
 import { Output as ItemOut } from "./Item";
 
@@ -15,24 +15,19 @@ export type Out = {
   clearCompleted: Stream<any>;
 };
 
-type FromView = {
-  selectAll: Stream<string>;
-  selectActive: Stream<string>;
-  selectCompleted: Stream<string>;
-  clearCompleted: Stream<unknown>;
-};
-
 const isEmpty = (list: any[]) => list.length === 0;
 const formatRemainer = (value: number) => ` item${value === 1 ? "" : "s"} left`;
 
-const filterItem = (name: string, selectedClass: Behavior<string>) =>
+const filterItem = (
+  name: string,
+  path: string,
+  selectedClass: Behavior<string>
+) =>
   view(
     li(
       a(
         {
-          style: {
-            cursor: "pointer"
-          },
+          href: `#/${path}`,
           class: {
             selected: selectedClass.map((s) => s === name)
           }
@@ -42,28 +37,16 @@ const filterItem = (name: string, selectedClass: Behavior<string>) =>
     )
   );
 
-function* todoFooterModel(
-  { selectAll, selectActive, selectCompleted, clearCompleted }: FromView,
-  { router }: { router: Router }
-) {
-  const navs = combine(selectAll, selectActive, selectCompleted);
-  yield navigate(router, navs);
-  return { clearCompleted };
-}
-
-const todoFooterView = (
-  {  }: Out,
-  { router, todosB, areAnyCompleted }: Params
-) => {
+const todoFooter = ({ router, todosB, areAnyCompleted }: Params) => {
   const hidden = todosB.map(isEmpty);
   const itemsLeft = moment(
     (at) => at(todosB).filter((t) => !at(t.completed)).length
   );
 
   const selectedClass = routePath(
     {
-      active: () => "Active",
-      completed: () => "Completed",
+      "/active": () => "Active",
+      "/completed": () => "Completed",
       "*": () => "All"
     },
     router
@@ -75,15 +58,9 @@ const todoFooterView = (
       itemsLeft.map(formatRemainer)
     ]),
     ul({ class: "filters" }, [
-      filterItem("All", selectedClass).output((o) => ({
-        selectAll: o.click.mapTo("all")
-      })),
-      filterItem("Active", selectedClass).output((o) => ({
-        selectActive: o.click.mapTo("active")
-      })),
-      filterItem("Completed", selectedClass).output((o) => ({
-        selectCompleted: o.click.mapTo("completed")
-      }))
+      filterItem("All", "", selectedClass),
+      filterItem("Active", "active", selectedClass),
+      filterItem("Completed", "completed", selectedClass)
     ]),
     button(
       {
@@ -97,9 +74,4 @@ const todoFooterView = (
   ]);
 };
 
-const todoFooter = modelView<Out, FromView, Params>(
-  fgo(todoFooterModel),
-  todoFooterView
-);
-
 export default todoFooter;