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

import React , { Component } from 'react';

import { Menu , Input , Dropdown , Icon, Result } from 'antd';
import { Link } from 'react-router-dom';
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
    }
  }
  
  componentDidMount=()=>{
    const { page,limit, search , sort } = this.state;
    this.getListData(page,limit, search , sort);
  }

  getListData=(page,limit, search , sort)=>{
    const { current_user } = this.props;
    const url = `/projects.json`;
    axios.get(url,{params:{
      user_id:current_user && current_user.user_id,
      page,
      limit,
      name:search,
      sort_by:sort
    }}).then((result)=>{
      if(result){
        this.setState({
          projectsList:result.data
        })
      }
    }).catch((error)=>{})
  }

  render(){
    const menu=(
      <Menu>
        <Menu.Item key="0">
          <a href="http://www.alipay.com/">1st menu item</a>
        </Menu.Item>
        <Menu.Item key="1">
          <a href="http://www.taobao.com/">2nd menu item</a>
        </Menu.Item>
      </Menu>
    )

    const { projectsList } = this.state;
    return(
      <div className="main ProjectListIndex">
        <div className="list-left">
          <ul className="list-l-Menu">
            <li className="MenuTitle">项目类型</li>
            <li>
              <Link to={``}>
                <span>开源托管项目</span>
                <span>85</span>
              </Link>
            </li>
            <li>
              <Link to={``}>
                <span>开源镜像项目</span>
                <span>85</span>
              </Link>
            </li>
          </ul>
          <ul className="list-l-Menu">
            <li className="MenuTitle">项目类别</li>
            <Menu
              mode="inline"
            >
              <SubMenu
                key="sub1"
                title={
                  <span>
                    <span>Navigation One</span>
                  </span>
                }
              >
                <Menu.ItemGroup key="g1">
                  <Menu.Item key="1">Option 1</Menu.Item>
                  <Menu.Item key="2">Option 2</Menu.Item>
                  <Menu.Item key="3">Option 3</Menu.Item>
                  <Menu.Item key="4">Option 4</Menu.Item>
                </Menu.ItemGroup>
              </SubMenu>
            </Menu>
          </ul>
        </div>
        <div className="list-right">
          <div className="list-r-operation">
            <Search
              placeholder="输入项目名称关键字进行搜索"
              enterButton="搜索"
              size="large"
              onSearch={value => console.log(value)}
              className="list-r-Search"
            />
            <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>
        </div>
      </div>
    )
  }
}
export default Index;