ChargEco/Strides-APP/app/pages/alert/ListNews.js

/**
 * 新闻信息列表
 * @邠心vbe on 2023/08/17
 */
import React, { Component } from 'react';
import { Text, FlatList, StyleSheet, RefreshControl, PixelRatio, View } from 'react-native';
import apiArticle from '../../api/apiArticle';
import { MyRefreshProps } from '../../components/ThemesConfig';
import { PageList } from '../Router';
import AlertUtil from './AlertUtil';
import ItemArticle from './ItemArticle';

export default class ListNews extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      refreshing: false
    };
  }

  componentDidMount() {
    //this.getMessageList();
    this.props.navigation.addListener('focus', () => {
      this.getMessageList();
    });
  }

  toDetail(item={}) {
    if (item.articleId) {
      startPage(PageList.viewArticle, {id: item.articleId});
    }
  }

  onRefresh() {
    this.setState({
      refreshing: true
    })
    this.getMessageList();
  }

  getMessageList() {
    apiArticle.getArticleList().then(res => {
      if (res.data) {
        this.setState({
          dataList: res.data
        })
      }
    }).catch(err => {
      toastShort(err)
    }).finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }

  getMessageListPage() {
    const count = AlertUtil.getNewsCount();
    if (this.state.dataList.length > 0 && this.state.dataList.length < count) {
      const last = this.state.dataList[this.state.dataList.length-1]
      if (last.articleId) {
        apiArticle.getArticleList(last.articleId).then(res => {
          if (res.data) {
            const list = [
              ...this.state.dataList,
            ]
            list.push(...res.data)
            this.setState({
              dataList: list
            })
          }
        }).catch(err => {
          toastShort(err)
        })
      }
    }
  }

  listItem = (props) => {
    return (
      <ItemArticle
        {...props}
        onPress={() => this.toDetail(props.item)}
      />
    )
  }

  divideView = (props) => {
    return (<View style={{height: 1.5/PixelRatio.get()}}></View>)
  }

  render() {
    return (
      <FlatList
        style={styles.listView}
        data={this.state.dataList}
        renderItem={this.listItem}
        ItemSeparatorComponent={this.divideView}
        keyExtractor={item => item.articleId}
        onEndReached={() => this.getMessageListPage()}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps()}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onRefresh()}
          />
        }
        ListEmptyComponent={<Text style={styles.noData}>{$t('notification.empty')}</Text>}
      />
    );
  }
}

const styles = StyleSheet.create({
  listView: {
    flex: 1
  },
  noData: {
    color: textPlacehoder,
    fontSize: 14,
    padding: 20,
    textAlign: 'center'
  }
})