Untitled diff
建立於 差異永不過期
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$) {
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) {
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 {
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);