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

/**
 * 通知信息列表
 * @邠心vbe on 2023/08/17
 */
import React, { Component } from 'react';
import { Text, FlatList, StyleSheet, RefreshControl } from 'react-native';
import apiNotification from '../../api/apiNotification';
import Dialog from '../../components/Dialog';
import { MyRefreshProps } from '../../components/ThemesConfig';
import { PageList } from '../Router';
import ItemView from './ItemView';

export default class Alerts 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.notificationId) {
      startPage(PageList.viewMessage, {id: item.notificationId});
    }
  }

  toDelete(item={}) {
    if (item.notificationId) {
      Dialog.showDialog({
        title: $t("notification.deleteMessage"),
        message: $t("notification.confirmDelete"),
        ok: $t("nav.confirm"),
        callback: (btn) => {
          if (btn == Dialog.BUTTON_OK) {
            this.deleteMessage(item.notificationId);
          }
        }
      })
    }
  }

  deleteMessage(id) {
    this.setState({
      refreshing: true
    })
    apiNotification.deleteMessage(id).then(res => {
      toastShort($t("common.deleteSuccess"))
      this.getMessageList();
    }).catch(err => {
      toastShort(err)
      this.setState({
        refreshing: false
      })
    })
  }

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

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

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

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