new example using transducers

Author: jcouyang

examples/transducer-type-n-search/README.md

@@ -0,0 +1,109 @@
+# Github Repo Type N Search Example
+
+https://oyanglul.us/react-most/examples/type-n-search/public/
+
+## install
+```sh
+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
+
+0. create normal React Component
+
+  ```js
+    const TypeNsearch = (props)=>{
+      let {search} = props.actions
+      return <div>
+        <input onChange={e=>search(e.target.value)}></input>
+        <ul>
+          {props.results&&props.results.map(item=>{
+            return <li key={item.id}><a href={item.html_url}>{item.full_name} ({item.stargazers_count})</a></li>
+      })}
+        </ul>
+      </div>
+    }
+  ```
+
+1. HOC(Higher Order Component)
+  using `connect` to create a HOC over TypeNsearch
+
+  ```js
+  const MostTypeNSearch = connect(DATAFLOW)(TypeNsearch)
+  ```
+2. 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
+  1. filter out stream only with `intent.type` of 'search'
+
+    ```js
+    function(intent$){
+      let updateSink$ = intent$.filter(i=>i.type=='search')
+                           .debounce(500)
+      ...
+    ```
+    using `debounce` will transform the stream to stream which only bouncing at certain time point
+    ```
+    --冷-冷笑--冷笑话-->
+
+    --------冷笑话-->
+    ```
+  2. compose a VALID query URL
+  
+    ```js
+    ...
+    .map(intent=>intent.value)
+    .filter(query=>query.length > 0)
+    .map(query=>GITHUB_SEARCH_API + query)
+    ...
+    ```
+  3. 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-->
+    flatMap(rest)-------respA--respB--->
+    ```
+    4. model
+    now our intent stream become a data stream, let's make it a modle stream.
+    ``` js
+    .filter(i=>i.type=='dataUpdate')
+    .map(data=>JSON.parse(data.value).items)
+    .map(items=>items.slice(0,10))
+    ```
+    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})--->
+    ```
+
+3. return `actions` and `sinks`
+  ```js
+  return {
+    search: value=>({type:'search',value}),
+    updateSink$,
+  }
+  ```
+  return `search` then you can use `props.actions.search` in your Component
+
+  return `updateSink$` then it can be appled to HOC's state, HOC will pass the state to your Component as props

examples/transducer-type-n-search/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "react-most-type-n-search",
+  "version": "0.0.1",
+  "description": "",
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "extensions": [
+            ".es6",
+            ".jsx",
+            ".js"
+          ]
+        }
+      ]
+    ]
+  },
+  "scripts": {
+    "build": "NODE_ENV=production browserify src/app.jsx --extension=.jsx  --extension=.es6| java -jar ../todomvc/bin/compiler.jar > public/app.js",
+    "start": "ecstatic -p 8000 public",
+    "watch": "watchify -d src/app.jsx --extension=.jsx --extension=.es6 -o public/app.js -dv",
+    "test": "jest"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "testFileExtensions": [
+      "es6",
+      "js",
+      "jsx"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "es6",
+      "jsx"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "lodash": "^4.0.0",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "rest": "^1.3.1",
+    "transducers-js": "^0.4.174"
+  },
+  "devDependencies": {
+    "babel": "^6.1.18",
+    "babel-jest": "^6.0.0",
+    "babel-plugin-lodash": "^2.0.1",
+    "babel-plugin-transform-react-jsx": "^6.1.18",
+    "babel-preset-es2015": "^6.1.18",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "ecstatic": "^1.3.1",
+    "jest-cli": "^0.7.0",
+    "uglify-js": "^2.6.1",
+    "watchify": "^3.6.1"
+  },
+  "author": "Jichao Ouyang",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "es2015"
+    ],
+    "plugins": [
+      "transform-react-jsx",
+      "lodash"
+    ]
+  }
+}

examples/transducer-type-n-search/src/app.jsx

@@ -0,0 +1,62 @@
+import {connect} from '../../../lib/react-most'
+import {map, filter, comp, mapcat} from 'transducers-js'
+import Most from '../../../lib/react-most'
+import ReactDOM from 'react-dom'
+import React from 'react'
+import most from 'most'
+import rest from 'rest'
+const GITHUB_SEARCH_API = 'https://api.github.com/search/repositories?q=';
+const TypeNsearch = (props)=>{
+  let {search} = props.actions
+  let error = props.error||{}
+  return <div>
+    <input onChange={e=>search(e.target.value)}></input>
+    <span className={"red " + error.className}>{error.message}</span>
+    <ul>
+      {props.results&&props.results.map(item=>{
+        return <li key={item.id}><a href={item.html_url}>{item.full_name} ({item.stargazers_count})</a></li>
+  })}
+    </ul>
+  </div>
+}
+
+const sendApiRequest = comp(
+  map(i=>i.value),
+  filter(q=>q.length>0),
+  map(q=>GITHUB_SEARCH_API + q),
+  map(url=>rest(url).then(resp=>({
+    type: 'dataUpdate',
+    value: resp.entity
+  })))
+);
+
+const generateStateFromResp = comp(
+  filter(i=>i.type=='dataUpdate'),
+  map(data=>JSON.parse(data.value).items),
+  map(items=>items.slice(0,10)),
+  map(items=>state=>({results: items}))
+)
+
+const log = x=>console.log(x)
+const MostTypeNSearch = connect(function(intent$){
+  let updateSink$ = intent$.filter(i=>i.type=='search')
+                           .debounce(500)
+                           .transduce(sendApiRequest)
+                           .flatMap(most.fromPromise)
+                           .transduce(generateStateFromResp)
+                           .flatMapError(error=>{
+                             console.log('[ERROR]:', error);
+                             return most.of({message:error.error,className:'display'})
+                                        .merge(most.of({className:'hidden'}).delay(3000))
+                                        .map(error=>state=>({error}))
+                           })
+
+  return {
+    search: value=>({type:'search',value}),
+    updateSink$,
+  }
+})(TypeNsearch);
+
+ReactDOM.render(<Most>
+    <MostTypeNSearch/>
+</Most>, document.getElementById('app'));

examples/type-n-search/public/index.html

@@ -4,6 +4,17 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Type N Search</title>
+    <style>
+      .display {
+        display: block;
+      }
+      .hidden {
+        display: none;
+      }
+      .red {
+        color: red;
+      }
+    </style>
 	</head>
 	<body>
     <h1>Github Reactive Repo Search</h1>

examples/type-n-search/src/app.jsx

@@ -7,8 +7,10 @@ import rest from 'rest'
 const GITHUB_SEARCH_API = 'https://api.github.com/search/repositories?q=';
 const TypeNsearch = (props)=>{
   let {search} = props.actions
+  let error = props.error||{}
   return <div>
     <input onChange={e=>search(e.target.value)}></input>
+    <span className={"red " + error.className}>{error.message}</span>
     <ul>
       {props.results&&props.results.map(item=>{
         return <li key={item.id}><a href={item.html_url}>{item.full_name} ({item.stargazers_count})</a></li>
@@ -23,15 +25,21 @@ const MostTypeNSearch = connect(function(intent$){
                            .map(intent=>intent.value)
                            .filter(query=>query.length > 0)
                            .map(query=>GITHUB_SEARCH_API + query)
-                           .flatMap(url=>most.fromPromise(
-                             rest(url).then(resp=>({
+                           .map(url=>rest(url).then(resp=>({
                                type: 'dataUpdate',
                                value: resp.entity
-                             }))))
+                             })))
+                           .flatMap(most.fromPromise)
                            .filter(i=>i.type=='dataUpdate')
                            .map(data=>JSON.parse(data.value).items)
                            .map(items=>items.slice(0,10))
                            .map(items=>state=>({results: items}))
+                           .flatMapError(error=>{
+                             console.log('[ERROR]:', error);
+                             return most.of({message:error.error,className:'display'})
+                                        .merge(most.of({className:'hidden'}).delay(3000))
+                                        .map(error=>state=>({error}))
+                           })
 
   return {
     search: value=>({type:'search',value}),