react native fragment

// React
import React, { Component } from 'react';
import { View, ScrollView, TouchableWithoutFeedback } from 'react-native';

// PropTypes
import PropTypes from 'prop-types';

// lodash
import _ from 'lodash';

// Redux
import { connect } from 'react-redux';
import { fetchNews } from '../../store/actions/news_actions';

// UI
import { Container, Text } from 'native-base';
import SmallButton from '../uiElements/smallButton';

// Styles
import styles from './styles';

import Spinner from '../uiElements/spinner';

// core
import { formatDate } from '../../core/utils';

class NewsList extends Component {
  static propTypes = {
    news: PropTypes.array,
    loadFrom: PropTypes.number,
    isLoading: PropTypes.bool,
    isLoadingFinished: PropTypes.bool,
    fetchNews: PropTypes.func,
    widgetMode: PropTypes.bool,
    navigation: PropTypes.object,
  }

  constructor(props) {
    super(props);

    this.state = {
      pagination: {
        'sort[date]': '-1',
      },
    };
  }

  componentWillMount() {
    this.loadNews(0, this.state.pagination);
  }

  onPageScroll = (e) => {
    if (this.isCloseToBottom(e.nativeEvent)) {
      if (!this.props.isLoadingFinished) {
        this.loadNews(this.props.loadFrom);
      }
    }
  }

  isCloseToBottom = ({ layoutMeasurement, contentOffset, contentSize }) => {
    const paddingToBottom = 20;
    return layoutMeasurement.height + contentOffset.y >=
      contentSize.height - paddingToBottom;
  };

  loadNews = (from, params = {}) => {
    if (!this.props.isLoading) {
      const currentParams = {
        ...this.state.pagination,
        ...params,
      };

      this.props.fetchNews(from, currentParams);
    }
  }

  goToDetailNewsPage = (newsId, newsTitle, newsText) => {
    this.props.navigation.dispatch({ type: 'DetailNewsPage', params: { newsId, newsTitle, newsText } });
  }

  renderNewsItems = news => news.map(newsData => (
    <TouchableWithoutFeedback
      key={newsData.id}
      onPress={() => {
        this.goToDetailNewsPage(
          newsData.id,
          newsData.name,
          newsData.description,
        );
      }}
    >
      <View key={newsData.id} style={styles.newsItem}>
        <View style={styles.promotionContainer} >
          <Text style={styles.newsDate}>{formatDate(newsData.date, 'ddmmyyyy')}</Text>
          <Text style={styles.newsText}>{newsData.title}</Text>
          <SmallButton
            style={styles.detailPromotionButton}
            direction="right"
            onPress={() => {
              this.goToDetailNewsPage(
                newsData.id,
                newsData.name,
                newsData.description,
              );
            }}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
  ))

  renderNews = () => {
    if (this.props.news.length > 0) {
      const news = _.toArray(this.props.news);

      return (
        <ScrollView style={styles.newsScrollContainer} onScroll={this.onPageScroll}>
          {this.renderNewsItems(news)}
        </ScrollView>);
    }

    return (
      <View>
        {!this.props.isLoading &&
        <Text style={styles.newsNotFound}>Акций нет</Text>}
        {this.props.isLoading &&
          <Spinner animating />
        }
      </View>
    );
  }

  render() {
    return (
      <Container style={styles.content}>
        {this.renderNews()}
      </Container>
    );
  }
}

function mapStateToProps(state) {
  return {
    news: state.newsReducer.toJS().news,
    loadFrom: state.newsReducer.get('loadFrom'),
    isLoading: state.newsReducer.get('isLoading'),
    isLoadingFinished: state.newsReducer.get('isLoadingFinished'),
  };
}

const actions = {
  fetchNews,
};

export default connect(mapStateToProps, actions)(NewsList);