Home.js

Home.js

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

import React, { PropTypes,Component } from 'react';
import fetch from '../../core/fetch';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.css';
import _ from 'lodash';
import CloudTags from '../tags/Tags';
import PaginationContainer from './PaginationContainer';
import {Tabs,Spin} from 'antd';

import {connect} from 'react-redux';
import {setRuntimeVariable} from '../../actions/runtime';

const TabPane = Tabs.TabPane;

const title = '前端社区';

var Home = React.createClass({
  getInitialState: function(props) {
    return {
      news: [],
      tags: [],
      newsLoading:true,
    };
  },
  componentDidMount:function (props) {
    this.resetNewsState(this);
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    return !_.isEqual(nextState,this.state);
  },
  componentWillReceiveProps:function (nextProps) {
    this.setState({
      newsLoading:true
    });
    this.resetNewsState(this,nextProps.currentPage,nextProps.pageSize);
  },
  resetNewsState:function (context,currentPage,pageSize) {
    const self = this;
    //获取新的数据
    fetch('/graphql', {
      method: 'post',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: `{news(currentPage:${currentPage||this.props.currentPage},pageSize:${pageSize||this.props.pageSize}){title,link,contentSnippet},tags{name},count{count}}`,
      }),
      credentials: 'include',
    }).then(async function (resp) {
      let { data } = await resp.json();
      //设置全局store提供给页码组件
      //总条目数
      self.props.setRuntime({
        name:"newsTotalItem",
        value:data.count.count
      });


      //内部状态
      (context||this).setState({
        news:data.news,
        tags:data.tags,
        newsLoading:false
      })
    })
  },
  render: function() {
    console.log(this.state.newsLoading);
    let content;
    if(this.state.newsLoading){
      content = <Spin />;
    }else{
      content = (
        <ul className={s.news}>
          {(this.state.news||[]).map((item, index) => (
            <li key={index} className={s.newsItem}>
              <a href={item.link} className={s.newsTitle}>{item.title}</a>
                <span
                  className={s.newsDesc}
                  dangerouslySetInnerHTML={{ __html: item.contentSnippet }}
                />
            </li>
          ))}
        </ul>
      )
    };

    return (
        <div className={s.root}>
          <div className={s.container}>
            <Tabs type="card">
              <TabPane tab="最新" key="1">
                <CloudTags tags={this.state.tags||[]} />
                {content}
                <PaginationContainer />
              </TabPane>
              <TabPane tab="热门" key="2">选项卡二内容</TabPane>
              <TabPane tab="更新" key="3">选项卡三内容</TabPane>
            </Tabs>
          </div>
        </div>
    )
  }
});

// Home.propTypes = {
//   news: PropTypes.arrayOf(PropTypes.shape({
//     title: PropTypes.string.isReq  uired,
//     link: PropTypes.string.isRequired,
//     contentSnippet: PropTypes.string,
//   })).isRequired,
// };
Home.contextTypes = { setTitle: PropTypes.func.isRequired };



export default connect(state => ({
  currentPage: state.runtime.currentPage,
  pageSize:state.runtime.pageSize,
}), {setRuntime:setRuntimeVariable})(withStyles(s)(Home));