daily pastebin goal
3%
SHARE
TWEET

Untitled

a guest Nov 19th, 2017 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { connect } from 'react-redux';
  4. import TransitionGroup from 'react-transition-group/TransitionGroup';
  5. import InfiniteScroll from 'react-infinite-scroller';
  6. import TenderCardHH from '../components/TenderCardHH';
  7. import FadeAndSlideTransition from 'hocs/animations/FadeAndSlideTransition';
  8. import { fetchTenders } from 'actions/tender-list';
  9.  
  10. class TenderList extends Component {
  11.   constructor(props) {
  12.     super(props);
  13.     this.renderList = this.renderList.bind(this);
  14.   }
  15.  
  16.   componentDidMount() {
  17.     this.props.fetchTenders();
  18.   }
  19.   componentWillReceiveProps() {
  20.     console.log(1);
  21.   }
  22.   renderList({ children }) {
  23.     return <ul className="tender-card__list">{children}</ul>;
  24.   }
  25.   render() {
  26.     const { tenders, isLoadingInitial, renderList } = this.props;
  27.     return (
  28.       <div>
  29.         {isLoadingInitial ? (
  30.           <InfiniteScroll
  31.             loadMore={this.props.fetchTenders}
  32.             hasMore={true || false}
  33.             loader={<div className="loader">Loading ...</div>}
  34.           >
  35.             <TransitionGroup component={renderList}>
  36.               {tenders.map((tender, index) => {
  37.                 return (
  38.                   <FadeAndSlideTransition
  39.                     duration={450}
  40.                     key={`tenders-${index}`}
  41.                   >
  42.                     <TenderCardHH tender={tender} />
  43.                   </FadeAndSlideTransition>
  44.                 );
  45.               })}
  46.             </TransitionGroup>
  47.           </InfiniteScroll>
  48.         ) : (
  49.           <span>loading</span>
  50.         )}
  51.       </div>
  52.     );
  53.   }
  54. }
  55.  
  56. TenderList.propTypes = {
  57.   tenders: PropTypes.array
  58. };
  59.  
  60. const mapStateToProps = state => {
  61.   return {
  62.     tenders: state.tenderList.tenders,
  63.     isLoadingInitial: state.tenderList.isLoadingInitial
  64.   };
  65. };
  66.  
  67. const mapDispatchToProps = dispatch => {
  68.   return {
  69.     fetchTenders: () => {
  70.       dispatch(fetchTenders());
  71.     }
  72.   };
  73. };
  74.  
  75. TenderList.propTypes = {
  76.   fetchTenders: PropTypes.func,
  77.   isLoadingInitial: PropTypes.bool,
  78.   renderList: PropTypes.func
  79. };
  80.  
  81. export default connect(mapStateToProps, mapDispatchToProps)(TenderList);
RAW Paste Data
Top