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

118 lines
3.1 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) {
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,
});
};
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.get_watchers}></UserList>
</div>
) : (
<Nodata _html={`暂时没有数据~`} />
)}
<div className="w-100">{pagination}</div>
</div>
</Spin>
);
}
}
export default CommonList;