update api avatart

ios/Invest.xcodeproj/project.pbxproj

@@ -903,7 +903,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				ENABLE_BITCODE = NO;
 				GCC_PREPROCESSOR_DEFINITIONS = (
@@ -937,7 +937,7 @@
 				CODE_SIGN_ENTITLEMENTS = Invest/Invest.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 3;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = MXZ24GRH48;
 				INFOPLIST_FILE = Invest/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/Invest/Info.plist

@@ -24,6 +24,8 @@
 	<string>$(MARKETING_VERSION)</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
+	<key>UIRequiresFullScreen</key>
+<true/>
 	<key>CFBundleURLTypes</key>
 	<array>
 		<dict>

src/Config/Functions.js

@@ -11,13 +11,15 @@ import _ from 'lodash';
 import I18n from '../helper/i18/i18n';
 import AppText from '../components/AppText';
 
-import {DETAILNEW, NOTIFICATION} from '../routers/ScreenNames';
+import {DETAILNEW, TABNAVIGATOR} from '../routers/ScreenNames';
 import R from '../assets/R';
 
 export const convertScreen = (name) => {
   switch (name) {
     case 'CUSTOMER_NEWS':
       return DETAILNEW;
+    case 'CUSTOMER_NOTIFICATION':
+      return TABNAVIGATOR;
     default:
       return DETAILNEW;
   }

src/Screens/Home/HomeView.js

@@ -24,12 +24,14 @@ const HomeView = (props) => {
         <HeaderHome />
         {props.listImage.length > 0 ? (
           <SwiperComponent listImage={props.listImage} />
-        ) : null}
+        ) : (
+          <View style={{height: 10}} />
+        )}
         <PriceListView
-            setFilterId={props.setFilterId}
-            filterId={props.filterId}
-            filters={props.filters}
-            dataPrice={props.dataPrice}
+          setFilterId={props.setFilterId}
+          filterId={props.filterId}
+          filters={props.filters}
+          dataPrice={props.dataPrice}
         />
       </ScrollView>
     </ImageBackground>

src/Screens/Home/SwiperComponent.js

@@ -9,6 +9,7 @@ const styles = StyleSheet.create({
   container: {
     marginHorizontal: 20,
     marginBottom: 10,
+    borderRadius: 5,
 
     height: HEIGHTXD(400),
     marginTop: 25,
@@ -42,21 +43,21 @@ const SwiperComponent = (props) => {
         autoplay={true}>
         <View style={{borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}}
             source={{uri: props.listImage[0].url}}
             resizeMode={'cover'}
           />
         </View>
         <View style={{borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}}
             source={{uri: props.listImage[1].url}}
             resizeMode={'cover'}
           />
         </View>
         <View style={{borderRadius: 10}}>
           <Image
-            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 10}}
+            style={{height: HEIGHTXD(400), width: '100%', borderRadius: 5}}
             source={{uri: props.listImage[2].url}}
             resizeMode={'cover'}
           />

src/apis/Functions/users.js

@@ -61,3 +61,8 @@ export const getNewestVersionInfo = async (body) =>
   GetData(url.urlGetNewestVersionInfo, body)
     .then((res) => res)
     .catch((err) => err);
+
+export const changeAvatart = async (body) =>
+  PostFormData(url.urlChangeAvatar, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -43,4 +43,6 @@ export default {
   //Transaction
   urlGetTransactionListByCategory: `${root}api/v1/transactions/products`,
   urlGetContractDescription: `${root}api/v1/transactions/products/specification-contract/`,
+
+  urlChangeAvatar: root + 'api/v1/customers/update-avatar',
 };

src/assets/images.js

@@ -86,6 +86,7 @@ const images = {
   iconHistoryMenu: require('./images/iconHistoryMenu1.png'),
   iconProfileMenu: require('./images/iconProfileMenu.png'),
   iconUpgrade: require('./images/iconUpgrade.png'),
+  imagePicker: require('./images/imagePicker.png'),
 };
 
 export default images;

src/components/Header/HeaderHome.js

@@ -33,7 +33,7 @@ import {
   WALLETWITHDRAW,
   PACKETCQG,
 } from '../../routers/ScreenNames';
-
+import PickerAvtart from '../../components/Picker/PickerAvatart';
 const renderWallet = (status, current_money, current_cqg_money, contract) => {
   const navigate = useNavigation();
   if (status == 6)
@@ -192,6 +192,10 @@ const HeaderHome = (props) => {
     setDetail(!detail);
   };
 
+  const onClickImage = (path) => {
+    console.log(path);
+  };
+
   const copyToClipboard = () => {
     Alert.alert(I18n.t('Notification'), I18n.t('CopyLink'));
     Clipboard.setString(props.user.sponsor_url);
@@ -209,7 +213,7 @@ const HeaderHome = (props) => {
         }}>
         <View style={styles.containerTop}>
           <View style={styles.containerInfor}>
-            <Image source={R.images.avartar} style={styles.imgAvatar} />
+            <PickerAvtart onClickImage={onClickImage} />
             <View style={styles.wrapRight}>
               <TouchableOpacity onPress={() => navigate.navigate(PROFILE)}>
                 <View style={{flexDirection: 'row', alignItems: 'center'}}>
@@ -375,6 +379,16 @@ const styles = StyleSheet.create({
     height: WIDTHXD(180),
     borderRadius: WIDTHXD(90),
   },
+  containerImg: {
+    width: WIDTHXD(180),
+    height: WIDTHXD(180),
+    backgroundColor: 'red',
+  },
+  iconImg: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
   txtMoney: {
     fontSize: getFontXD(62),
     color: '#FFB721',

src/components/Picker/PickerAvatart.js

+import React, {useState, useEffect} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Platform,
+  Alert,
+} from 'react-native';
+import R from '../../assets/R';
+import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
+import Icon from 'react-native-vector-icons/AntDesign';
+import Modal from 'react-native-modal';
+import Block from '../Block';
+import ImagePicker from 'react-native-image-crop-picker';
+import AppText from '../AppText';
+import {connect} from 'react-redux';
+import {saveUserToRedux} from '../../actions/users';
+import I18n from '../../helper/i18/i18n';
+import {useNavigation} from '@react-navigation/native';
+
+import {changeAvatart} from '../../apis/Functions/users';
+
+const options = {
+  title: 'Select Avatar',
+  customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
+  storageOptions: {
+    skipBackup: true,
+    path: 'images',
+  },
+};
+
+const PickerImg = (props) => {
+  const naviagtion = useNavigation();
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
+
+  console.log(props.user);
+  useEffect(() => {
+    setTimeout(() => {
+      console.log('Affter', props.user.picture_url);
+      setImgAvatart(props.user.picture_url);
+    }, 500);
+  }, [props.user]);
+
+  const createFormData = (photo, body) => {
+    const data = new FormData();
+    data.append('avatar', {
+      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;
+  };
+
+  const callApi = async (image) => {
+    const res = await changeAvatart(
+      createFormData(image, {uid: props.user.uid, platform: Platform.OS}),
+    );
+
+    if (res.data.code == 200) {
+      setTimeout(() => {
+        props.saveUserToRedux(res.data.data);
+        Alert.alert(I18n.t('Notification'), res.data.message);
+      }, 500);
+    } else {
+      setTimeout(() => {
+        Alert.alert(I18n.t('Notification'), res.data.message);
+      }, 500);
+    }
+  };
+
+  const onchoosGalery = () => {
+    ImagePicker.openPicker({
+      mediaType: 'photo',
+      multiple: false,
+      cropping: true,
+      width: 300,
+      height: 300,
+    }).then((image) => {
+      setModalVisible(false);
+      callApi(image.path);
+    });
+  };
+
+  const onCapture = () => {
+    ImagePicker.openCamera({
+      mediaType: 'photo',
+      multiple: false,
+      width: 300,
+      height: 300,
+      cropping: true,
+    }).then((image) => {
+      setModalVisible(false);
+      callApi(image.path);
+    });
+  };
+  return (
+    <TouchableOpacity onPress={() => setModalVisible(true)}>
+      <View style={styles.containerImg}>
+        <Image source={{uri: imgAvatart}} style={styles.imgAvatar} />
+        <View style={styles.iconPicker}>
+          <Image
+            style={{width: 20, height: 20}}
+            source={R.images.imagePicker}
+          />
+        </View>
+      </View>
+      <Modal
+        isVisible={isModalVisible}
+        style={{margin: 0, justifyContent: 'flex-end'}}
+        onSwipeComplete={() => setModalVisible(false)}
+        swipeDirection={['up', 'left', 'right', 'down']}>
+        <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
+          <View style={{flex: 1}}></View>
+        </TouchableWithoutFeedback>
+
+        <View style={styles.containerSelect}>
+          <AppText
+            i18nKey={'Select_source_image'}
+            style={{
+              textAlign: 'center',
+              fontSize: getFontXD(42),
+              fontWeight: 'bold',
+              color: '#1473E6',
+            }}
+          />
+
+          <View style={styles.line} />
+          <Block row space={'around'} center>
+            <TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
+              <Image style={styles.imgIcon} source={R.images.iconCamera} />
+
+              <AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn} />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.selectionImg}
+              onPress={onchoosGalery}>
+              <Image style={styles.imgIcon} source={R.images.iconImg} />
+
+              <AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn} />
+            </TouchableOpacity>
+          </Block>
+        </View>
+      </Modal>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: WIDTHXD(350),
+    height: HEIGHTXD(280),
+    backgroundColor: R.colors.white,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#DBDBDB',
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  txt: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginBottom: 5,
+    paddingLeft: 10,
+  },
+  selectionImg: {
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerSelect: {
+    height: HEIGHTXD(520),
+    backgroundColor: 'white',
+    paddingTop: 10,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  line: {
+    height: 1,
+    backgroundColor: '#929292',
+    width: '100%',
+    marginTop: 5,
+  },
+  imgIcon: {
+    width: 40,
+    height: 40,
+  },
+  txtTitleBtn: {
+    textAlign: 'center',
+    fontSize: getFontXD(42),
+    color: '#1473E6',
+  },
+  imgAvatar: {
+    width: WIDTHXD(180),
+    height: WIDTHXD(180),
+    borderRadius: WIDTHXD(90),
+  },
+  containerImg: {
+    width: WIDTHXD(180),
+    height: WIDTHXD(180),
+  },
+  iconPicker: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+});
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.userReducer,
+  };
+};
+export default connect(mapStateToProps, {saveUserToRedux})(PickerImg);

src/components/Picker/PickerImg.js

@@ -35,6 +35,7 @@ const PickerImg = (props) => {
     ImagePicker.openPicker({
       mediaType: 'photo',
       multiple: true,
+      cropping: true,
     }).then((images) => {
       setModalVisible(false);
 
@@ -48,6 +49,7 @@ const PickerImg = (props) => {
       mediaType: 'photo',
       width: 300,
       height: 400,
+      cropping: true,
     }).then((image) => {
       setModalVisible(false);
 

src/components/Picker/PickerImgUni.js

@@ -50,6 +50,7 @@ const PickerImgUni = (props) => {
     ImagePicker.openPicker({
       mediaType: 'photo',
       multiple: false,
+      cropping: true,
     }).then((image) => {
       setModalVisible(false);
       setUrlImg(image.path);
@@ -63,6 +64,7 @@ const PickerImgUni = (props) => {
       mediaType: 'photo',
       width: 300,
       height: 400,
+      cropping: true,
     }).then((image) => {
       setModalVisible(false);
       setUrlImg(image.path);

src/components/SnackBar.js

@@ -38,8 +38,10 @@ const SnackBar = (props) => {
       isVisible={isOpen}>
       <View style={styles.container}>
         <View style={{flex: 1}}>
-          <Text style={styles.txtTitle}>{title}</Text>
-          <Text numberOfLines={2} style={styles.txt}>
+          <Text numberOfLines={1} style={styles.txtTitle}>
+            {title}
+          </Text>
+          <Text numberOfLines={3} style={styles.txt}>
             {content}
           </Text>
         </View>