Skip to content

I
InvestCustomer
Commit 49c2f416 by Nguyễn Thị Thúy
Options

sort data home

parent c3631d0b
Showing with 294 additions and 225 deletions
src/Screens/Home/Home.js
...@@ -17,7 +17,15 @@ const Home = (props) => { ...@@ -17,7 +17,15 @@ const Home = (props) => {
const [dataPriceFilter, setDataPriceFilter] = useState([]); const [dataPriceFilter, setDataPriceFilter] = useState([]);
const [listImage, setListImage] = useState([]); const [listImage, setListImage] = useState([]);
const [filters, setFilters] = 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(() => { useEffect(() => {
getData(); getData();
initSocket(); initSocket();
...@@ -91,6 +99,51 @@ const Home = (props) => { ...@@ -91,6 +99,51 @@ const Home = (props) => {
console.log(id, newList); 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 return <HomeView
data={data} data={data}
dataPrice={dataPriceFilter} dataPrice={dataPriceFilter}
...@@ -98,6 +151,10 @@ const Home = (props) => { ...@@ -98,6 +151,10 @@ const Home = (props) => {
filterId={filterId} filterId={filterId}
filters={filters} filters={filters}
setFilterId={changeFilter} setFilterId={changeFilter}
onSortByName={onSortByName}
onSortByPercent={onSortByPercent}
onSortByPriceOpenClose={onSortByPriceOpenClose}
onSortByPriceHighLow={onSortByPriceHighLow}
/>; />;
}; };
......
src/Screens/Home/HomeView.js
...@@ -29,6 +29,10 @@ const HomeView = (props) => { ...@@ -29,6 +29,10 @@ const HomeView = (props) => {
filterId={props.filterId} filterId={props.filterId}
filters={props.filters} filters={props.filters}
dataPrice={props.dataPrice} dataPrice={props.dataPrice}
onSortByName={props.onSortByName}
onSortByPercent={props.onSortByPercent}
onSortByPriceOpenClose={props.onSortByPriceOpenClose}
onSortByPriceHighLow={props.onSortByPriceHighLow}
/> />
</ScrollView> </ScrollView>
</ImageBackground> </ImageBackground>
......
src/Screens/Home/PriceListView.js
...@@ -15,7 +15,7 @@ import {PRODUCTDETAIL} from '../../routers/ScreenNames'; ...@@ -15,7 +15,7 @@ import {PRODUCTDETAIL} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const PriceListView = (props) => { const PriceListView = (props) => {
const {setFilterId, filters, dataPrice, filterId} = props; const {setFilterId, filters, dataPrice, filterId, onSortByName, onSortByPercent, onSortByPriceOpenClose, onSortByPriceHighLow} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -44,26 +44,34 @@ const PriceListView = (props) => { ...@@ -44,26 +44,34 @@ const PriceListView = (props) => {
data={dataPrice} data={dataPrice}
ListHeaderComponent={() => ListHeaderComponent={() =>
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={[styles.headerContent, { <TouchableOpacity style={{flex: 0.3}} onPress={() => onSortByName()}>
flex: 0.3, <View style={[styles.headerContent, {
justifyContent: 'flex-start', flex: 0.3,
alignItems: 'center', justifyContent: 'flex-start',
}]}> alignItems: 'center',
<Text>Tên</Text> }]}>
<Image source={R.images.iconSort} style={styles.imgIcon}/> <Text>Tên</Text>
</View> <Image source={R.images.iconSort} style={styles.imgIcon}/>
<View style={[styles.headerContent, {flex: 1.5}]}> </View>
<Text>Tỷ lệ thay đổi</Text> </TouchableOpacity>
<Image source={R.images.iconSort} style={styles.imgIcon}/> <TouchableOpacity style={[styles.headerContent, {flex: 1.5}]} onPress={() => onSortByPercent()}>
</View> <View style={[styles.headerContent]}>
<View style={[styles.headerContent]}> <Text>Tỷ lệ thay đổi</Text>
<Text>Giá mở/đóng</Text> <Image source={R.images.iconSort} style={styles.imgIcon}/>
<Image source={R.images.iconSort} style={styles.imgIcon}/> </View>
</View> </TouchableOpacity>
<View style={[styles.headerContent]}> <TouchableOpacity style={styles.headerContent} onPress={() => onSortByPriceOpenClose()}>
<Text>Giá cao/thấp</Text> <View style={[styles.headerContent]}>
<Image source={R.images.iconSort} style={styles.imgIcon}/> <Text>Giá mở/đóng</Text>
</View> <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>} </View>}
renderItem={({item}) => <ItemPrice item={item} renderItem={({item}) => <ItemPrice item={item}
onPress={() => navigate.navigate(PRODUCTDETAIL, { onPress={() => navigate.navigate(PRODUCTDETAIL, {
......
src/components/Header/Drawer.js
...@@ -155,12 +155,13 @@ const menus = [ ...@@ -155,12 +155,13 @@ const menus = [
]; ];
const Drawer = (props) => { const Drawer = (props) => {
const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
const navigate = useNavigation(); const navigate = useNavigation();
const [listMenu, setListMenu] = useState(menus); const [listMenu, setListMenu] = useState(menus);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.header}> <View style={styles.header}>
<Image source={R.images.avartar} style={styles.imgAvatar} /> <Image source={imgAvatart ? {uri: imgAvatart} : R.images.avartar} style={styles.imgAvatar} />
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
props.toggleModal(); props.toggleModal();
......
src/components/Picker/PickerAvatart.js
import React, {useState, useEffect} from 'react'; import React, {useState, useEffect} from 'react';
import { import {
View, View,
Text, Text,
Image, Image,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
TouchableWithoutFeedback, TouchableWithoutFeedback,
Platform, Platform,
Alert, Alert,
} from 'react-native'; } from 'react-native';
import R from '../../assets/R'; import R from '../../assets/R';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions'; import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
...@@ -25,219 +25,218 @@ import {changeAvatart} from '../../apis/Functions/users'; ...@@ -25,219 +25,218 @@ import {changeAvatart} from '../../apis/Functions/users';
import {showLoading, hideLoading} from '../../actions/loadingAction'; import {showLoading, hideLoading} from '../../actions/loadingAction';
const options = { const options = {
title: 'Select Avatar', title: 'Select Avatar',
customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}], customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],
storageOptions: { storageOptions: {
skipBackup: true, skipBackup: true,
path: 'images', path: 'images',
}, },
}; };
const PickerImg = (props) => { const PickerImg = (props) => {
const naviagtion = useNavigation(); const naviagtion = useNavigation();
const [isModalVisible, setModalVisible] = useState(false); const [isModalVisible, setModalVisible] = useState(false);
const [imgAvatart, setImgAvatart] = useState(props.user.picture_url); const [imgAvatart, setImgAvatart] = useState(props.user.picture_url);
// useEffect(() => {
// setTimeout(() => {
// console.log('Affter', props.user.picture_url);
// setImgAvatart(props.user.picture_url);
// }, 500);
// }, [props.user]);
// useEffect(() => { const createFormData = (photo, body) => {
// setTimeout(() => { const data = new FormData();
// console.log('Affter', props.user.picture_url); data.append('avatar', {
// setImgAvatart(props.user.picture_url); name: 'sign_img.jpg',
// }, 500); type: 'image/jpg',
// }, [props.user]); uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''),
});
Object.keys(body).forEach((key) => {
data.append(key, body[key]);
});
return data;
};
const createFormData = (photo, body) => { const callApi = async (image) => {
const data = new FormData(); props.showLoading();
data.append('avatar', { const res = await changeAvatart(
name: 'sign_img.jpg', createFormData(image, {uid: props.user.uid, platform: Platform.OS}),
type: 'image/jpg', );
uri: Platform.OS === 'android' ? photo : photo.replace('file://', ''), console.log('upload avatar', res);
}); props.hideLoading();
Object.keys(body).forEach((key) => { if (res?.status == 200 && res.data) {
data.append(key, body[key]); if (res.data.code == 200) {
}); setTimeout(() => {
return data; props.saveUserToRedux(res.data.data);
}; Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
}
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), 'upload fail');
}, 500);
}
};
const callApi = async (image) => { const onchoosGalery = () => {
props.showLoading(); ImagePicker.openPicker({
const res = await changeAvatart( mediaType: 'photo',
createFormData(image, {uid: props.user.uid, platform: Platform.OS}), multiple: false,
); cropping: true,
console.log('upload avatar', res) width: 300,
props.hideLoading(); height: 300,
if (res?.status == 200 && res.data) { }).then((image) => {
if(res.data.code == 200) { setModalVisible(false);
setTimeout(() => { callApi(image.path);
props.saveUserToRedux(res.data.data); setImgAvatart(image.path);
Alert.alert(I18n.t('Notification'), res.data.message); });
}, 500); };
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), res.data.message);
}, 500);
}
} else {
setImgAvatart(props.user.picture_url);
setTimeout(() => {
Alert.alert(I18n.t('Notification'), 'upload fail');
}, 500);
}
};
const onchoosGalery = () => {
ImagePicker.openPicker({
mediaType: 'photo',
multiple: false,
cropping: true,
width: 300,
height: 300,
}).then((image) => {
setModalVisible(false);
callApi(image.path);
setImgAvatart(image.path);
});
};
const onCapture = () => { const onCapture = () => {
ImagePicker.openCamera({ ImagePicker.openCamera({
mediaType: 'photo', mediaType: 'photo',
multiple: false, multiple: false,
width: 300, width: 300,
height: 300, height: 300,
cropping: true, cropping: true,
}).then((image) => { }).then((image) => {
setModalVisible(false); setModalVisible(false);
callApi(image.path); callApi(image.path);
setImgAvatart(image.path); setImgAvatart(image.path);
}); });
}; };
return ( return (
<TouchableOpacity onPress={() => setModalVisible(true)}> <TouchableOpacity onPress={() => setModalVisible(true)}>
<View style={styles.containerImg}> <View style={styles.containerImg}>
{imgAvatart ? ( {/*{imgAvatart ? (*/}
<Image source={{uri: imgAvatart}} style={styles.imgAvatar} /> <Image source={imgAvatart ? {uri: imgAvatart} : R.images.avartar} style={styles.imgAvatar}/>
) : ( {/*) : (*/}
<View style={styles.imgAvatar} /> {/* <View style={styles.imgAvatar}/>*/}
)} {/*)}*/}
<View style={styles.iconPicker}> <View style={styles.iconPicker}>
<Image <Image
style={{width: 20, height: 20}} style={{width: 20, height: 20}}
source={R.images.imagePicker} source={R.images.imagePicker}
/> />
</View> </View>
</View> </View>
<Modal <Modal
isVisible={isModalVisible} isVisible={isModalVisible}
style={{margin: 0, justifyContent: 'flex-end'}} style={{margin: 0, justifyContent: 'flex-end'}}
onSwipeComplete={() => setModalVisible(false)} onSwipeComplete={() => setModalVisible(false)}
swipeDirection={['up', 'left', 'right', 'down']}> swipeDirection={['up', 'left', 'right', 'down']}>
<TouchableWithoutFeedback onPress={() => setModalVisible(false)}> <TouchableWithoutFeedback onPress={() => setModalVisible(false)}>
<View style={{flex: 1}}></View> <View style={{flex: 1}}></View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<View style={styles.containerSelect}> <View style={styles.containerSelect}>
<AppText <AppText
i18nKey={'Select_source_image'} i18nKey={'Select_source_image'}
style={{ style={{
textAlign: 'center', textAlign: 'center',
fontSize: getFontXD(42), fontSize: getFontXD(42),
fontWeight: 'bold', fontWeight: 'bold',
color: '#1473E6', color: '#1473E6',
}} }}
/> />
<View style={styles.line} /> <View style={styles.line}/>
<Block row space={'around'} center> <Block row space={'around'} center>
<TouchableOpacity style={styles.selectionImg} onPress={onCapture}> <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>
<TouchableOpacity <TouchableOpacity
style={styles.selectionImg} style={styles.selectionImg}
onPress={onchoosGalery}> 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> </TouchableOpacity>
</Block> </Block>
</View> </View>
</Modal> </Modal>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
width: WIDTHXD(350), width: WIDTHXD(350),
height: HEIGHTXD(280), height: HEIGHTXD(280),
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
borderRadius: 10, borderRadius: 10,
borderWidth: 2, borderWidth: 2,
borderColor: '#DBDBDB', borderColor: '#DBDBDB',
borderStyle: 'dashed', borderStyle: 'dashed',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
txt: { txt: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.color777, color: R.colors.color777,
marginBottom: 5, marginBottom: 5,
paddingLeft: 10, paddingLeft: 10,
}, },
selectionImg: { selectionImg: {
padding: 10, padding: 10,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
containerSelect: { containerSelect: {
height: HEIGHTXD(520), height: HEIGHTXD(520),
backgroundColor: 'white', backgroundColor: 'white',
paddingTop: 10, paddingTop: 10,
borderTopLeftRadius: 20, borderTopLeftRadius: 20,
borderTopRightRadius: 20, borderTopRightRadius: 20,
}, },
line: { line: {
height: 1, height: 1,
backgroundColor: '#929292', backgroundColor: '#929292',
width: '100%', width: '100%',
marginTop: 5, marginTop: 5,
}, },
imgIcon: { imgIcon: {
width: 40, width: 40,
height: 40, height: 40,
}, },
txtTitleBtn: { txtTitleBtn: {
textAlign: 'center', textAlign: 'center',
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: '#1473E6', color: '#1473E6',
}, },
imgAvatar: { imgAvatar: {
width: WIDTHXD(180), width: WIDTHXD(180),
height: WIDTHXD(180), height: WIDTHXD(180),
borderRadius: WIDTHXD(90), borderRadius: WIDTHXD(90),
}, },
containerImg: { containerImg: {
width: WIDTHXD(180), width: WIDTHXD(180),
height: WIDTHXD(180), height: WIDTHXD(180),
}, },
iconPicker: { iconPicker: {
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
right: 0, right: 0,
}, },
}); });
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
user: state.userReducer, user: state.userReducer,
}; };
}; };
export default connect(mapStateToProps, { export default connect(mapStateToProps, {
saveUserToRedux, saveUserToRedux,
showLoading, showLoading,
hideLoading, hideLoading,
})(PickerImg); })(PickerImg);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment