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

/**
 * 活动信息列表
 * @邠心vbe on 2023/10/24
 */
 import React, { Component } from 'react';
 import { View, Text, FlatList, StyleSheet, RefreshControl, PixelRatio } from 'react-native';
 import apiArticle from '../../api/apiArticle';
 import { MyRefreshProps } from '../../components/ThemesConfig';
 import { PageList } from '../Router';
 import AlertUtil from './AlertUtil';
import ItemCampaign from './ItemCampaign';
import VbeSkeleton from '../../components/VbeSkeleton';

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

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

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

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

  getMessageList() {
    apiArticle.getCampaignList().then(res => {
      if (res.data) {
        this.setState({
          dataList: res.data
        })
      }
    }).catch(err => {
      toastShort(err)
    }).finally(() => {
      this.setState({
        loading: false,
        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.getCampaignList(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 (
      <ItemCampaign
        {...props}
        onPress={() => this.toDetail(props.item)}
      />
    )
  }

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

  render() {
    if (this.state.loading) {
      return (
        <View style={styles.listView}>
          { this.state.loadingList.map((item, index) =>
            <View style={styles.loadingView} key={index}>
              <VbeSkeleton
                style={styles.iconImage}
                layout={[
                  {width: 85, height: 85, borderRadius: 6},
                  {width: 35, height: 12, marginTop: 4, marginLeft: 25},
                ]}
                animationDirection={"horizontalRight"}
              />
              <VbeSkeleton
                style={ui.flex1}
                layout={[
                  {width: '100%', height: 20},
                  {width: '80%', height: 12, marginTop: 6},
                  {width: '100%', height: 15, marginTop: 12},
                  {width: '60%', height: 15, marginTop: 6}
                ]}
                animationDirection={"horizontalRight"}
              />
            </View>
          )}
        </View>
      )
    }
    return (
      <FlatList
        style={styles.listView}
        data={this.state.dataList}
        renderItem={this.listItem}
        ItemSeparatorComponent={this.divideView}
        keyExtractor={item => item.articleId}
        onEndReached={() => this.getMessageListPage()}
        onEndReachedThreshold={0.3}
        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'
  },
  loadingView: {
    padding: 16,
    flexDirection: 'row'
  },
  iconImage: {
    width: 85,
    height: 85,
    borderRadius: 6,
    marginRight: 16,
    marginBottom: 8
  }
})