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

/**
 * 通知信息详情
 * @邠心vbe on 2023/08/17
 */
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import apiNotification from '../../api/apiNotification';
import Button, { ElevationObject } from '../../components/Button';
import HeaderTitle from '../../components/HeaderTitle';
import TextView from '../../components/TextView';
import VbeSkeleton from '../../components/VbeSkeleton';
import { PageList } from '../Router';

export default class ViewAlerts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      loading: true,
      messageInfo: {
        createTime: "",
        notificationText: "",
        notificationTitle: "",
        notificationType: ""
      }
    };
  }

  componentDidMount() {
    if (this.props.route?.params?.id) {
      this.setState({
        id: this.props.route?.params?.id
      }, () => {
        this.readMessage();
      })
    }
  }

  readMessage() {
    apiNotification.readMessage(this.state.id).then(res => {
      if (res.data) {
        this.setState({
          messageInfo: res.data
        }, () => {
          this.setPageTitle();
        });
      }
    }).catch(err => {
      toastShort(err);
    });
  }

  setPageTitle() {
    if (this.state.messageInfo.notificationTitle) {
      this.props.navigation.setOptions({
        headerTitle: () => (<HeaderTitle title={this.state.messageInfo.notificationTitle}/>)
      });
      setTimeout(() => {
        this.setState({
          loading: false
        });
      }, 300);
    }
  }

  submitFeedback() {
    startPage(PageList.feedback);
  }

  render() {
    return (
      <VbeSkeleton
        style={this.state.loading ? styles.loadingView : styles.container}
        viewStyle={styles.container}
        isLoading={this.state.loading}
        layout={[
          {width: '90%', height: 20},
          {width: '50%', height: 12, marginTop: 8},
          {width: '100%', height: 15, marginTop: 24},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '30%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 24},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '30%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 24},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '100%', height: 15, marginTop: 8},
          {width: '30%', height: 15, marginTop: 8}
        ]}
        animationDirection={"horizontalRight"}>
        <View style={styles.header}>
          <TextView
            style={styles.textTitle}>
            {this.state.messageInfo.notificationTitle}
          </TextView>
          <View style={ui.flexc}>
            <MaterialCommunityIcons
              name="clock-time-four-outline"
              color={textSecondary}
              size={12}/>
            <TextView
              style={styles.textDate}
              numberOfLines={1}>
              {this.state.messageInfo.createTime}
            </TextView>
          </View>
        </View>
        <View style={styles.divideView}></View>
        <ScrollView
          style={ui.flex1}>
          <TextView
            style={styles.textMessage}
            selectable={true}>
            {this.state.messageInfo.notificationText}
          </TextView>
        </ScrollView>
        { this.state.messageInfo.notificationType == "Review" &&
          <Button
            elevation={1}
            style={$margin(8, 16, 20)}
            text={$t("feedback.submitFeedback")}
            onClick={() => this.submitFeedback()}
          />
        }
      </VbeSkeleton>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  loadingView: {
    flex: 1,
    padding: 16,
    justifyContent: 'flex-start',
    backgroundColor: pageBackground
  },
  textTitle: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold',
    paddingBottom: 2
  },
  textDate: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 2
  },
  header: {
    padding: 16,
    //...ElevationObject(1),
    backgroundColor: pageBackground
  },
  divideView: {
    height: 1,
    marginLeft: 16,
    marginRight: 16,
    backgroundColor: colorPrimary
  },
  textMessage: {
    color: textPrimary,
    fontSize: 12,
    padding: 16
  }
})