v0.0.4 apply flux

app/actions/AppActionShoe.js

@@ -0,0 +1,25 @@
+'use strict'
+var shoe = require('shoe')
+var AppDispatcher = require('../dispatcher/AppDispatcher')
+
+shoe('/echo')
+.on('connect', function () {
+    console.log('[connected]')
+})
+.on('data', function (chnk) {
+    var data
+    try {
+        AppActionShoe.add(JSON.parse(chnk))
+    } catch (err) {
+        console.log(err)
+    }
+})
+
+var AppActionShoe = module.exports = {
+    add: function (data) {
+        AppDispatcher.dispatch({
+            actionType: 'ADD'
+          , data: data
+        })
+    }
+}

app/components/box.js

@@ -0,0 +1,33 @@
+'use strict'
+var React = require('react')
+var Item  = require('./item')
+var AppStoreList = require('../stores/AppStoreList')
+var AppActionShoe = require('../actions/AppActionShoe')
+
+function setList () {
+    return {list: AppStoreList.getList().reverse()}
+}
+
+var Box = React.createClass({
+    render: function () {
+        var list = this.state.list
+        return (
+            <ul id="result-list">
+                {list.map(function (data) {
+                    return <Item key={data.id} data={data} />
+                })}
+            </ul>
+        )
+    }
+  , getInitialState: function () {
+        return setList()
+    }
+  , componentDidMount: function () {
+        var me = this
+        AppStoreList.on('change', function () {
+            me.setState(setList())
+        })
+    }
+})
+
+module.exports = Box

app/compo.js → app/components/item.js

@@ -1,17 +1,19 @@
 'use strict'
 var React = require('react')
-
-module.exports = React.createClass({
+var Item  = React.createClass({
     render: function () {
         var tweet = this.props.data
+        var user  = tweet.user
         return (
             <li className="tweet">
-                <div className="tweet-mata">
-                    <img src={tweet.user.profile_image_url} />
-                    <span>{tweet.user.screen_name + '/' + tweet.user.name}</span>
+                <div className="tweet-meta">
+                    <img src={user.profile_image_url} />
+                    <span>{user.screen_name + '/' + user.name}</span>
                 </div>
                 <blockquote>{tweet.text}</blockquote>
             </li>
         )
     }
 })
+
+module.exports = Item

app/dispatcher/AppDispatcher.js

@@ -0,0 +1,3 @@
+'use strict'
+var Dispatcher = require('flux').Dispatcher
+module.exports = new Dispatcher

app/main.js

@@ -1,8 +1,8 @@
 'use strict'
-var React    = require('react')
-var CompoBox = require('./compo-box')
+var React = require('react')
+var Box   = require('./components/box')
 
 React.render(
-    <CompoBox url="/echo" />
+    <Box />
   , document.querySelector('#content')
 )

app/stores/AppStoreList.js

@@ -0,0 +1,25 @@
+'use strict'
+var events        = require('events')
+var AppDispatcher = require('../dispatcher/AppDispatcher')
+
+var list = []
+
+var AppStoreList  = new events.EventEmitter
+AppStoreList.getList = function () {
+    return list
+}
+
+function add (data) {
+    list.push(data)
+}
+
+AppDispatcher.register(function (payload) {
+    var actionType = payload.actionType
+    var data       = payload.data
+    if ('ADD' === actionType) {
+        add(data)
+        AppStoreList.emit('change')
+    }
+})
+
+module.exports = AppStoreList

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-tweets",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React Example",
   "main": "app.js",
   "dependencies": {
     "express": "^4.10.7",
+    "flux": "^2.0.1",
     "hjs": "0.0.6",
     "react": "^0.12.2",
     "shoe": "0.0.15",
@@ -34,7 +35,7 @@
     },
     "twitter": {
       "request": {
-        "track": "React"
+        "track": "react.js,reactjs,react_js"
       }
     }
   }