catalogue.js

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 {
    fetchBeers: HTTP.select('fetchBeers').flatten(),
    fetchBeer: HTTP.select('fetchBeer').flatten(),
    refresh: DOM.select('.refresh').events('click'),
    refreshOne: DOM.select('.close').events('click')
      .map(e => {
        e.preventDefault();
        return e.target.dataset.beerNumber;
      })
  };
}

function model(actions) {
  const allBeers$ = actions.fetchBeers
    .map(res => res.body)
    .map(beers => [ getRandomItem(beers), getRandomItem(beers), getRandomItem(beers) ])
    .startWith([]);
  const singleBeer$ = actions.fetchBeer
    .map(res => [ getRandomItem(res.body), res.request.beerNumber ])
    .startWith([]);
  return xs.combine(allBeers$, singleBeer$)
    .map(([ allBeers, [ beer, beerNumber ] ]) => {
      if (beer) allBeers[beerNumber - 1] = beer;
      return allBeers;
    });
}

function view(state$) {
  return state$.map(([beer1, beer2, beer3]) => h('div', [
    h('div.header', [
      h('h2', 'Brewdog\'s beer'),
      h('a.refresh', { attrs: { href: '#' } } , 'refresh')
    ]),
    h('div.containerx', [
      h('div.left.box', [
        h('li.suggestion1', [
          renderBeer(beer1, 1)
        ])
      ]),
      h('div.middle.box', [
        h('li.suggestion2', [
          renderBeer(beer2, 2)
        ])
      ]),
      h('div.right.box', [
        h('li.suggestion3', [
          renderBeer(beer3, 3)
        ])
      ])
    ])
  ]));
}

function renderBeer(beer, beerNumber) {
  return h('div', [
    h('div.beer', [
      h('img', { attrs: beer ? { src: beer.image_url } : null })
    ]),
    h('p.username', beer ? beer.name : 'loading...'),
    h('p.description', beer ? beer.description : 'loading...'),
    h('a.close', { attrs: { 'data-beer-number': beerNumber, href: '#' } }, 'show me other')
  ]);
}

function main(sources) {
  const actions = intent(sources.DOM, sources.HTTP);
  const beersRequest$ = actions.refresh
    //.startWith()
    .mapTo({ url: 'https://api.punkapi.com/v2/beers', category: 'fetchBeers' });
  const beerRequest$ = actions.refreshOne
    .map(beerNumber => ({ url: 'https://api.punkapi.com/v2/beers', category: 'fetchBeer', beerNumber }));
  const request$ = xs.merge(beersRequest$, beerRequest$);
  
  return {
    DOM: view(model(actions)),
    HTTP: request$
  };
}

run(main, {
  DOM: makeDOMDriver('#app'),
  HTTP: makeHTTPDriver()
});