首页 home

app/scripts/actions/statsAction.js

@@ -0,0 +1,20 @@
+import Request from 'superagent'
+
+export const RECEIVE_STATS = 'RECEIVE_STATS'
+
+function receiveStats(res) {
+    return {
+        type: RECEIVE_STATS,
+        res
+    }
+}
+
+export function fetchStats() {
+    return function(dispatch) {
+        return Request
+            .get(`/api/stats`)
+            .end(function(err,res){
+                dispatch(receiveStats(res.body))
+            })
+    }
+}

app/scripts/components/Home/Home.jsx

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+
+import {
+    Row, Col
+} from 'react-bootstrap'
+
+export default class Home extends Component{
+    componentWillMount() {
+        this.props.fetchStats()
+    }
+    render() {
+        if(this.props.stats.posts){
+            return(
+                <div className="content">
+                    <div className="box">
+                      <div className="box-header"></div>
+                        <div className="box-body text-center">
+                          <p>We will change the world.</p>
+                          <p><em>Innovation distinguishes between a leader and a follower.</em></p>
+                          <small>
+                            — Steve Jobs
+                          </small>
+                        </div>
+                    </div>
+                    <div className="box">
+                      <div className="box-header"></div>
+                      <div className="box-body text-center">
+                        <div className="row">
+                          <div className="col-sm-3 col-xs-6">
+                            <div className="description-block border-right">
+                              <h5 className="description-header">{this.props.stats.posts}</h5>
+                              <span className="description-text">照片数</span>
+                            </div>
+                          </div>
+                          <div className="col-sm-3 col-xs-6">
+                            <div className="description-block border-right">
+                              <h5 className="description-header">{this.props.stats.users}</h5>
+                              <span className="description-text">用户数</span>
+                            </div>
+                          </div>
+                          <div className="col-sm-3 col-xs-6">
+                            <div className="description-block border-right">
+                              <h5 className="description-header">{this.props.stats.toys}</h5>
+                              <span className="description-text">玩具数</span>
+                            </div>
+                          </div>
+                          <div className="col-sm-3 col-xs-6">
+                            <div className="description-block">
+                              <h5 className="description-header">{this.props.stats.tags}</h5>
+                              <span className="description-text">标签数</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+            )
+
+        }else {
+            return(<div/>)
+        }
+    }
+}

app/scripts/components/Home/index.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import Home from './Home'
+
+import { fetchStats } from '../../actions/statsAction'
+const mapActionCreators = {
+    fetchStats
+}
+
+const mapStateToProps = (state) => {
+    const { stats }  = state.statsReducer.toJS()
+    return {
+        stats
+    }
+}
+
+export default connect(mapStateToProps, mapActionCreators)(Home)

app/scripts/reducers/statsReducer.js

@@ -0,0 +1,13 @@
+import Immutable from 'immutable'
+import { RECEIVE_STATS } from '../actions/statsAction'
+
+export default (state = Immutable.Map({ stats: {} }),action)=>{
+    switch (action.type) {
+        case RECEIVE_STATS:
+            return state.mergeDeep({
+                stats: action.res
+            })
+        default:
+            return state
+    }
+}

app/scripts/routes.js

@@ -1,12 +1,13 @@
 import React from 'react'
 //new
 import App from './components/App/App.jsx'
-import PostList from './components/PostList/index.js'
+import PostList from './components/PostList/index'
 
-import UserDetail from './components/UserDetail/index.js'
+import UserDetail from './components/UserDetail/index'
+import Home from './components/Home/index'
 //old
 // import UserDetail from './components/userdetail'
-import Home from './components/home';
+// import Home from './components/home';
 import RecommendHome from './components/recommendhome';
 import ExplorePage from './components/explorepage';
 import UserList from './components/userlist';

app/scripts/store.js

@@ -5,12 +5,14 @@ import thunk from 'redux-thunk'
 import postReducer from './reducers/postReducer'
 import tagClassReducer from './reducers/tagClassReducer'
 import userDetailReducer from './reducers/userDetailReducer'
+import statsReducer from './reducers/statsReducer'
 export const makeRootReducer = (asyncReducers) => {
 	return combineReducers({
 		// Add sync reducers here
 		postReducer,
 		tagClassReducer,
 		userDetailReducer,
+		statsReducer,
 		router,
 		...asyncReducers
 	})