educoder/public/react/src/forge/Main/Index.js

import React , { Component } from 'react';

import { Menu , Input , Dropdown , Icon, Spin , Pagination } from 'antd';
import '../css/index.css'
import './list.css';

import ListItem from './IndexItem'
import axios from 'axios';

const Search = Input.Search;
const { SubMenu } = Menu;
class Index extends Component{
  constructor(props){
    super(props);
    this.state={
      projectsList:undefined,
      page:1,
      limit:15,
      search:undefined,
      sort:undefined,
      total:0,
      isSpin:true,
      project_type:undefined,
      category_id:undefined,

      typeList:undefined,
      categoryList:undefined
    }
  }
  
  componentDidMount=()=>{
    const { page,limit, search , sort ,project_type,category_id} = this.state;
    this.getListData(page,limit, search , sort,project_type,category_id);

    this.getType();

    this.getCategory();
  }

  // 获取列表
  getListData=(page,limit, search , sort,project_type,category_id)=>{
    const { current_user } = this.props;
    const url = `/projects.json`;
    axios.get(url,{params:{
      user_id:current_user && current_user.user_id,
      page,
      limit,
      search,
      sort_by:sort,
      project_type,
      category_id
    }}).then((result)=>{
      if(result){
        this.setState({
          projectsList:result.data.projects,
          total:result.data.total_count,
          isSpin:false
        })
      }
    }).catch((error)=>{})
  }

  // 获取类型
  getType=()=>{
    const url = `/projects/group_type_list.json`;

    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          typeList:result.data && result.data.map((item,key)=>{
            return(
              <li onClick={()=>this.changeType(`${item.project_type}`)}>
                <span>{item.name}</span>
                <span>{item.projects_count}</span>
              </li>
            )
          })
        })
      }
    }).catch((error)=>{})
  }

  // 获取类型
  getCategory=()=>{
    const url = `/project_categories/group_list.json`;

    axios.get(url).then((result)=>{
      if(result && result.data){
        this.setCategoryList(result.data);
      }
    }).catch((error)=>{})
  }

  setCategoryList=(list)=>{
    this.setState({
      categoryList:list.map((item,key)=>{
        return(
          <li onClick={()=>this.changeCategory(`${item.id}`)}>
            <span>{item.name}</span>
            <span>{item.projects_count}</span>
          </li>
        )
      })
    })
  }

  changeCategory=(id)=>{
    this.setState({
      category_id:id,
      page:1
    })
    const { limit , sort, project_type } = this.state;
    this.getListData(1,limit, undefined , sort, project_type ,id);
  }

  // 切换类型
  changeType=(type)=>{
    this.setState({
      isSpin:true,
      project_type:type,
      search:undefined
    })
    const { page,limit, sort,category_id } = this.state;
    this.getListData(page,limit, undefined , sort, type ,category_id);
  }

  // 排序
  ChangeSoryBy=(e)=>{
    this.setState({
      sort_by:e.key,
      page:1,
      search:undefined,
      isSpin:true
    })
    const { limit,project_type,category_id } = this.state;
    this.getListData(1 ,limit , undefined , e.key,project_type,category_id);
  }

  // 搜索
  searchFun=(value)=>{
    // console.log(value)
    this.setState({
      page:1,
      search:value,
      isSpin:true,
      project_type:undefined
    })
    const { limit , sort , category_id } = this.state;
    this.getListData(1 ,limit, value , sort , undefined,category_id);
  }
  changeSearchValue=(e)=>{
    this.setState({
      search:e.target.value
    })
  }
  // 翻页
  ChangePage=(page)=>{
    this.setState({
      page
    })
    const { limit, search , sort,project_type,category_id } = this.state;
    this.getListData(page,limit, search , sort,project_type,category_id);
  }

  render(){
    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 { projectsList , isSpin , total , search , limit , page , typeList , categoryList } = this.state;

    const pagination = (
      total && total > 0 ? 
      <div className="edu-txt-center pt30 mb30">
        <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={this.ChangePage}></Pagination>
      </div>:""
    )
    return(
      <div className="main ProjectListIndex">
        <div className="list-left">
          <ul className="list-l-Menu">
            <li className="MenuTitle">项目类型</li>
            { typeList }
          </ul>
          <ul className="list-l-Menu">
            <li className="MenuTitle">项目类别</li>
            { categoryList }
          </ul>
        </div>
        <div className="list-right">
          <Spin spinning={isSpin}>
            <div className="list-r-operation">
              <Search
                placeholder="输入项目名称关键字进行搜索"
                enterButton="搜索"
                size="large"
                onSearch={this.searchFun}
                className="list-r-Search"
                value={search}
                onChange={this.changeSearchValue}
              />
              <Dropdown overlay={menu} trigger={['click']} placement='bottomRight'>
                <a className="ant-dropdown-link">
                  排序 <Icon type="down" />
                </a>
              </Dropdown>
            </div>
            <ListItem {...this.props} {...this.state} projects={projectsList}></ListItem>
            { pagination }
          </Spin>
        </div>
      </div>
    )
  }
}
export default Index;