forgeplus-react/src/forge/users/common_lists.js

132 lines
3.4 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="minH-670">
<div className="grid-item pb20 bbt">
<h3 style={{marginBottom:"0px"}}>
<Link to={`/${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}
notReset={userType === "watch_users"?false:true}
/>
</div>
) : (
<Nodata _html={`暂时没有数据~`} />
)}
<div className="w-100">{pagination}</div>
</div>
</Spin>
);
}
}
export default CommonList;