Skip to content

I
InvestCustomer
Commit 1edf87d5 by Nguyễn Thị Thúy
Options

Merge branch 'phase2_home' into 'dev_phase2' 

Phase2 home

See merge request !9
parents 28959be9 72e51c6d
Showing with 395 additions and 30 deletions
package.json
......@@ -43,6 +43,7 @@
"react-native-modal": "^11.7.0",
"react-native-modal-dropdown": "^1.0.0",
"react-native-ratings": "^8.0.4",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1",
......@@ -55,7 +56,8 @@
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"sha256": "^0.2.0"
"sha256": "^0.2.0",
"socket.io-client": "2.3.0"
},
"devDependencies": {
"@babel/core": "^7.13.1",
......
src/Screens/Home/Home.js
import React, {useEffect, useState} from 'react';
import {View, Alert} from 'react-native';
import {View, Alert, Platform} from 'react-native';
import {connect} from 'react-redux';
import {getTransaction} from '../../apis/Functions/users';
import {getImagesHome} from '../../apis/Functions/General';
import I18n from '../../helper/i18/i18n';
import HomeView from './HomeView';
import {useNavigation} from '@react-navigation/native';
import {AccountVerification, PACKETCQG} from '../../routers/ScreenNames';
import {getListCategoryProduct} from '../../apis/Functions/Transaction';
const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [listImage, setListImage] = useState([]);
useEffect(() => {
getData();
}, []);
const getData = async () => {
const res = await getTransaction({});
if (res.data.code == 200 && res.data.data) {
setData(res.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [dataPrice, setDataPrice] = useState([
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.6, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.9, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.7, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.8, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
]);
const [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]);
const [filterId, setFilterId] = useState(-1);
useEffect(() => {
getData();
let io = require('socket.io-client');
let socket = io.connect('http://222.252.22.174:8087', { transports: ['websocket'], jsonp: false, reconnect: true });
socket.on('response-update-price', (message) => {
console.log('received message', message)
});
}, []);
const res1 = await getImagesHome({});
if (res1.data.code == 200 && res1.data.data) {
setListImage(res1.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
const onReceivedMessage = (message) => {
console.log(message)
}
};
const getData = async () => {
const res = await getTransaction({});
if (res.data.code == 200 && res.data.data) {
setData(res.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
const res1 = await getImagesHome({});
if (res1.data.code == 200 && res1.data.data) {
setListImage(res1.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
const resCategoryProduct = await getListCategoryProduct({
keyword: '',
platform: Platform.OS,
page_size: 20,
page_index: 1,
type: 'PRODUCT',
});
console.log(resCategoryProduct)
if ((resCategoryProduct.data.code = 200 && resCategoryProduct.data.data)) {
let data = [];
data.push({id: -1, name: 'All'});
setFilters(data.concat([...resCategoryProduct.data.data]));
} else {
Alert.alert(I18n.t('Notification'), res.data.message);
}
};
return <HomeView data={data} listImage={listImage} />;
return <HomeView
data={data}
dataPrice={dataPrice}
listImage={listImage}
filterId={filterId}
filters={filters}
setFilterId={setFilterId}
/>;
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(Home);
src/Screens/Home/HomeView.js
......@@ -12,9 +12,9 @@ import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
import AppText from '../../components/AppText';
import SwiperComponent from './SwiperComponent';
import PriceListView from './PriceListView';
const HomeView = (props) => {
const {total_deposit, total_withdraw} = props.data;
return (
<ImageBackground
source={R.images.bgHome}
......@@ -25,8 +25,12 @@ const HomeView = (props) => {
{props.listImage.length > 0 ? (
<SwiperComponent listImage={props.listImage} />
) : null}
<Footer />
<PriceListView
setFilterId={props.setFilterId}
filterId={props.filterId}
filters={props.filters}
dataPrice={props.dataPrice}
/>
</ScrollView>
</ImageBackground>
);
......
src/Screens/Home/ItemPrice.js 0 → 100644
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Alert,
} from 'react-native';
import {
getFontXD,
HEIGHTXD,
WIDTHXD,
} from '../../Config/Functions';
import R from '../../assets/R';
import Block from '../../components/Block';
import AntDesign from 'react-native-vector-icons/AntDesign';
import * as Progress from 'react-native-progress';
const ItemPrice = (props) => {
const {item, isEndItem} = props;
return (
<View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}, {paddingBottom: HEIGHTXD(20)}]}>
<Block flex={1} row>
<View style={{flex: 0.8, flexDirection: 'column', justifyContent: 'center'}}>
<Text style={[styles.txtBlack, {marginBottom: HEIGHTXD(5)}]}>
{item.name}
</Text>
<Progress.Bar progress={item.change}
width={WIDTHXD(200)}
height={HEIGHTXD(8)}
color={R.colors.green}
backgroundColor={R.colors.red}
borderWidth={0}
borderRadius={0}
/>
</View>
<Block padding={[0, 0]} space={'between'} flex={1}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<AntDesign
name="caretup"
size={WIDTHXD(25)}
color={R.colors.green}
/>
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}>
{item.change}
</Text>
</View>
<Text style={[styles.txtMoney, {color: R.colors.green}]}>{`${item.change}%`}</Text>
</View>
</Block>
<Block padding={[0, 0]} space={'between'} flex={1}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}
ellipsizeMode='tail'>
{item.openPrice}
</Text>
<AntDesign
name="caretup"
size={WIDTHXD(25)}
color={R.colors.green}
/>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<AntDesign
name="check"
size={WIDTHXD(25)}
color={R.colors.gray}
/>
</View>
</View>
</Block>
<Block padding={[0, 0]} flex={1}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-end',
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}>
{item.highPrice}
</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
H
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={styles.txtMoney}>{item.lowPrice}</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
L
</Text>
</View>
</View>
</Block>
</Block>
<Text style={[styles.txtTime]}>
{item.time}</Text>
<View style={{height: HEIGHTXD(1), backgroundColor: R.colors.gray, marginTop: HEIGHTXD(3), marginBottom: HEIGHTXD(3)}}></View>
</View>
);
};
export default ItemPrice;
const styles = StyleSheet.create({
container: {
shadowColor: '#000',
backgroundColor: R.colors.white,
borderRadius: HEIGHTXD(30),
marginHorizontal: WIDTHXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(36),
color: 'black',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(34),
color: 'black',
},
txtGray: {
fontSize: getFontXD(28),
color: R.colors.gray,
},
txtTime: {
marginTop: HEIGHTXD(6),
fontSize: getFontXD(32),
color: 'black',
},
imgIcon: {
width: WIDTHXD(150),
height: WIDTHXD(150),
resizeMode: 'cover',
marginLeft: WIDTHXD(35),
},
txtMoney: {
fontSize: getFontXD(34),
},
});
src/Screens/Home/PriceListView.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
ScrollView,
} from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import ItemPrice from './ItemPrice';
const PriceListView = (props) => {
const {setFilterId, filters, dataPrice, filterId} = props;
return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{filters?.map((e) => (
<TouchableOpacity
key={e.id}
onPress={() => setFilterId(e.id)}
style={[
styles.itemFillter,
filterId == e.id ? {borderColor: '#1473E6'} : null,
]}>
<Text
style={[
styles.txtFillter,
filterId == e.id ? {color: '#1473E6'} : {},
]}>{e.name}</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
<FlatList
style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
keyExtractor={(item) => item.id}
data={dataPrice}
ListHeaderComponent={() =>
<View style={[styles.container]}>
<View style={[styles.headerContent, {flex: 0.8, justifyContent: 'flex-start'}]}>
<Text>Tên</Text>
</View>
<View style={[styles.headerContent]}>
<Text>Tỷ lệ thay đổi</Text>
</View>
<View style={[styles.headerContent]}>
<Text>Giá mở/đóng</Text>
</View>
<View style={[styles.headerContent]}>
<Text>Giá cao/thấp</Text>
</View>
</View>}
renderItem={({item}) => <ItemPrice item={item}/>}
/>
</View>
);
};
const styles = StyleSheet.create({
headerContainer: {
paddingVertical: 10,
backgroundColor: 'white',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
},
itemFillter: {
borderRadius: WIDTHXD(40),
paddingVertical: HEIGHTXD(10),
paddingHorizontal: WIDTHXD(25),
borderWidth: 1,
borderColor: '#929292',
justifyContent: 'center',
alignItems: 'center',
marginRight: WIDTHXD(20),
},
txtFillter: {
fontSize: getFontXD(36),
color: '#929292',
fontWeight: 'bold',
},
txtTitle: {
fontSize: getFontXD(39),
fontWeight: 'bold',
},
container: {
flex: 1,
flexDirection: 'row',
marginHorizontal: WIDTHXD(30),
marginBottom: HEIGHTXD(10)
},
headerContent: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
},
});
export default PriceListView;
src/assets/colors.js
......@@ -35,6 +35,7 @@ const colors = {
accent: '#A60014',
primary: '#0AC4BA',
secondary: '#00b33c',
green: '#08C708',
tertiary: '#FFE358',
black: '#000000',
white: '#FFFFFF',
......
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