import * as Rx from "rxjs" ; import { map } from "rxjs/operators" ; import { h , mount , ListView , atom , Atom } from "../../rxjs" ; import itemAddedFromSocketE from "./fake-socket" ; let idCounter = 1 ; type TodoItem = { name : string ; id : number ; completed : boolean ; } ; function todoItem ( name , id = idCounter ++ , completed = false ) { return { name , completed , id } ; } const initialItems = [ "learn typescript" , "fix handbrake" ] . map ( s => todoItem ( s ) ) ; const allItems = atom ( initialItems ) ; const addItem = ( name ) => allItems . modify ( items => items . concat ( todoItem ( name ) ) ) ; itemAddedFromSocketE . forEach ( addItem ) ; const App = ( ) => { return ( < div > < h1 > TODO App < /h1> < ItemList items = { allItems } / > < NewItem /> < JsonView json = { allItems } / > < /div>); } ; const ItemList = ( { items } ) => { return ( < ul > < ListView atom = { items } renderAtom = { ( id , item , removeItem ) => { return < li > < ItemView { ... { item , removeItem } } / > < /li>; } } getKey = { item => item . id } / > < /ul>); } ; const ItemView = ( { item , removeItem } ) => { const completed = item . view ( "completed" ) ; return ( < span > < span className = "name" > { item . view ( "name" ) } < /span> < Checkbox checked = { completed } / > < a className = "removeItem" onClick = { removeItem } > remove < /a> < /span>); } ; const NewItem = ( ) => { const name = atom ( "" ) ; const addNew = ( ) => addItem ( name . get ( ) ) ; return ( < div className = "newItem" > < TextInput placeholder = "new item name" value = { name } / > < button onClick = { addNew } > Add new item < /button> < /div>); } ; const TextInput = ( props ) => { return < input { ... { type : "text" , onInput : e => { props . value . set ( e . currentTarget . value ) ; } , ... props , value : props . value } } / > ; } ; const Checkbox = ( props ) => { return < input { ... { type : "checkbox" , onInput : e => { props . checked . set ( e . currentTarget . checked ) ; } , ... props , value : props . value , checked : props . checked } } / > ; } ; const JsonView = ( { json } ) => { return < pre > { json . pipe ( map ( st => JSON . stringify ( st , null , 2 ) ) ) } < /pre>; } ; mount ( < App />, document.getElementById("root")!);