ChargEco/Strides-SPAPP/app/pages/alert/Notification.js

/**
 * 通知功能页面适配器
 * @邠心vbe on 2023/08/17
 */
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { PageList } from '../Router';
import ListAlerts from './ListAlerts';
import ListNews from './ListNews';
import ListCampaign from './ListCampaign';
import app from '../../../app.json';
import utils from '../../utils/utils';
import apiNotification from '../../api/apiNotification';
import TextView from '../../components/TextView';
import AlertUtil from './AlertUtil';

export default class Notification extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ready: false,
      refreshing: false,
      countInfo: {},
      pageAdapter: []
    };
    this.pageAdapterAll = [{
      title: $t('notification.tabCampaign'),
      name: "Campaigns",
      component: ListCampaign
    }, {
      title: $t('notification.tabAlerts'),
      name: "Alerts",
      component: ListAlerts
    }, {
      title: AlertUtil.isPromotion ? $t('notification.tabPromotions') : $t("notification.tabArticles"),
      name: "News",
      component: ListNews
    }]
    this.pageAdapter = [{
      title: $t('notification.tabAlerts'),
      name: "Alerts",
      component: ListAlerts
    }, {
      title: AlertUtil.isPromotion ? $t('notification.tabPromotions') : $t("notification.tabArticles"),
      name: "News",
      component: ListNews
    }]
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: false,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: tabBarTextActive,
      tabBarInactiveTintColor: tabBarTextInactive
    }
    this.isHide = false;
  }

  componentDidMount() {
    if (app.notifications.showCampaigns && app.notifications.showArticle) {
      this.setState({
        ready: true,
        pageAdapter: this.pageAdapterAll
      }, () => {
        setTimeout(() => {
          this.init();
        }, 500);
      });
    } else if (app.notifications.showArticle) {
      this.setState({
        ready: true,
        pageAdapter: this.pageAdapter
      }, () => {
        setTimeout(() => {
          this.init();
        }, 500);
      });
    } else {
      this.setState({
        ready: true
      })
      this.init();
    }
    
    this.props.navigation.addListener('focus', () => {
      if (this.isHide) {
        this.isHide = false;
        this.getTotalCount();
      }
    });
    this.props.navigation.addListener('blur', () => {
      this.isHide = true;
    });
  }

  componentWillUnmount() {
    AlertUtil.release();
    //BackHandler.removeEventListener("hardwareBackPress", this.backPage)
  }

  init() {
    utils.setBackClick([this.props?.route?.name, "Campaigns", "Alerts", "Promotions"], this.backPage)
    this.getTotalCount();
    //BackHandler.addEventListener('hardwareBackPress', this.backPage)
    AlertUtil.setOnRefreshListener(() => {
      this.getTotalCount();
    })
  }

  backPage = () => {
    //const params = this.props.route.params;
    if (!this.isHide) {
      startPage(PageList.home);
      return true;
    }
  }

  getTotalCount() {
    apiNotification.getTabDotCount().then(res => {
      if (res.data) {
        this.setState({
          countInfo: res.data
        })
        AlertUtil.setBadgeCount(res.data)
      }
    }).catch(err => {
      if (res.data) {
        this.setState({
          countInfo: {}
        })
        AlertUtil.setBadgeCount()
      }
    })
  }

  getBadgeText(index) {
    let count = 0;
    switch (index) {
      case 0:
        if (app.notifications.showCampaigns) {
          count = this.state.countInfo?.campaignUnreadCount;
        } else {
          count = this.state.countInfo?.alertUnreadCount;
        }
        break;
      case 1:
        if (app.notifications.showCampaigns) {
          count = this.state.countInfo?.alertUnreadCount;
        } else {
          count = this.state.countInfo?.newsUnreadCount;
        }
        break
      case 2:
        count = this.state.countInfo?.newsUnreadCount;
        break;
    }
    if (count > 0) {
      return <TextView style={styles.badgeText}>{count}</TextView>
    } else {
      return <></>
    }
  }

  render() {
    const Tab = createMaterialTopTabNavigator();
    if (!this.state.ready) {
      return (
        <View style={styles.container}></View>
      )
    }
    if (this.state.pageAdapter.length > 0) {
      return (
        <Tab.Navigator
          style={styles.container}
          screenOptions={{
            lazy: isIOS,
            lazyPreloadDistance: 2,
            ...this.tabBarStyle
          }}
          backBehavior={() => this.backPage()}>
          { this.state.pageAdapter.map((item, index) => 
            <Tab.Screen
              key={index}
              name={item.name}
              component={item.component}
              options={{
                title: item.title,
                tabBarAllowFontScaling: false,
                tabBarBadge: () => this.getBadgeText(index)
              }}
            />
          )}
        </Tab.Navigator>
      );
    } else {
      return <ListAlerts {...this.props} showUnread={true}/>
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colorLight
  },
  tabStyle: {
    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
  },
  indicator: {
    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
  },
  badgeText: {
    minWidth: 20,
    height: 20,
    color: textLight,
    fontSize: 10,
    marginTop: 4,
    marginRight: 8,
    paddingLeft: 4,
    paddingRight: 4,
    borderRadius: 30,
    fontWeight: 'bold',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: "#FF3B30"
  }
})