getrandomuser.js

import isolate from '@cycle/isolate'
import CycleDOM from '@cycle/dom'
const {div, button, h1, h4, a} = CycleDOM

function main (sources) {
  const click$ = sources.DOM.select('.get-random')
    .events('click')

  const USERS_URL = 'http://jsonplaceholder.typicode.com/users/'

  // This is the HTTP request Observable
  const getRandomUser$ = click$
    .map((e) => {
      console.log('clicked')
    })
    .buffer(() => click$.debounce(250))
    .map(() => {
      const randomNum = Math.round(Math.random()*9)+1
      return {
        url: USERS_URL + String(randomNum),
        method: 'GET'
      }
    })

  const user$ = sources.HTTP
    .filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
    .mergeAll()
    .map(res => res.body)
    .startWith(null)

  const uservdom$ = 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', {href: user.website}, user.website)
      ])
    ])
  )

  return {
    DOM: uservdom$,
    HTTP: getRandomUser$
  }
}

export default sources => isolate(main, 'gru')(sources)

main.js

import Rx from 'rx'
import Cycle from '@cycle/core'
import CycleDOM from '@cycle/dom'
const {div, makeDOMDriver} = CycleDOM

import {makeHTTPDriver} from '@cycle/http'

import GetRandomUser from './getrandomuser.js'

function main(sources) {

  const gru$ = GetRandomUser(sources).DOM

  const vtree$ = Rx.Observable.combineLatest(
    gru$,

    (vd1, ...rest) => {
      return div([vd1, rest])
    }
  )

  return {
    DOM: vtree$,
    HTTP: GetRandomUser(sources).HTTP
  };
}

const drivers = {
  DOM: CycleDOM.makeDOMDriver('#app'),
  HTTP: makeHTTPDriver(),
}

Cycle.run(main, drivers)