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

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Menu, Input, Spin, Pagination, Popover, Button, Divider } 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,
      is_public: undefined
    };
  }

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

  componentDidUpdate = (prevProps) => {
    const { username } = this.props.match.params;
    const prevUser = prevProps.match.params.username;
    if (prevProps.project_type !== this.props.project_type || (prevUser && username && prevUser !== username)) {
      this.get_projects();
    }
  };

  get_projects = (isPublic) => {
    const { username } = this.props.match.params;
    const { project_type } = this.props;
    const url = `/users/${username}/projects.json`;
    const { page, limit, search, sort_by, category , is_public } = this.state;
    this.setState({
      isSpin: true,
    });
    axios
      .get(url, {
        params: {
          page,
          limit,
          search,
          sort_by,
          category,
          project_type,
          is_public:isPublic!==undefined ? isPublic : is_public
        },
      })
      .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,
    });
  };

  // 切换公有私有
  changeStatus=(check_is_public)=>{
    const {is_public} = this.state
    const new_is_public = is_public === check_is_public ? undefined : check_is_public

    this.state.is_public = new_is_public
    this.get_projects(new_is_public);
  }
  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>
  );

  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>
  );

  category_button=(category)=>{
    const { current_user, user } = this.props;
    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: undefined, name: "所有" },
        { type: "manage", name: "TA创建的" },
        { type: "join", name: "TA参与的" },
        { type: "watched", name: "TA关注的" },
        { type: "forked", name: "TAFork的" },
      ];

      let list = 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>
        );
      })
      return list;
  }

  render() {
    const { current_user, user } = this.props;
    const { category , is_public } = this.state;
    const { projectsList, isSpin, total, search, limit, page } = this.state;

    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={this.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={this.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="infosType">
          <div>{this.category_button(category)}</div>
          {
            user && current_user && user.login === current_user.login ?
            <p className="infoStatus">
              <span className={is_public === "public" ? "active" : "" } onClick={()=>this.changeStatus("public")}>公有</span>
              {
                !is_public && <Divider type={"vertical"} className="statusDivider" ></Divider>
              }
              <span className={is_public === "private" ? "active" : "" } onClick={()=>this.changeStatus("private")}>私有</span>
            </p>
            :""
          }
        </div>
        {projectsList && projectsList.length > 0 ? 
        <ListItem
          {...this.props}
          {...this.state}
          projects={projectsList}
        ></ListItem>
        : 
        <Nodata _html={`暂时没有项目`} />
        }
        {
          total && total > limit ?
          <div className="edu-txt-center pt30 mb30 border-top-grey">
            <Pagination
              simple
              defaultCurrent={page}
              total={total}
              pageSize={limit}
              onChange={this.changePage}
            ></Pagination>
          </div>
          : 
          ""
        }
      </Spin>
    );
  }
}
export default InfosUser;