add feedback

src/Screens/Feedback/Feedback.js

 import React from 'react';
+import {Alert} from 'react-native';
 
 import FeedbackView from './FeedbackView';
+import {connect} from 'react-redux';
+import {sendFeedBack} from '../../apis/Functions/General';
+import {showLoading, hideLoading} from '../../actions/loadingAction';
+import I18n from '../../helper/i18/i18n';
+import {useNavigation} from '@react-navigation/native';
 
 const Feedback = (props) => {
-  return <FeedbackView />;
+  const naviation = useNavigation();
+  const onClickSend = async (star_rate, imageAdd, txtInput) => {
+    console.log(star_rate, imageAdd, txtInput);
+    props.showLoading();
+    const res = await sendFeedBack(
+      createFormData(imageAdd, {
+        star_rate,
+        platform: Platform.OS,
+        message: txtInput,
+      }),
+    );
+    console.log('upload avatar', res);
+    props.hideLoading();
+    if (res?.status == 200 && res.data) {
+      if (res.data.code == 200) {
+        naviation.goBack();
+        setTimeout(() => {
+          Alert.alert(I18n.t('Notification'), res.data.message);
+        }, 500);
+      } else {
+        setTimeout(() => {
+          Alert.alert(I18n.t('Notification'), res.data.message);
+        }, 500);
+      }
+    } else {
+      setTimeout(() => {
+        Alert.alert(I18n.t('Notification'), 'upload fail');
+      }, 500);
+    }
+  };
+  const createFormData = (photo, body) => {
+    const data = new FormData();
+    if (photo) {
+      data.append('image_attach_file', {
+        name: 'sign_img.jpg',
+        type: 'image/jpg',
+        uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''),
+      });
+    }
+
+    Object.keys(body).forEach((key) => {
+      data.append(key, body[key]);
+    });
+    return data;
+  };
+
+  return <FeedbackView onClickSend={onClickSend} />;
 };
 
-export default Feedback;
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+export default connect(mapStateToProps, {showLoading, hideLoading})(Feedback);

src/Screens/Feedback/FeedbackView.js

@@ -14,52 +14,30 @@ import {
   Keyboard,
 } from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
-import RadioForm, {
-  RadioButton,
-  RadioButtonInput,
-  RadioButtonLabel,
-} from 'react-native-simple-radio-button';
 import PickerImg from '../../components/Picker/PickerImg';
-import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import Button from '../../components/Button';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
 import {Rating, AirbnbRating} from 'react-native-ratings';
 
-const radio_props = [
-  {label: I18n.t('VeryBad'), value: 0},
-  {label: I18n.t('Bad'), value: 1},
-  {label: I18n.t('Normal'), value: 2},
-  {label: I18n.t('Good'), value: 3},
-  {label: I18n.t('VeryGood'), value: 4},
-];
-
 const FeedbackView = (props) => {
-  const [isSelected, setIsSelected] = useState('');
   const [txtInput, setTxtInput] = useState('');
-  const [imageAdd, setImageAdd] = useState([]);
+  const [imageAdd, setImageAdd] = useState('');
+  const [star_rate, setStarRate] = useState(5);
 
   const onPress = (value) => {
     setIsSelected(value);
     // console.log('hellooo');
   };
 
-  const onClickImages = (images) => {
-    // const images = imageAdd.map((e) => e.path);
-    setImageAdd(images);
-  };
-
-  const onClickClose = (index) => {
-    console.log('index---', index);
-    const temp = imageAdd.filter((e, i) => {
-      if (i != index) return e;
-    });
-    setImageAdd(temp);
+  const onClickImages = (image) => {
+    console.log(image);
+    setImageAdd(image);
   };
 
   const ratingCompleted = (rating) => {
-    console.log('Rating is: ' + rating);
+    setStarRate(rating);
   };
   return (
     <KeyboardAvoidingView
@@ -72,6 +50,7 @@ const FeedbackView = (props) => {
           <View style={styles.container}>
             <AppText style={styles.txt} i18nKey={'FeedBackDCV'} />
             <Rating
+              startingValue={star_rate}
               onFinishRating={ratingCompleted}
               style={{paddingVertical: 10}}
             />
@@ -90,48 +69,18 @@ const FeedbackView = (props) => {
                 }}
               />
               <View style={styles.picker}>
-                {imageAdd.length > 0 ? (
-                  <ScrollView showsHorizontalScrollIndicator={false} horizontal>
-                    {imageAdd.map((e, index) => (
-                      <View key={index} style={styles.imageButton}>
-                        <ImageBackground
-                          imageStyle={{
-                            width: WIDTHXD(330),
-                            height: HEIGHTXD(250),
-                            borderRadius: 5,
-                          }}
-                          style={{
-                            width: WIDTHXD(330),
-                            height: HEIGHTXD(250),
-                          }}
-                          source={{uri: e}}>
-                          <TouchableOpacity
-                            style={{
-                              flexDirection: 'row',
-                              justifyContent: 'flex-end',
-                              marginTop: -10,
-                              marginRight: -10,
-                            }}
-                            onPress={() => onClickClose(index)}>
-                            <Image
-                              style={{height: 20, width: 20}}
-                              source={R.images.iconClose}
+                <PickerImg
+                  image={imageAdd}
+                  title={''}
+                  onClickImage={onClickImages}
                 />
-                          </TouchableOpacity>
-                        </ImageBackground>
-                      </View>
-                    ))}
-                  </ScrollView>
-                ) : (
-                  <PickerImg title={''} onClickImage={onClickImages} />
-                )}
               </View>
             </View>
           </View>
 
           <View style={styles.containerBtn}>
             <Button
-              onClick={() => console.log('hello')}
+              onClick={() => props.onClickSend(star_rate, imageAdd, txtInput)}
               title={I18n.t('SendFeedback')}
             />
           </View>

src/apis/Functions/General.js

-import {PostLogin, GetData, PostData} from '../helpers';
+import {PostLogin, GetData, PostData, PostFormData} from '../helpers';
 
 import url from '../url';
 
@@ -6,3 +6,8 @@ export const getImagesHome = async (body) =>
   GetData(url.urlGetImagesHome, body)
     .then((res) => res)
     .catch((err) => err);
+
+export const sendFeedBack = async (body) =>
+  PostFormData(url.urlFeedback, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -50,4 +50,6 @@ export default {
   urlChangeAvatar: root + 'api/v1/customers/update-avatar',
 
   urlUploadImage: root + 'api/v1/uploads/upload-image',
+
+  urlFeedback: root + 'api/v1/customers/send-feedback',
 };

src/components/Picker/PickerImg.js

@@ -24,22 +24,15 @@ const options = {
 };
 
 const PickerImg = (props) => {
-  const {title, height, width, onClickImage} = props;
-
-  const [imgPicker, setImgPicker] = useState();
+  const {title, height, width, onClickImage, image} = props;
   const [isModalVisible, setModalVisible] = useState(false);
-  const [urlImg, setUrlImg] = useState('');
-  // const [imgPicker, setImgPicker] = useState('');
 
   const onchoosGalery = () => {
     ImagePicker.openPicker({
       mediaType: 'photo',
-      multiple: true,
-    }).then((images) => {
+    }).then((image) => {
       setModalVisible(false);
-
-      const temp = images.map((e) => e.path);
-      onClickImage(temp);
+      onClickImage(image.path);
     });
   };
 
@@ -48,8 +41,7 @@ const PickerImg = (props) => {
       mediaType: 'photo',
     }).then((image) => {
       setModalVisible(false);
-
-      onClickImage(image[0].path);
+      onClickImage(image.path);
     });
   };
 
@@ -58,9 +50,13 @@ const PickerImg = (props) => {
       onPress={() => setModalVisible(true)}
       style={{marginTop: 10, width: WIDTHXD(480)}}>
       <Text style={styles.txt}>{title}</Text>
+      {image ? (
+        <Image style={styles.container} source={{uri: image}} />
+      ) : (
         <View style={styles.container}>
           <Icon name={'plus'} size={40} color={'#DBDBDB'} />
         </View>
+      )}
 
       <Modal
         isVisible={isModalVisible}
@@ -150,4 +146,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default React.memo(PickerImg);
+export default PickerImg;