122 lines
3.2 KiB
JavaScript
122 lines
3.2 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Input, Spin, Pagination } from "antd";
|
|
import { Link } from 'react-router-dom';
|
|
import axios from "axios";
|
|
import Nodata from "../Nodata";
|
|
import UserList from "../UsersList/user_list";
|
|
const Search = Input.Search;
|
|
class CommonList extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
page: 1,
|
|
limit: 30,
|
|
users: undefined,
|
|
search: undefined,
|
|
total: undefined,
|
|
};
|
|
}
|
|
|
|
componentDidMount = () => {
|
|
this.get_watchers();
|
|
};
|
|
|
|
get_watchers = () => {
|
|
const { login, userType } = this.props;
|
|
const url = `/users/${login}/${userType}.json`;
|
|
const { page, limit, search } = this.state;
|
|
this.setState({
|
|
isSpin: true,
|
|
});
|
|
axios.get(url, {
|
|
params: {
|
|
page,
|
|
limit,
|
|
search,
|
|
},
|
|
}).then((result) => {
|
|
if (result && result.data) {
|
|
this.setState({
|
|
users: result.data.users,
|
|
total: result.data.count,
|
|
isSpin: false
|
|
});
|
|
}
|
|
}).catch((error) => {
|
|
this.setState({
|
|
isSpin: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
//切换页数
|
|
changePage = (page) => {
|
|
this.state.page = page;
|
|
this.get_watchers();
|
|
};
|
|
|
|
changeSearchValue = (e) => {
|
|
this.setState({
|
|
search: e.target.value,
|
|
});
|
|
};
|
|
|
|
successFunc=()=>{
|
|
const { fetchUser } = this.props;
|
|
this.get_watchers();
|
|
fetchUser && fetchUser();
|
|
}
|
|
|
|
render() {
|
|
const { users, isSpin, total, search, limit, page } = this.state;
|
|
const { userType, login, current_user } = this.props;
|
|
const title_type =( current_user && login === current_user.login) ? "我" : "TA"
|
|
|
|
const pagination =
|
|
total && total > limit ? (
|
|
<div className="edu-txt-center pt30 mb30">
|
|
<Pagination
|
|
simple
|
|
defaultCurrent={page}
|
|
total={total}
|
|
pageSize={limit}
|
|
onChange={this.changePage}
|
|
></Pagination>
|
|
</div>
|
|
) : (
|
|
""
|
|
);
|
|
|
|
return (
|
|
<Spin spinning={isSpin}>
|
|
<div className="pd20 minH-670">
|
|
<div className="grid-item pb20 bbt">
|
|
<h3 style={{marginBottom:"0px"}}><Link to={`/users/${login}`} ><i className="iconfont icon-zuojiantou color-grey-9 font-16 mr8"></i></Link>{userType === "watch_users" ? `${title_type}关注的` : `关注${title_type}的`}</h3>
|
|
<div className="text-right">
|
|
<Search
|
|
placeholder="输入名称进行搜索"
|
|
enterButton="搜索"
|
|
size="large"
|
|
onSearch={this.get_watchers}
|
|
className="list-r-Search"
|
|
value={search}
|
|
onChange={this.changeSearchValue}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{users && users.length > 0 ? (
|
|
<div className="w-100 inline-block">
|
|
<UserList users={users} userClass={"w-33"} type_title={'关注列表'} current_user={current_user} successFunc={this.successFunc}></UserList>
|
|
</div>
|
|
) : (
|
|
<Nodata _html={`暂时没有数据～`} />
|
|
)}
|
|
<div className="w-100">{pagination}</div>
|
|
</div>
|
|
</Spin>
|
|
);
|
|
}
|
|
}
|
|
export default CommonList;
|