andersonleite

const { run } = Cycle;
const { makeDOMDriver, h } = CycleDOM;
const { makeHTTPDriver } = CycleHTTPDriver;
const xs = xstream.default;

const getRandomItem = arr => arr[Math.floor(Math.random() * arr.length)];

function intent(DOM, HTTP) {
  return {

andersonleite

function view(state$) {
  return state$.map(state =>
    div([
      div('.info', [
        p('Developed by Anderson Leite using RxJS and Cycle.js'),
        p('See the 3 part blog post')
      ]),
      div('.header', [
        h2('Brewdog\'s beer'),
        a('.refresh', {href: '#'}, 'refresh')

andersonleite

function model(refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$) {
  var requestStream = refreshClickStream$.startWith('startup click')
    .map(function() {
        return 'https://api.punkapi.com/v2/beers';
    });

  var responseStream = requestStream
    .flatMap(function(requestUrl) {
        return Rx.Observable.fromPromise($.getJSON(requestUrl));
    });

andersonleite

function intent(DOMSource) {
  // Create streams for the intents that will be observed
  const refreshClickStream$ = DOMSource.select('.refresh').events('click');
  const close1ClickStream$ = DOMSource.select('.close1').events('click');
  const close2ClickStream$ = DOMSource.select('.close2').events('click');
  const close3ClickStream$ = DOMSource.select('.close3').events('click');
  
  // Return all the streams ready to be subscribed
  return {refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$};
}

andersonleite

function main(sources) {
  const {refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$} = intent(sources.DOM);
  const state$ = model(refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$);
  const vtree$ = view(Rx.Observable.of(''));

  return {
    DOM: vtree$
  };
}

andersonleite

const {div, input, label, h2, makeDOMDriver} = CycleDOM;

function main(sources) {

  const changeWeight$ = sources.DOM.select('.weight').events('input')
      .map(ev => ev.target.value);
  const changeHeight$ = sources.DOM.select('.height').events('input')
      .map(ev => ev.target.value);

  const state$ = Rx.Observable.combineLatest(

andersonleite

var requestStream = refreshClickStream.startWith('startup click')
    .map(function() {
        return 'https://api.punkapi.com/v2/beers';
    });

var responseStream = requestStream
    .flatMap(function(requestUrl) {
        return Rx.Observable.fromPromise($.getJSON(requestUrl));
    });

andersonleite

function renderSuggestion(suggestedBeer, selector) {
    var suggestionEl = document.querySelector(selector);
    if (suggestedBeer === null) {
        suggestionEl.style.visibility = 'hidden';
    } else {
        suggestionEl.style.visibility = 'visible';
        var usernameEl = suggestionEl.querySelector('.username');
        usernameEl.textContent = suggestedBeer.name;
        var imgEl = suggestionEl.querySelector('img');
        imgEl.src = suggestedBeer.image_url;

andersonleite

var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var closeButton2 = document.querySelector('.close2');
var closeButton3 = document.querySelector('.close3');

var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click');
var close2ClickStream = Rx.Observable.fromEvent(closeButton2, 'click');
var close3ClickStream = Rx.Observable.fromEvent(closeButton3, 'click');

andersonleite

const {div, li, img, h, h2, p, a, makeDOMDriver} = CycleDOM;

function intent(DOMSource) {
  // Create streams for the intents that will be observed
  const refreshClickStream$ = DOMSource.select('.refresh').events('click');
  const close1ClickStream$ = DOMSource.select('.close1').events('click');
  const close2ClickStream$ = DOMSource.select('.close2').events('click');
  const close3ClickStream$ = DOMSource.select('.close3').events('click');
  
  // Return all the streams ready to be subscribed