Merge branch 'dev_phase2' of http://git.dcv.vn/tdgiangdev/InvestCustomer into dev_phase2

src/Screens/Home/Home.js

@@ -17,7 +17,15 @@ const Home = (props) => {
     const [dataPriceFilter, setDataPriceFilter] = useState([]);
     const [listImage, setListImage] = useState([]);
     const [filters, setFilters] = useState([]);
-    const [filterId, setFilterId] = useState(-1);
+    const [filterId, setFilterId] = useState(null);
+    const [isSortName, setIsSortName] = useState(null);
+    const [isSortPercent, setIsSortPercent] = useState(null);
+    const [isSortPriceOpenClose, setIsSortPriceOpenClose] = useState(null);
+    const [isSortPriceHighLow, setIsSortPriceHighLow] = useState(null);
+    const SORT_TYPE = {
+        DESC: 'DESC',
+        ASC: 'ASC'
+    }
     useEffect(() => {
         getData();
         initSocket();
@@ -91,6 +99,51 @@ const Home = (props) => {
         console.log(id, newList);
     };
 
+    const onSortByName = () => {
+        let type = 'ASC'
+        if(!isSortName || isSortName == SORT_TYPE.ASC) type = SORT_TYPE.DESC
+        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.name > b.name ? 1 : -1 )
+            : [...dataPriceFilter].sort((a, b) => a.name < b.name ? 1 : -1 )
+        setDataPriceFilter(newData)
+        setIsSortPriceOpenClose(null)
+        setIsSortName(type)
+        setIsSortPercent(null)
+        setIsSortPriceHighLow(null)
+    }
+    const onSortByPercent = () => {
+        let type = 'ASC'
+        if(!isSortPercent || isSortPercent == SORT_TYPE.ASC) type = SORT_TYPE.DESC
+        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.change > b.change ? 1 : -1 )
+            : [...dataPriceFilter].sort((a, b) => a.change < b.change ? 1 : -1 )
+        setDataPriceFilter(newData)
+        setIsSortPriceOpenClose(null)
+        setIsSortName(null)
+        setIsSortPercent(type)
+        setIsSortPriceHighLow(null)
+    }
+    const onSortByPriceOpenClose = () => {
+        let type = 'ASC'
+        if(!isSortPriceOpenClose || isSortPriceOpenClose == SORT_TYPE.ASC) type = SORT_TYPE.DESC
+        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.open_price > b.open_price ? 1 : -1 )
+            : [...dataPriceFilter].sort((a, b) => a.open_price < b.open_price ? 1 : -1 )
+        setDataPriceFilter(newData)
+        setIsSortPriceOpenClose(type)
+        setIsSortName(null)
+        setIsSortPercent(null)
+        setIsSortPriceHighLow(null)
+    }
+    const onSortByPriceHighLow = () => {
+        let type = 'ASC'
+        if(!isSortPriceHighLow || isSortPriceHighLow == SORT_TYPE.ASC) type = SORT_TYPE.DESC
+        let newData = type == SORT_TYPE.ASC ? [...dataPriceFilter].sort((a, b) => a.high_price > b.high_price ? 1 : -1 )
+            : [...dataPriceFilter].sort((a, b) => a.high_price < b.high_price ? 1 : -1 )
+        setDataPriceFilter(newData)
+        setIsSortPriceOpenClose(null)
+        setIsSortName(null)
+        setIsSortPercent(null)
+        setIsSortPriceHighLow(type)
+    }
+
     return <HomeView
         data={data}
         dataPrice={dataPriceFilter}
@@ -98,6 +151,10 @@ const Home = (props) => {
         filterId={filterId}
         filters={filters}
         setFilterId={changeFilter}
+        onSortByName={onSortByName}
+        onSortByPercent={onSortByPercent}
+        onSortByPriceOpenClose={onSortByPriceOpenClose}
+        onSortByPriceHighLow={onSortByPriceHighLow}
     />;
 };
 

src/Screens/Home/HomeView.js

@@ -29,6 +29,10 @@ const HomeView = (props) => {
           filterId={props.filterId}
           filters={props.filters}
           dataPrice={props.dataPrice}
+          onSortByName={props.onSortByName}
+          onSortByPercent={props.onSortByPercent}
+          onSortByPriceOpenClose={props.onSortByPriceOpenClose}
+          onSortByPriceHighLow={props.onSortByPriceHighLow}
         />
       </ScrollView>
     </ImageBackground>

src/Screens/Home/PriceListView.js

@@ -15,7 +15,7 @@ import {PRODUCTDETAIL} from '../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
 const PriceListView = (props) => {
-    const {setFilterId, filters, dataPrice, filterId} = props;
+    const {setFilterId, filters, dataPrice, filterId, onSortByName, onSortByPercent, onSortByPriceOpenClose, onSortByPriceHighLow} = props;
     const navigate = useNavigation();
     return (
         <View style={{flex: 1}}>
@@ -44,6 +44,7 @@ const PriceListView = (props) => {
                 data={dataPrice}
                 ListHeaderComponent={() =>
                     <View style={[styles.container]}>
+                        <TouchableOpacity style={{flex: 0.3}} onPress={() => onSortByName()}>
                             <View style={[styles.headerContent, {
                                 flex: 0.3,
                                 justifyContent: 'flex-start',
@@ -52,18 +53,25 @@ const PriceListView = (props) => {
                                 <Text>Tên</Text>
                                 <Image source={R.images.iconSort} style={styles.imgIcon}/>
                             </View>
-                        <View style={[styles.headerContent, {flex: 1.5}]}>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={[styles.headerContent, {flex: 1.5}]} onPress={() => onSortByPercent()}>
+                            <View style={[styles.headerContent]}>
                                 <Text>Tỷ lệ thay đổi</Text>
                                 <Image source={R.images.iconSort} style={styles.imgIcon}/>
                             </View>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.headerContent} onPress={() => onSortByPriceOpenClose()}>
                             <View style={[styles.headerContent]}>
                                 <Text>Giá mở/đóng</Text>
                                 <Image source={R.images.iconSort} style={styles.imgIcon}/>
                             </View>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={{flex: 1}} onPress={() => onSortByPriceHighLow()}>
                             <View style={[styles.headerContent]}>
                                 <Text>Giá cao/thấp</Text>
                                 <Image source={R.images.iconSort} style={styles.imgIcon}/>
                             </View>
+                        </TouchableOpacity>
                     </View>}
                 renderItem={({item}) => <ItemPrice item={item}
                                                    onPress={() => navigate.navigate(PRODUCTDETAIL, {

src/components/Header/Drawer.js

@@ -155,12 +155,13 @@ const menus = [
 ];
 
 const Drawer = (props) => {
+  const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
   const navigate = useNavigation();
   const [listMenu, setListMenu] = useState(menus);
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Image source={R.images.avartar} style={styles.imgAvatar} />
+        <Image source={imgAvatart ? {uri: imgAvatart} : R.images.avartar} style={styles.imgAvatar} />
         <TouchableOpacity
           onPress={() => {
             props.toggleModal();

src/components/Picker/PickerAvatart.js

@@ -37,7 +37,6 @@ const PickerImg = (props) => {
     const naviagtion = useNavigation();
     const [isModalVisible, setModalVisible] = useState(false);
     const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
-
     //   useEffect(() => {
     //     setTimeout(() => {
     //       console.log('Affter', props.user.picture_url);
@@ -63,10 +62,10 @@ const PickerImg = (props) => {
         const res = await changeAvatart(
             createFormData(image, {uid: props.user.uid, platform: Platform.OS}),
         );
-    console.log('upload avatar', res)
+        console.log('upload avatar', res);
         props.hideLoading();
         if (res?.status == 200 && res.data) {
-      if(res.data.code == 200) {
+            if (res.data.code == 200) {
                 setTimeout(() => {
                     props.saveUserToRedux(res.data.data);
                     Alert.alert(I18n.t('Notification'), res.data.message);
@@ -115,11 +114,11 @@ const PickerImg = (props) => {
     return (
         <TouchableOpacity onPress={() => setModalVisible(true)}>
             <View style={styles.containerImg}>
-        {imgAvatart ? (
-          <Image source={{uri: imgAvatart}} style={styles.imgAvatar} />
-        ) : (
-          <View style={styles.imgAvatar} />
-        )}
+                {/*{imgAvatart ? (*/}
+                    <Image source={imgAvatart ? {uri: imgAvatart} : R.images.avartar} style={styles.imgAvatar}/>
+                {/*) : (*/}
+                {/*    <View style={styles.imgAvatar}/>*/}
+                {/*)}*/}
 
                 <View style={styles.iconPicker}>
                     <Image
@@ -149,19 +148,19 @@ const PickerImg = (props) => {
                         }}
                     />
 
-          <View style={styles.line} />
+                    <View style={styles.line}/>
                     <Block row space={'around'} center>
                         <TouchableOpacity style={styles.selectionImg} onPress={onCapture}>
-              <Image style={styles.imgIcon} source={R.images.iconCamera} />
+                            <Image style={styles.imgIcon} source={R.images.iconCamera}/>
 
-              <AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn} />
+                            <AppText i18nKey={'Take_photo'} style={styles.txtTitleBtn}/>
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={styles.selectionImg}
                             onPress={onchoosGalery}>
-              <Image style={styles.imgIcon} source={R.images.iconImg} />
+                            <Image style={styles.imgIcon} source={R.images.iconImg}/>
 
-              <AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn} />
+                            <AppText i18nKey={'Photo_library'} style={styles.txtTitleBtn}/>
                         </TouchableOpacity>
                     </Block>
                 </View>