forgeplus-react/src/forge/UsersList/common_users.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { getImageUrl } from "educoder";
import { Spin, Pagination } from "antd";
import "./list.css";
import NoneData from "../Nodata";
import FocusButton from "./focus_button";
class CommonUsers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user_type: this.props.user_type,
      type_title: this.props.type_title,
      project_id: this.props.project_id,
      users: null,
      count: 0,
      limit: 20,
      page: 1,
      isSpin: false,
    };
  }

  componentDidMount = () => {
    this.getUsersList();
  };

  getUsersList = (page, limit) => {
    this.setState({
      isSpin: true,
    });
    const { user_type, project_id } = this.state;

    const url = `/projects/${project_id}/${user_type}.json`;
    axios
      .get(url, {
        params: {
          page,
          limit,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            count: result.data.count,
            users: result.data.users,
            isSpin: false,
          });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true,
    });
    const { limit } = this.state;
    this.getUsersList(page, limit);
  };

  render() {
    const { users, count, page, limit, isSpin, type_title } = this.state;
    const Paginations = (
      <React.Fragment>
        {count > limit ? (
          <div className="mt50 mb30 edu-txt-center">
            <Pagination
              simple
              defaultCurrent={page}
              total={count}
              pageSize={limit}
              onChange={this.ChangePage}
            ></Pagination>
          </div>
        ) : (
          ""
        )}
      </React.Fragment>
    );

    const renderList = () => {
      if (users && users.length > 0) {
        return users.map((item, key) => {
          return (
            <div className="w-25 pull-left" key={key}>
              <div className="pbt25 grid-item mlr10  border-b-line">
                <div>
                  <Link
                    to={`/users/${item.login}/projects`}
                    className="show-user-link"
                  >
                    <img
                      className="avatar-60"
                      src={getImageUrl(`images/${item.image_url}`)}
                      alt=""
                    />
                  </Link>
                </div>
                <div className="ml12">
                  <div>
                    <Link
                      to={`/users/${item.login}/projects`}
                      className="font-16 text-primary hide-1 task-hide max-w-200"
                    >
                      {item.name}
                    </Link>
                  </div>
                  <div className="font-12 text-gray grid-item pb5">
                    <i className="iconfont icon-shijian user-join-time"></i>
                    <span className="ml4">加入时间：{item.format_time}</span>
                  </div>
                  <FocusButton is_watch={item.is_watch} id={item.login} />
                </div>
              </div>
            </div>
          );
        });
      }
    };
    return (
      <div className="background-g pbt15">
        <div className="main background-f">
          <div className="plr-20 user-list-items">
            <div className="font-18 pb-10 border-b-line">{type_title}</div>
            <Spin spinning={isSpin}>
              <div className="w-100 inline-block">
                {count === 0 ? (
                  <NoneData _html="暂时还没有相关数据哦!" />
                ) : (
                  renderList()
                )}
              </div>
            </Spin>
            {Paginations}
          </div>
        </div>
      </div>
    );
  }
}

export default CommonUsers;