forgeplus-react/src/exchange/ExchangeIndex.js

import React, { Component } from 'react';
import { Menu, Dropdown , Pagination ,Spin} from 'antd';
import { Link } from 'react-router-dom'

import ExchangeItem from './ExchangeItem';

import ExchangeRight from './ExchangeRight'

import './exchange.css';

import Empty from './Empty'

import axios from 'axios';

class ExchangeIndex extends Component {
  constructor(props){
    super(props);
    this.state={
      // 热门话题
      hottest_memos:undefined,
      // 版主推荐
      recommend_memos:undefined,
      // 列表数据
      memos:undefined,
      // 列表总数量
      memos_count:0,
      // 板块导航
      forum_sections:undefined,
      page:1,
      current_user:undefined,
      // 默认一页数据
      pageSize:15,
      search:undefined,
      //是否出现加载中的样式
      loading:false
    }
  }

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

  // 数据加载
  InitData=(page,search)=>{
    let url = `/memos`;
    axios.get((url),{params:{
      page,search
    }}).then((result)=>{
      if(result){
        this.setState({
          loading:false,
          hottest_memos:result.data.hottest_memos,
          recommend_memos:result.data.recommend_memos,
          forum_sections:result.data.forum_sections,
          memos:result.data.memos,
          memos_count:result.data.memos_count,
          current_user:result.data.current_user
        })       
      }
    }).catch((error)=>{
    })
  }

  // 搜索
  searchEvent=(search)=>{

    this.setState({
      loading:true,
      search,
      page:1
    })
    this.InitData(0,search);

  }

  // 分页
  changePageEvent = (pageNumber) =>{
    this.setState({
      page:pageNumber
    })
    const { search } = this.state;
    this.InitData(pageNumber,search);
  }


  render(){

    let { hottest_memos , recommend_memos , memos , memos_count , forum_sections , page , pageSize , current_user } = this.state;
    // 板块导航dropdown显示内容
    const menu = (
      <div className="platePanel">
        {
          forum_sections && forum_sections.map(item => {
            return(
              <div className="plateItem">
                <span className="plateItem_h"><Link to={`/forums/theme/${item.id}`}>{item.name}</Link></span>
                <ul className="plateUl">
                  {
                    item.children_tags && item.children_tags.map(i=>{
                      return(<li><Link to={`/forums/theme/${i.id}`}>{i.title}</Link></li>)
                    })
                  }
                </ul>
              </div>
            )
          })
        }
      </div>
    );

    

    // 数据列表和暂无数据
    const dataList = memos && memos.length > 0 ? 
      <ExchangeItem memos = {memos} {...this.props} {...this.state} refresh={this.InitData} current_user={current_user} page={page}/>
    :
      <div className="pt50 pb50"><Empty /></div>
   
    return(
      <div className="clearfix F_panel">
        <div className="fl with76 pr20">
          <div className="back-color-white">
          <div className="f_left_head">
            <ul>
              <li className="active">
                <a>论坛首页</a>
              </li>
              { forum_sections && 
                <li>
                  <Dropdown overlay={menu}>
                    <a>板块导航<i className="iconfont icon-xiajiantou font-16 ml10 color-dark-grey"></i></a>
                  </Dropdown>
                </li>
              }
            </ul>
            <ul>
              <li><Link to='/forums/MyTopic'>我的话题</Link></li>
              <li><Link to='/forums/MyEnshrine'>我的收藏</Link></li>
              <li><Link to='/forums/MyInteresting'>我感兴趣的论坛</Link></li>
            </ul>
          </div>
            <Spin spinning={this.state.loading} >
            { dataList }
            </Spin>
          </div>
          {
            memos_count > pageSize &&
            <div className="pt30 pb50 edu-txt-center"><Pagination showQuickJumper current={page} total={memos_count} onChange={this.changePageEvent} pageSize={pageSize} /></div>
          }
        </div>
        <ExchangeRight
          {...this.props}
          {...this.state}
          searchEvent={this.searchEvent}
          hottest_memos={hottest_memos}
          recommend_memos={recommend_memos}
          loading={this.setState.loading}

        />
      </div>
    )
  }
}
export default ExchangeIndex;