diff --git a/examples/todo/src/TodoFooter.ts b/examples/todo/src/TodoFooter.ts index f73a9ef..1864efa 100644 --- a/examples/todo/src/TodoFooter.ts +++ b/examples/todo/src/TodoFooter.ts @@ -1,9 +1,8 @@ import { Behavior, Stream, moment, combine } from "@funkia/hareactive"; -import { Component, elements, modelView, fgo } from "../../../src"; +import { elements, modelView, fgo } from "../../../src"; const { span, button, ul, li, a, footer, strong } = elements; -import { navigate, Router } from "@funkia/rudolph"; +import { navigate, Router, routePath } from "@funkia/rudolph"; -// import {mapTraverseFlat} from "./TodoApp"; import { Output as ItemOut } from "./Item"; export type Params = { @@ -26,12 +25,15 @@ type FromView = { const isEmpty = (list: any[]) => list.length === 0; const formatRemainer = (value: number) => ` item${value === 1 ? "" : "s"} left`; -const filterItem = (name: string) => +const filterItem = (name: string, selectedClass: Behavior) => li( a( { style: { cursor: "pointer" + }, + class: { + selected: selectedClass.map((s) => s === name) } }, name @@ -58,20 +60,30 @@ const model = function*( return { clearCompleted }; }; -const view = ({}, { todosB, areAnyCompleted }: Params) => { +const view = ({ }: Out, { 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", + "*": () => "All" + }, + router + ); + return footer({ class: ["footer", { hidden }] }, [ span({ class: "todo-count" }, [ strong(itemsLeft), itemsLeft.map(formatRemainer) ]), ul({ class: "filters" }, [ - filterItem("All"), - filterItem("Active"), - filterItem("Completed") + filterItem("All", selectedClass), + filterItem("Active", selectedClass), + filterItem("Completed", selectedClass) ]), button( {