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

import React, { Component } from "react";
// import { SnackbarHOC } from 'educoder';
import { Link } from "react-router-dom";
import { Menu, Input, Spin, Pagination, Popover, Button } from "antd";

import axios from "axios";
import ListItem from "../Main/IndexItem";
import Nodata from "../Nodata";
import img_new from "../Images/new.png";
import img_array from "../Images/array.png";
const Search = Input.Search;
class InfosUser extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      limit: 15,
      sort_by: undefined,
      totalCount: undefined,
      isSpin: false,
      projectsList: undefined,
      total: undefined,
      category: undefined,
    };
  }

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

  componentDidUpdate = (prevProps) => {
    if (prevProps.project_type != this.props.project_type) {
      this.get_projects();
    }
  };

  get_projects = () => {
    const { user, project_type } = this.props;
    const url = `/users/${user && user.login}/projects.json`;
    const { page, limit, search, sort_by, category } = this.state;
    this.setState({
      isSpin: true,
    });
    axios
      .get(url, {
        params: {
          page,
          limit,
          search,
          sort_by,
          category,
          project_type,
        },
      })
      .then((result) => {
        if (result) {
          this.setState({
            projectsList: result.data.projects,
            total: result.data.count,
            isSpin: false,
          });
        }
      })
      .catch((error) => {
        this.setState({
          isSpin: false,
        });
      });
  };

  //切换种类
  changeCategory = (cate) => {
    this.state.category = cate.target.value;
    this.get_projects();
  };
  //切换页数
  changePage = (page) => {
    this.state.page = page;
    this.get_projects();
  };

  // 排序
  ChangeSoryBy = (e) => {
    this.state.sort_by = e.key;
    this.get_projects();
  };

  changeSearchValue = (e) => {
    this.setState({
      search: e.target.value,
    });
  };

  render() {
    const { current_user, user } = this.props;
    const { category } = this.state;
    const menu = (
      <Menu onClick={this.ChangeSoryBy}>
        <Menu.Item key="updated_on">更新时间排序</Menu.Item>
        <Menu.Item key="created_on">创建时间排序</Menu.Item>
        <Menu.Item key="forked_count">fork数据排序</Menu.Item>
        <Menu.Item key="praises_count">点赞数量排序</Menu.Item>
      </Menu>
    );
    const newItem = (
      <Menu>
        <Menu.Item key="created_mirror">
          <Link to={`/projects/mirror/new`}>新建镜像项目</Link>
        </Menu.Item>
        <Menu.Item key="created_deposit">
          <Link to={`/projects/deposit/new`}>新建托管项目</Link>
        </Menu.Item>
      </Menu>
    );
    const button_lists =
      user && current_user && user.login === current_user.login
        ? [
            { type: undefined, name: "所有" },
            { type: "manage", name: "我自己的" },
            { type: "join", name: "我参与的" },
            { type: "watched", name: "我关注的" },
            { type: "forked", name: "我Fork的" },
            { type: "public", name: "公开的" },
            { type: "private", name: "私有的" },
          ]
        : [
            { type: undefined, name: "所有" },
            { type: "manage", name: "TA自己的" },
            { type: "join", name: "TA参与的" },
            { type: "watched", name: "TA关注的" },
            { type: "forked", name: "TAFork的" },
            { type: "public", name: "公开的" },
          ];

    const category_button = button_lists.map((item, key) => {
      return (
        <span key={key} className="pr15">
          <Button
            type={
              (category && category === item.type) || (!category && !item.type)
                ? "primary"
                : "default"
            }
            ghost={
              (category && category === item.type) || (!category && !item.type)
            }
            value={item.type}
            onClick={this.changeCategory}
          >
            {item.name}
          </Button>
        </span>
      );
    });

    const { projectsList, isSpin, total, search, limit, page } = this.state;

    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="list-r-operation">
            <Search
              placeholder="输入项目名称关键字进行搜索"
              enterButton="搜索"
              size="large"
              onSearch={this.get_projects}
              className="list-r-Search"
              value={search}
              onChange={this.changeSearchValue}
            />
            <div>
              {current_user && user && current_user.login === user.login && (
                <Popover
                  content={newItem}
                  trigger={["click"]}
                  placement="bottom"
                  className="mr50"
                >
                  <a className="ant-dropdown-link">
                    <span className="color-blue font-16">
                      <img src={img_new} alt="" width="13px" /> 新建
                    </span>
                  </a>
                </Popover>
              )}

              <Popover content={menu} trigger={["click"]} placement="bottom">
                <a className="ant-dropdown-link">
                  <span className="color-blue font-16">
                    排序 <img src={img_array} alt="" width="10px" />
                  </span>
                </a>
              </Popover>
            </div>
          </div>
          <div className="project-list mt20">{category_button}</div>

          {projectsList && projectsList.length > 0 ? (
            <div>
              <ListItem
                {...this.props}
                {...this.state}
                projects={projectsList}
              ></ListItem>
            </div>
          ) : (
            <Nodata _html={`暂时没有项目`} />
          )}
          {pagination}
      </Spin>
    );
  }
}
export default InfosUser;