123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- import React, {PureComponent} from "react";
- import {connect} from 'react-redux';
- import {FeatureTitle, HomeList, BlogList} from "../style";
- import {actionCreators} from "../store";
- import {Link} from "react-router-dom";
- import {getTime} from "../../../lib/public";
- import PagInation from '../../../components/PagInation';
- const List = (props) => {
- const {blogList} = props;
- const list = blogList.toJS();
- const Class = ['blog-item post-list-show left', 'blog-item post-list-show right'];
- return (
- <BlogList>
- {list.map((item, index) => {
- return (
- <div className={Class[index % Class.length]} key={index}>
- <div className='post-thumb'>
- <Link to={'/article/' + item.id}>
- <img src={item.thumbnail} alt=""/>
- </Link>
- </div>
- <div className='post-content-wrap'>
- <div className='post-content'>
- <div className='post-date'>
- <i className='iconfont icon-time'/>
- 发布于 {getTime(item.createTime)}
- </div>
- <Link to={'/article/' + item.id} className='post-title'>
- <h3>{item.title}</h3>
- </Link>
- <div className='post-meta'>
- <span>
- <i className='iconfont icon-attention'/>
- {item.views} 热度
- </span>
- <span className='comments-number'>
- <i className='iconfont icon-mark'/>
- {item.comments} 评论
- </span>
- {item.categoryName && <span>
- <i className='iconfont icon-file'/>
- {item.categoryName}
- </span>}
- </div>
- <div className='float-content'>
- <p>{item.summary}</p>
- <div className='post-bottom'>
- <Link to={'/article/' + item.id}>
- <i className='iconfont icon-caidan'/>
- </Link>
- </div>
- </div>
- </div>
- </div>
- </div>
- )
- })}
- </BlogList>
- )
- };
- class ListWrapper extends PureComponent {
- render() {
- const {page, finished, loading} = this.props;
- return (
- <HomeList>
- <FeatureTitle>
- <h1><i className='iconfont icon-envira'/><span> Discovery</span></h1>
- </FeatureTitle>
- {List(this.props)}
- <PagInation page={page} finished={finished} loading={loading} getList={this.props.getBlogList}/>
- </HomeList>
- )
- }
- componentDidMount() {
- if (!this.props.isList) {
- this.props.getBlogList(1, true);
- }
- }
- }
- const mapState = (state) => {
- return {
- blogList: state.getIn(['home', 'blogList']),
- page: state.getIn(['home', 'articlePage']),
- finished: state.getIn(['home', 'finished']),
- loading: state.getIn(['home', 'loading']),
- isList: state.getIn(['home', 'isList']),
- }
- };
- const mapDispatch = (dispatch) => {
- return {
- getBlogList(page, override) {
- dispatch(actionCreators.getBlogList(page, override))
- },
- }
- };
- export default connect(mapState, mapDispatch)(ListWrapper);
|