用户列表

app/scripts/actions/userAction.js

@@ -0,0 +1,54 @@
+import Request from 'superagent'
+
+export const RECEIVE_USER = 'RECEIVE_USER'
+export const RECEIVE_USER_NEW = 'RECEIVE_USER_NEW'
+
+function receiveUser(res) {
+    return {
+        type: RECEIVE_USER,
+        res
+    }
+}
+function receiveUserNew(res) {
+    return {
+        type: RECEIVE_USER_NEW,
+        res
+    }
+}
+const status = {
+    filter: '',
+    page:0,
+    overload: false,
+}
+export function fetchUser(filter) {
+    if (filter !== status.filter) {
+        status.filter = filter
+        status.page = 0
+        status.overload = true
+    } else {
+        status.overload = false
+    }
+    let params = {}
+    params.page = status.page
+    if (status.filter !== '') {
+        params.filter = status.filter
+    }
+    return (dispatch) => {
+        return Request
+            .get(`/api/users`)
+            .query(params)
+            .end(function(err,res){
+                status.page++
+                status.overload ? dispatch(receiveUserNew(res.body.users)) : dispatch(receiveUser(res.body.users))
+            })
+    }
+}
+
+export function recommendUser(id) {
+    return (dispatch) => {
+        return Request
+            .post(`/api/recommend/home/${id}?type=user`)
+            .end((err,res) => {
+            })
+    }
+}

app/scripts/components/UserDetail/UserDetail.jsx

@@ -88,7 +88,7 @@ export default class UserDetail extends Component{
               </div>
           )
         }
-        if (this.props.user.id && this.props.posts.length) {
+        if (this.props.user.id ) {
             const user = this.props.user
             const posts = this.props.posts
             return (

app/scripts/components/UserList/UserList.jsx

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import { 
+	Row, Form, FormGroup, FormControl, Button, InputGroup, 
+} from 'react-bootstrap'
+import { Link } from 'react-router'
+import Moment from 'moment'
+
+export default class UserList extends Component{
+	constructor(props) {
+	  	super(props)
+
+	  	this.state = {
+	  		query:''
+	  	}
+	  	this.search = () => this.props.fetchUser(this.state.query)
+	  	this.onChangeQuery = (e) => this.setState({query:e.target.value})
+	  	this.recommend = (id) => this.props.recommendUser(id)
+	  	// this.fetchMoreUsers = () => this.props.fetchUser(this.state.query)
+	}
+	componentWillMount() {
+		this.search()
+	}
+	renderAccounts(accounts) {
+	    return (
+	    	<span>
+		      {accounts.map(function (acc) {
+		        if (acc.providerID === "weibo") {
+		          return (<a href={'http://weibo.com/'+acc.providerKey} style={{color:'#E71D34', marginRight: '5px'}}><i className="fa fa-weibo fa-lg"></i></a>);
+		        } else if (acc.providerID === "mobile") {
+		          return (<i className="fa fa-mobile-phone fa-lg" title={acc.providerKey}  style={{color:'#55acee', marginRight: '5px'}}></i>);
+		        }})
+		      }
+		    </span>
+	    )
+	}
+	render() {
+		return(
+			<div className="content">
+	          <div className="page-header">
+	            <Form inline>
+	              <FormGroup>
+	                <InputGroup>
+	                  <FormControl type="text" placeholder='搜索用户名或手机号' value={this.state.query} onChange={this.onChangeQuery} />
+	                  <InputGroup.Button>
+	                    <Button onClick={this.search}>搜索</Button>
+	                  </InputGroup.Button>
+	                </InputGroup>
+	              </FormGroup>
+	            </Form>
+	          </div>
+	          <div className="table-responsive">
+	            <table className="table table-striped">
+	              <thead><tr><th></th><th>用户名</th><th>照片数</th><th>绑定账号</th><th>最近登陆</th><th></th></tr></thead>
+	              <tbody>
+	                {this.props.users.map((user) => {
+	                  return (
+	                    <tr key={user.id}>
+	                      <td><Link to={'/user/'+user.id}><img style={{width:'45px'}} src={user.avatar} className="img-circle"/></Link></td>
+	                      <td>{user.nickname}</td>
+	                      <td>{user.counts.posts}</td>
+	                      <td>{this.renderAccounts(user.accounts)}</td>
+	                      <td>{Moment.unix(user.lastSeen / 1000).fromNow()}</td>
+	                      <td><Button onClick={() => this.recommend(user.id)}>推荐</Button></td>
+	                    </tr>
+	                  );
+	                })}
+	                <tr></tr>
+	              </tbody>
+	            </table>
+	          </div>
+	          <Row>
+            	<div className="load-more-btn" onClick={this.search}>Load More</div>
+          	  </Row>
+          	</div>
+
+		)
+	}
+}

app/scripts/components/UserList/index.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux'
+import UserList from './UserList'
+
+import {
+	fetchUser, recommendUser
+} from '../../actions/userAction'
+
+const mapActionCreators = {
+	fetchUser,
+	recommendUser
+}
+
+const mapStateToProps = (state) => {
+	const { users } = state.userReducer.toJS()
+	return {
+		users
+	}
+}
+
+export default connect(mapStateToProps, mapActionCreators)(UserList)

app/scripts/reducers/userReducer.js

@@ -0,0 +1,13 @@
+import Immutable from 'immutable'
+import { RECEIVE_USER, RECEIVE_USER_NEW } from '../actions/userAction'
+
+export default (state = Immutable.fromJS({ users: [] }),action)=>{
+    switch (action.type) {
+        case RECEIVE_USER:
+        	return state.updateIn(['users'], (users) => users.concat(Immutable.fromJS(action.res)))
+        case RECEIVE_USER_NEW:
+        	return state.updateIn(['users'], (users) => users.clear().concat(Immutable.fromJS(action.res)))
+        default:
+            return state
+    }
+}

app/scripts/routes.js

@@ -8,14 +8,15 @@ import Home from './components/Home/index'
 import RecommendHome from './components/RecommendHome/index'
 import TagList from './components/TagList/index'
 import ExplorePage from './components/ExplorePage/index'
+import UserList from './components/UserList/index'
 //old
 // import UserDetail from './components/userdetail'
 // import Home from './components/home';
 // import RecommendHome from './components/recommendhome';
 // import ExplorePage from './components/explorepage';
-import UserList from './components/userlist';
-import SkuList from './components/skulist';
 // import TagList from './components/taglist';
+// import UserList from './components/userlist';
+import SkuList from './components/skulist';
 import StickerList from './components/stickerlist';
 import ArticleList from './components/articlelist';
 

app/scripts/store.js

@@ -9,6 +9,7 @@ import statsReducer from './reducers/statsReducer'
 import recommendHomeReducer from './reducers/recommendHomeReducer'
 import tagReducer from './reducers/tagReducer'
 import exploreReducer from './reducers/exploreReducer'
+import userReducer from './reducers/userReducer'
 export const makeRootReducer = (asyncReducers) => {
 	return combineReducers({
 		// Add sync reducers here
@@ -19,6 +20,7 @@ export const makeRootReducer = (asyncReducers) => {
 		recommendHomeReducer,
 		tagReducer,
 		exploreReducer,
+		userReducer,
 		router,
 		...asyncReducers
 	})