Diff Checker

-const {div, li, img, h, h2, p, a, makeDOMDriver} = CycleDOM;
+const { run } = Cycle;
+const { makeDOMDriver, h } = CycleDOM;
+const { makeHTTPDriver } = CycleHTTPDriver;
+const xs = xstream.default;
-function intent(DOMSource) {
+const getRandomItem = arr => arr[Math.floor(Math.random() * arr.length)];
-  // 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$};
-}
-function createSuggestionStream(refreshClickStream, responseStream, closeClickStream) {
+function intent(DOM, HTTP) {
-  return closeClickStream.startWith('startup click')
+  return {
-    .combineLatest(responseStream,
+    fetchBeers: HTTP.select('fetchBeers').flatten(),
-      function(click, listBeers) {
+    fetchBeer: HTTP.select('fetchBeer').flatten(),
-        return listBeers[Math.floor(Math.random()*listBeers.length)];
+    refresh: DOM.select('.refresh').events('click'),
-      }
+    refreshOne: DOM.select('.close').events('click')
-    )
+      .map(e => {
-    .merge(
+        e.preventDefault();
-      refreshClickStream.map(function(){
+        return e.target.dataset.beerNumber;
-        return null;
       })
-    )
+  };
-    .startWith(null);
-}
-// Update UI elements every time somethign is streamed
-function renderSuggestion(suggestedBeer, selector) {
-  var suggestionEl = document.querySelector(selector);
-  if (suggestedBeer != null) {
-    suggestionEl.style.visibility = 'visible';
-    var usernameEl = suggestionEl.querySelector('.username');
-    usernameEl.textContent = suggestedBeer.name;
-    var imgEl = suggestionEl.querySelector('img');
-    imgEl.src = suggestedBeer.image_url;
-    var descriptionEl = suggestionEl.querySelector('.description');
-    descriptionEl.textContent = suggestedBeer.description;
-  }
 }
-// Subscribe the observers to API results
+function model(actions) {
-function model(refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$) {
+  const allBeers$ = actions.fetchBeers
-  var requestStream = refreshClickStream$.startWith('startup click')
+    .map(res => res.body)
-    .map(function() {
+    .map(beers => [ getRandomItem(beers), getRandomItem(beers), getRandomItem(beers) ])
-        return 'https://api.punkapi.com/v2/beers';
+    .startWith([]);
-    });
+  const singleBeer$ = actions.fetchBeer
+    .map(res => [ getRandomItem(res.body), res.request.beerNumber ])
-  var responseStream = requestStream
+    .startWith([]);
-    .flatMap(function(requestUrl) {
+  return xs.combine(allBeers$, singleBeer$)
-        return Rx.Observable.fromPromise($.getJSON(requestUrl));
+    .map(([ allBeers, [ beer, beerNumber ] ]) => {
+      if (beer) allBeers[beerNumber - 1] = beer;
+      return allBeers;
     });
-  var suggestion1Stream = createSuggestionStream(refreshClickStream$, responseStream, close1ClickStream$);
-  var suggestion2Stream = createSuggestionStream(refreshClickStream$, responseStream, close2ClickStream$);
-  var suggestion3Stream = createSuggestionStream(refreshClickStream$, responseStream, close3ClickStream$);
-  suggestion1Stream.subscribe(function(suggestedBeer) {
-      renderSuggestion(suggestedBeer, '.suggestion1');
-  });
-  suggestion2Stream.subscribe(function(suggestedBeer) {
-      renderSuggestion(suggestedBeer, '.suggestion2');
-  });
-  suggestion3Stream.subscribe(function(suggestedBeer) {
-      renderSuggestion(suggestedBeer, '.suggestion3');
-  });
-  return responseStream.merge(suggestion1Stream)
-                      .merge(suggestion2Stream)
-                      .merge(suggestion3Stream);
 }
-// Render the view
 function view(state$) {
-  return state$.map(state =>
+  return state$.map(([beer1, beer2, beer3]) => h('div', [
-    div([
+    h('div.header', [
-      div('.info', [
+      h('h2', 'Brewdog\'s beer'),
-        p('Developed by Anderson Leite using RxJS and Cycle.js'),
+      h('a.refresh', { attrs: { href: '#' } } , 'refresh')
-        p('See the 3 part blog post')
+    ]),
+    h('div.containerx', [
+      h('div.left.box', [
+        h('li.suggestion1', [
+          renderBeer(beer1, 1)
+        ])
       ]),
-      div('.header', [
+      h('div.middle.box', [
-        h2('Brewdog\'s beer'),
+        h('li.suggestion2', [
-        a('.refresh', {href: '#'}, 'refresh')
+          renderBeer(beer2, 2)
+        ])
       ]),
-      div('.containerx', [
+      h('div.right.box', [
+        h('li.suggestion3', [
-        div('.left .box', [
+          renderBeer(beer3, 3)
-          h('li.suggestion1', [
-            div('.beer', [
-              img()
-            ]),
-            p('.username', 'loading...'),
-            p('.description', 'loading...'),
-            a('.close .close1', {href: '#'}, 'show me other')
-          ])
-        ]),
-        div('.middle .box', [
-          h('li.suggestion2', [
-            div('.beer', [
-              img()
-            ]),
-            p('.username', 'loading...'),
-            p('.description', 'loading...'),
-            a('.close .close2', {href: '#'}, 'show me other')
-          ])
-        ]),
-        div('.right .box', [
-          h('li.suggestion3', [
-            div('.beer', [
-              img()
-            ]),
-            p('.username', 'loading...'),
-            p('.description', 'loading...'),
-            a('.close .close3', {href: '#'}, 'show me other')
-          ])
         ])
       ])
     ])
-  )
+  ]));
+}
+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 {refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$} = intent(sources.DOM);
+  const actions = intent(sources.DOM, sources.HTTP);
-  const state$ = model(refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$);
+  const beersRequest$ = actions.refresh
-  const vtree$ = view(Rx.Observable.of(''));
+    .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: vtree$
+    DOM: view(model(actions)),
+    HTTP: request$
   };
 }
-const drivers = {
+run(main, {
-  DOM: makeDOMDriver('#app')
+  DOM: makeDOMDriver('#app'),
-};
+  HTTP: makeHTTPDriver()
+});
-Cycle.run(main, drivers);

Editor

Original Text

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
  return {refreshClickStream$, close1ClickStream$, close2ClickStream$, close3ClickStream$};
}

// Update UI elements every time somethign is streamed
function renderSuggestion(suggestedBeer, selector) {
  var suggestionEl = document.querySelector(selector);
  if (suggestedBeer != null) {
    suggestionEl.style.visibility = 'visible';
    var usernameEl = suggestionEl.querySelector('.username');
    usernameEl.textContent = suggestedBeer.name;
    var imgEl = suggestionEl.querySelector('img');
    imgEl.src = suggestedBeer.image_url;
    var descriptionEl = suggestionEl.querySelector('.description');
    descriptionEl.textContent = suggestedBeer.description;
  }
}

// Subscribe the observers to API results
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));
    });

var suggestion1Stream = createSuggestionStream(refreshClickStream$, responseStream, close1ClickStream$);
  var suggestion2Stream = createSuggestionStream(refreshClickStream$, responseStream, close2ClickStream$);
  var suggestion3Stream = createSuggestionStream(refreshClickStream$, responseStream, close3ClickStream$);

suggestion1Stream.subscribe(function(suggestedBeer) {
      renderSuggestion(suggestedBeer, '.suggestion1');
  });

suggestion2Stream.subscribe(function(suggestedBeer) {
      renderSuggestion(suggestedBeer, '.suggestion2');
  });

suggestion3Stream.subscribe(function(suggestedBeer) {
      renderSuggestion(suggestedBeer, '.suggestion3');
  });

return responseStream.merge(suggestion1Stream)
                      .merge(suggestion2Stream)
                      .merge(suggestion3Stream);
}

// Render the view
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')
      ]),
      div('.containerx', [

div('.left .box', [
          h('li.suggestion1', [
            div('.beer', [
              img()
            ]),
            p('.username', 'loading...'),
            p('.description', 'loading...'),
            a('.close .close1', {href: '#'}, 'show me other')
          ])
        ]),

div('.middle .box', [
          h('li.suggestion2', [
            div('.beer', [
              img()
            ]),
            p('.username', 'loading...'),
            p('.description', 'loading...'),
            a('.close .close2', {href: '#'}, 'show me other')
          ])
        ]),

div('.right .box', [
          h('li.suggestion3', [
            div('.beer', [
              img()
            ]),
            p('.username', 'loading...'),
            p('.description', 'loading...'),
            a('.close .close3', {href: '#'}, 'show me other')
          ])
        ])

])
    ])
  )
}

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$
  };
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

Cycle.run(main, drivers);

Changed Text

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 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')
  ]);
}

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

Recent DiffsClear

Saved Diffs