import { run } from '@cycle/run' ; import { Stream } from 'xstream' ; import { div , button , h1 , h4 , a , makeDOMDriver , DOMSource } from '@cycle/dom' ; import { makeHTTPDriver , Response , HTTPSource } from '@cycle/http' ; type UserData = { id : number ; name : string ; username : string ; email : string ; address : { street : string ; suite : string ; city : string ; zipcode : string ; geo : { lat : string ; lng : string ; } ; } ; phone : string ; website : string ; company : { name : string ; catchPhrase : string ; bs : string ; } ; } ; function main ( sources ) { const getRandomUser$ = sources . DOM . select ( '.get-random' ) . events ( 'click' ) . map ( ( ) => { const randomNum = Math . round ( Math . random ( ) * 9 ) + 1 ; return { url : 'https://jsonplaceholder.typicode.com/users/' + String ( randomNum ) , category : 'users' , method : 'GET' , } ; } ) ; const user$ = sources . HTTP . select ( 'users' ) . flatten ( ) . map ( res => res . body as UserData ) . startWith ( null ) ; const vdom$ = user$ . map ( user => div ( '.users' , [ button ( '.get-random' , 'Get random user' ) , user === null ? null : div ( '.user-details' , [ h1 ( '.user-name' , user . name ) , h4 ( '.user-email' , user . email ) , a ( '.user-website' , { attrs : { href : user . website } } , user . website ) , ] ) , ] ) ) ; return { DOM : vdom$ , HTTP : getRandomUser$ , } ; } run ( main , { DOM : makeDOMDriver ( '#main-container' ) , HTTP : makeHTTPDriver ( ) , } ) ;