ChargEco/Strides-APP/app/pages/member/MembersList.js

/**
 * 我的会员列表页面
 * @邠心vbe on 2023/07/14
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
import apiMember from '../../api/apiMember';
import { ElevationObject } from '../../components/Button';
import Dialog from '../../components/Dialog';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';
import VbeSkeleton from '../../components/VbeSkeleton';

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

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      if (!this.state.loading) {
        this.getMyMemberList();
      }
    })
    setTimeout(() => {
      this.getMyMemberList();
    }, 500);
  }

  getMyMemberList() {
    apiMember.getMyMemberList().then(res => {
      if (res.data) {
        this.setState({
          memberList: res.data
        });
      } else {
        this.setState({
          memberList: []
        });
      }
    }).catch(err => {
      this.setState({
        memberList: []
      });
      toastShort(err)
    }).finally(() => {
      this.setState({
        loading: false
      });
    });
  }

  getMembershipStatus(status) {
    switch (status) {
      case "Pending":
        return $t("members.statusPending");
      case "Approved":
        return $t("members.statusApproved");
      case "Pass":
        return $t("members.statusApproved");
      case "Rejected":
        return $t("members.statusRejected");
      default:
        return $t("charging.statusUnavailable");
    }
  }

  onDeleteMember(item) {
    Dialog.showDialog({
      title: $t("members.deleteMember"),
      message: $t("members.confirmDelete"),
      ok: $t("nav.yes"),
      cancel: $t("nav.no"),
      callback: btn => {
        if (btn == Dialog.BUTTON_OK) {
          this.deleteMembers(item.membershipId)
        }
      }
    })
  }

  deleteMembers(id) {
    //Dialog.showProgressDialog();
    apiMember.delMembers(id).then(res => {
      toastShort($t("common.deleteSuccess"))
      this.getMyMemberList();
    }).catch(err => {
      toastShort(err)
    })
  }

  render() {
    if (this.state.loading) {
      return (
        <View style={styles.container}>
          { this.state.loadingList.map((item, index) =>
            <View style={styles.loadingView} key={index}>
              <VbeSkeleton
                style={ui.flex1}
                layout={[
                  {width: '50%', height: 20},
                  {width: '100%', height: 15, marginTop: 6},
                  {width: '60%', height: 15, marginTop: 6}
                ]}
                animationDirection={"horizontalRight"}
              />
              <VbeSkeleton
                style={styles.loadingIcon}
                layout={[
                  {width: 48, height: 48, borderRadius: 6}
                ]}
                animationDirection={"horizontalRight"}
              />
            </View>
          )}
        </View>
      )
    }
    return (
      <View style={styles.container}>
        { this.state.memberList.length > 0
        ? this.state.memberList.map((item, index) => (
          <Pressable
            key={index}
            style={styles.memberView}
            onPress={() => {
              if (item.membershipStatus == "Rejected") {
                this.onDeleteMember(item)
              }
              //startPage(PageList.editVehicle, {id: item.vehiclePk});
            }}>
            <View style={styles.itemBackground}>
              { utils.isNotEmpty(item.groupLogo)
              ? <Image
                  source={{uri: utils.getImageUrl(item.groupLogo)}}
                  resizeMode="contain"
                  style={styles.groupLogo}/>
              : <MaterialIcons
                  name="card-membership"
                  color={colorAccent}
                  style={styles.groupIcon}
                  size={52}/>
              }
            </View>
            <View style={styles.memberItem}>
              { utils.isEmpty(item.groupType)
              ? <TextView style={styles.textLabel2}>{$t('members.membership')}:</TextView>
              : <TextView style={styles.textType}>{item.groupType}</TextView>
              }
              <TextView
                style={styles.textValue2}
                numberOfLines={1}>{item.membership}</TextView>
            </View>
            <View style={styles.memberItem}>
              <TextView style={styles.textLabel}>{$t('members.membershipNo')}:</TextView>
              <TextView style={styles.textValue}>{item.membershipNo}</TextView>
            </View>
            <View style={styles.memberItem}>
              <TextView style={styles.textLabel}>{$t('members.status')}:</TextView>
              { item.membershipStatus == "Rejected"
                ? <TextView style={[styles.textValue, styles.statusRed]}>{this.getMembershipStatus(item.membershipStatus)}</TextView>
                : <TextView style={styles.textValue}>{this.getMembershipStatus(item.membershipStatus)}</TextView>
              }
              
            </View>
          </Pressable>
        ))
        : <Text style={ui.noData}>{$t('members.noData')}</Text>
      }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  loadingView: {
    padding: 16,
    borderRadius: 8,
    borderColor: '#F0F0F0',
    borderWidth: 1,
    alignItems: 'flex-end',
    backgroundColor: colorLight,
    flexDirection: 'row',
    ...$margin(16, 16, 0)
  },
  memberView: {
    borderRadius: 8,
    overflow: 'hidden',
    ...ElevationObject(5),
    ...$margin(16, 16, 0),
    ...$padding(16),
    backgroundColor: colorLight
  },
  memberItem: {
    paddingTop: 1,
    paddingBottom: 1,
    alignItems: 'center',
    flexDirection: 'row'
  },
  textLabel: {
    color: textPrimary,
    fontSize: 14,
    paddingRight: 6,
    fontWeight: 'bold'
  },
  textValue: {
    flex: 1,
    color: textPrimary,
    fontSize: 14
  },
  textLabel2: {
    color: textPrimary,
    fontSize: 16,
    paddingRight: 5,
    marginBottom: 2,
    fontWeight: 'bold'
  },
  textValue2: {
    flex: 1,
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 2
  },
  statusRed: {
    color: "#FF2222"
  },
  textType: {
    color: textLight,
    fontSize: 10,
    marginRight: 4,
    borderRadius: 2,
    ...$padding(1, 4),
    backgroundColor: colorAccent
  },
  itemBackground: {
    right: 0,
    bottom: 0,
    position: 'absolute'
  },
  groupIcon: {
    margin: 4,
    opacity: 0.08
  },
  groupLogo: {
    width: 48,
    height: 48,
    margin: 8,
    opacity: .8,
    borderRadius: 6
  },
  loadingIcon: {
    width: 48,
    height: 48,
    marginLeft: 16
  }
})