it('unsubscribes before unmounting', () => {
const spy = createSpy()
const increment$ = createEventHandler()
let count = 0
const Container = compose(
withState('observe', 'updateObserve', false),
spy,
branch(
props => props.observe,
observeProps(() => increment$.do(() => count += 1).map(() => ({}))),
identity
)
)('div')
renderIntoDocument(<Container />)
const { updateObserve } = spy.getProps()
expect(count).to.equal(0)
updateObserve(true) // Mount component
increment$()
expect(count).to.equal(1)
increment$()
expect(count).to.equal(2)
updateObserve(false) // Unmount component
increment$()
expect(count).to.equal(2)
})
observeProps(() => {
const increment$ = createEventHandler()
const count$ = increment$
.startWith(0)
.scan(total => total + 1)
return {
onClick: Observable.just(increment$),
count: count$
}
}, toClass(BaseComponent))
observeProps(props$ => {
const increment$ = createEventHandler()
const count$ = increment$
.startWith(0)
.scan(total => total + 1)
return Observable.combineLatest(props$, count$, (props, count) => ({
...props,
onClick: increment$,
count
}))
}, toClass(BaseComponent))
observeProps(props$ => {
// Observable en functie om die te triggeren
let dragSpotify$ = createEventHandler()
dragSpotify$
// Krijg je spotify data behorend bij een track (async, thus flatMapLatest)
.flatMapLatest(spotifyId =>
fetch('https://api.spotify.com/v1/tracks/' + spotifyId)
.then(response => response.json())
// Krijg de search results bij de spotify data (async, this flatMapLatest)
).flatMapLatest(spotifyData => {
socket.emit('search', `${spotifyData.name} ${spotifyData.artists[0].name}`)
return observableFromSocket(socket, 'search').take(1)
})
// Neem het eerste result
.map(results => first(results))
// Be sure er is een eerste result
.filter(x => x !== undefined)
// Speel elk ding dat het tot hier maakt
.subscribe(song => socket.emit('play', song))
let info$ =
// 'info' events van de socket
observableFromSocket(socket, 'info')
// Elke keer dat er een nieuwe komt, Object.assign' (merge) je deze
// met de vorige, en geef je het resultaat door
.scan((info, newInfo) =>
Object.assign({}, info, newInfo)
, {})
return {
info: info$,
time: (
// Elke keer dat info changed (distinctUntilChanged)
info$.distinctUntilChanged()
// (Behalve de eerste keer (skip)), maak je er de current date van
.skip(1).map(x => Date.now())
// En log je dit (dit is alleen een side-effect)
.do(x => console.log('Changed!!'))
),
// Geef de trigger-functie van spotify drag mee
onSpotifyDrag: Observable.just(dragSpotify$),
}
})
observeProps(props$ => {
// Create search query observable
let setQuery = createEventHandler()
let query$ = setQuery.share()
query$
// Only search for songs that are not only spaces 😂
.filter(x => x.trim() !== '')
// Only every 300 ms
.debounce(300)
// Get the `doSearch` method from props
.withLatestFrom(props$.pluck('doSearch'), (query, doSearch) => doSearch(query))
// Search for the query
.subscribe(func => {
func()
})
return {
// Pass down function to set the query
setQuery: Observable.just(setQuery),
// Pass down the current query value
query: query$.startWith(''),
// Pass down force-search function when pressing enter
doSearch: props$.pluck('doSearch'),
// Function to start playing song when clicked on
playSong: props$.pluck('playSong'),
// Searchresults to display
searchResults:
Observable.merge(
// Results from the search
props$.pluck('results$') // Get results observable
.distinctUntilChanged() // Only when unique
.flatMapLatest(x => x) // Morph into the results$
.startWith([]) // And set off with a empty array
,
query$
// When query is only spaces
.filter(x => x.trim() === '')
// Reset the results to empty array
.map(() => [])
),
}
})