ChargEco/Strides-APP/app/pages/my/Feedback.js

/**
 * Feedback 页面
 * @邠心vbe on 2021/04/28
 */
import React from 'react';
import { View, Text, StyleSheet, ScrollView, TextInput, Image, Pressable } from 'react-native';
import Button from '../../components/Button';
import apiUpload from '../../api/apiUpload';
import { host } from '../../api/http';
import apiUser from '../../api/apiUser';
import Dialog from '../../components/Dialog';
import ImagePicker from 'react-native-image-crop-picker';
import Dropdown from '../../components/Dropdown';
import { UploadThemes } from '../../components/ThemesConfig';

const options = {
  cropping: false,
  multiple: false,
  minFiles: 1,
  maxFiles: 3,
  mediaType: 'photo',
  writeTempFile: false,
  compressImageQuality: 0.8,
  compressImageMaxWidth: 720,
  compressImageMaxHeight: 1280,
  ...UploadThemes
}

export default class Feedback extends React.Component {

  constructor(props) {
    super(props);
    this.state= {
      typeList: [],
      feedback: '',
      typeOfFeedback: '',
      imageUrl: ['', '', '']
    }
  }

  componentDidMount() {
    this.pageShow = true;
    this.props.navigation.addListener('blur', () => {
      this.pageShow = false;
    });

    apiUser.getTypeOfFeedback().then(res => {
      if (res.success && res.data.length > 0) {
        this.setState({
          typeList: res.data
        });
      } else {
        if (this.pageShow) {
          this.noTypeDialog();
        }
      }
    }).catch(err => {
      if (this.pageShow) {
        this.noTypeDialog();
      }
    });
  }

  noTypeDialog() {
    setTimeout(() => {
      if (this.pageShow) {
        Dialog.showResultDialog('Can not fetch feedback type!', 'OK', back => {
          goBack();
        });
      }
    }, 500);
  }

  uploadImage(index) {
    ImagePicker.openPicker(options).then(image => {
      if (image.path) {
        apiUpload.uploadImage(image.path, image.mime, 'FEEDBACK').then(res => {
          if (res.success && res.data.picturePath) {
            let imageUrl = this.state.imageUrl;
            imageUrl[index] = res.data.picturePath;
            this.setState({
              imageUrl: imageUrl
            });
          } else {
            toastShort('Upload failed, please retry');
          }
        }).catch(err => {
          toastShort(err);
        });
      }
    }).catch(err => {
      //console.log(err);
    });
  }

  submitFeedback() {
    if (this.state.typeOfFeedback == '') {
      toastShort('Please select type of feedback');
      return;
    }
    if (this.state.feedback == '') {
      toastShort('Please type feedback content');
      return;
    }
    const params = {
      "typeOfFeedback": this.state.typeOfFeedback,
      "feedback": this.state.feedback,
      "feedbackImgOne": this.state.imageUrl[0],
      "feedbackImgTwo": this.state.imageUrl[1],
      "feedbackImgThree": this.state.imageUrl[2]
    }
    Dialog.showProgressDialog();
    apiUser.feedback(params).then(res => {
      Dialog.dismissLoading();
      Dialog.showResultDialog('Send feedback successfully!', 'OK', back => {
        goBack();
      });
    }).catch(err => {
      Dialog.dismissLoading();
      toastShort(err);
    });
  }

  render() {
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps='handled'
        contentInsetAdjustmentBehavior='automatic'>
        <View style={styles.headerView}>
          <View style={ui.flex1}>
            <Text style={styles.title}>Have something to tell us?</Text>
            <Text style={styles.content}>Please let us know below!</Text>
          </View>
          <Image
            style={styles.headerImage}
            resizeMode="contain"
            source={require('../../images/top-feedback.png')}/>
        </View>
        
        <View style={styles.contentView}>
          <Text style={styles.typeTitle}>Type of Feedback</Text>
          <View style={styles.pickerView}>
            <Dropdown
              title='Type of Feedback'
              list={this.state.typeList}
              value={this.state.typeOfFeedback}
              nameKey={'value'}
              valueKey={'key'}
              placeholder='Select'
              onChange={(value, index)=> {
                this.setState({
                  typeOfFeedback: value
                })
              }}/>
          </View>
          
          <Text style={styles.typeTitle}>Please fill in here (500 words)</Text>
          <TextInput
            style={styles.feedbackInput}
            multiline={true}
            numberOfLines={8}
            textAlignVertical='top'
            onChangeText={text => {
              this.setState({
                feedback: text
              });
            }}/>

          <View
            style={styles.uploadGroup}>
            { this.state.imageUrl.map((item, index) => {
                return (
                  <Pressable
                    key={index}
                    style={styles.uploadView}
                    onPress={() => {
                      this.uploadImage(index)
                    }}>
                    { item == ''
                    ? <Image
                        style={styles.uploadIcon}
                        source={require('../../images/icon/ic-add-photo.png')}/>
                    : <Image
                        style={styles.uploadIcon}
                        defaultSource={require('../../images/icon/icon-upload-default.png')}
                        source={{uri: host + item}}/>
                    }
                  </Pressable>
                );
              })
            }
          </View>
          <Button
            style={styles.button}
            text='Submit Feedback'
            elevation={1.5}
            onClick={() => {
              this.submitFeedback();
            }}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  contentView: {
    marginTop: -30,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    ...$padding(8, 16, 16),
    backgroundColor: colorLight
  },
  headerView: {
    paddingTop: 16,
    paddingLeft: 16,
    paddingRight: 8,
    paddingBottom: 30,
    flexDirection: 'row',
    backgroundColor: '#F5F5F5'
  },
  headerImage: {
    width: 123,
    height: 101
  },
  title: {
    color: '#056A94',
    fontSize: 18,
    paddingTop: 16,
    paddingBottom: 8
  },
  content: {
    color: '#056A94',
    fontSize: 14
  },
  typeTitle: {
    color: '#000',
    fontSize: 16,
    paddingTop: 16,
    fontWeight: 'bold',
    paddingBottom: 10
  },
  pickerView: {
    //width: $vw(60),
    height: 44,
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 6,
    marginTop: 8,
    marginBottom: 8,
    overflow: 'hidden',
    justifyContent: 'center',
    backgroundColor: '#F5F5F5'
  },
  feedbackInput: {
    color: textPrimary,
    minHeight: 100,
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 6,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#F5F5F5'
  },
  uploadGroup: {
    paddingTop: 16,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  uploadView: {
    flex: 1,
    alignItems: 'center'
  },
  uploadIcon: {
    width: $vw(29),
    height: $vw(29),
    borderRadius: 6
  },
  button: {
    marginTop: 32,
    marginBottom: 16,
    borderRadius: 4
  }
})