Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Github Repo Type N Search Example


npm install
npm run build
npm start

Code Walk Through

it's really simple example(only 40 LOC) that reactively search github repo according to your query

  1. create normal React Component
  const TypeNsearch = (props)=>{
    let {search} = props.actions
    return <div>
      <input onChange={e=>search(}></input>
          return <li key={}><a href={item.html_url}>{item.full_name} ({item.stargazers_count})</a></li>
  1. HOC(Higher Order Component) using connect to create a HOC over TypeNsearch
const MostTypeNSearch = connect(DATAFLOW)(TypeNsearch)
  1. Compose Dataflow you see the place holder DATAFLOW, now we gonna fill in the real data flow how we enable the reactive action of our Component
  2. filter out stream only with intent.type of 'search'
  let updateSink$ = intent$.filter(i=>i.type=='search')
using `debounce` will transform the stream to stream which only bouncing at certain time point

  1. compose a VALID query URL
.filter(query=>query.length > 0)
.map(query=>GITHUB_SEARCH_API + query)
  1. flatMap the Response to our stream js .flatMap(url=>most.fromPromise( rest(url).then(resp=>({ type: 'dataUpdate', value: resp.entity }))))
`flatMap` is simply just `map` and then `flat`

> just pretent one `-` as one sec

intentStream --urlA---urlB--->
rest(urlA)   -------respA---->
rest(urlB)   ---------respB-->
4. model
now our intent stream become a data stream, let's make it a modle stream.
``` js
parse it to JS Object and only get the first ten results
5. create state transforming stream
.map(items=>state=>({results: items}))

modleStream ---mA---mB--->
stateStream ---state=>({results:mA})---state=>({results:mB})--->
  1. return actions and sinks
return {
  search: value=>({type:'search',value}),

return search then you can use in your Component

return updateSink$ then it can be appled to HOC's state, HOC will pass the state to your Component as props