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';

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

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;
      console.log('blur', this.pageShow);
    });

    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'>
        <Text style={styles.title}>Have something to tell us?</Text>
        <Text style={styles.content}>Please let us know below!</Text>

        <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();
          }}/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 16,
    paddingRight: 16,
    backgroundColor: 'white'
  },
  title: {
    color: '#000',
    fontSize: 18,
    paddingTop: 16,
    paddingBottom: 10
  },
  content: {
    color: '#333',
    fontSize: 14,
    paddingBottom: 14
  },
  typeTitle: {
    color: '#000',
    fontSize: 14,
    paddingTop: 16,
    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: '#333',
    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
  }
})