ChargEco/Strides-APP/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 } 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 = {
      refreshing: false,
      countInfo: {}
    };
    this.pageAdapter = [/*{
      title: $t('notification.tabCampaign'),
      name: "Campaigns",
      component: ListCampaign
    }, */{
      title: $t('notification.tabAlerts'),
      name: "Alerts",
      component: ListAlerts
    }, {
      title: $t('notification.tabPromotions'),
      name: "News",
      component: ListNews
    }]
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: false,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: app.isWhitelabel ? textPrimary : colorLight,
      tabBarInactiveTintColor: app.isWhitelabel ? textSecondary : "#E0E0E0"
    }
    this.isHide = false;
  }

  componentDidMount() {
    utils.setBackClick([this.props?.route?.name, "Campaigns", "Alerts", "Promotions"], this.backPage)
    this.props.navigation.addListener('focus', () => {
      if (this.isHide) {
        this.isHide = false;
        this.getTotalCount();
      }
    });
    this.props.navigation.addListener('blur', () => {
      this.isHide = true;
    });
    this.getTotalCount();
    //BackHandler.addEventListener('hardwareBackPress', this.backPage)
  }

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

  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:
        count = this.state.countInfo?.campaignUnreadCount;
        break;*/
      case 0:
        count = this.state.countInfo?.alertUnreadCount;
        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();
    return (
      <Tab.Navigator
        style={styles.container}
        screenOptions={{
          lazy: false,
          lazyPreloadDistance: 1,
          ...this.tabBarStyle
        }}
        backBehavior={() => this.backPage()}>
        { this.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>
    );
  }
}

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