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 @@ ...@@ -43,6 +43,7 @@
"react-native-modal": "^11.7.0", "react-native-modal": "^11.7.0",
"react-native-modal-dropdown": "^1.0.0", "react-native-modal-dropdown": "^1.0.0",
"react-native-ratings": "^8.0.4", "react-native-ratings": "^8.0.4",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2", "react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9", "react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1", "react-native-screens": "^2.17.1",
...@@ -55,7 +56,8 @@ ...@@ -55,7 +56,8 @@
"react-redux": "^7.2.2", "react-redux": "^7.2.2",
"redux": "^4.0.5", "redux": "^4.0.5",
"redux-saga": "^1.1.3", "redux-saga": "^1.1.3",
"sha256": "^0.2.0" "sha256": "^0.2.0",
"socket.io-client": "2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.13.1", "@babel/core": "^7.13.1",
......
src/Screens/Home/Home.js
import React, {useEffect, useState} from 'react'; 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 {connect} from 'react-redux';
import {getTransaction} from '../../apis/Functions/users'; import {getTransaction} from '../../apis/Functions/users';
import {getImagesHome} from '../../apis/Functions/General'; import {getImagesHome} from '../../apis/Functions/General';
import I18n from '../../helper/i18/i18n'; import I18n from '../../helper/i18/i18n';
import HomeView from './HomeView'; import HomeView from './HomeView';
import {useNavigation} from '@react-navigation/native'; import {getListCategoryProduct} from '../../apis/Functions/Transaction';
import {AccountVerification, PACKETCQG} from '../../routers/ScreenNames';
const Home = (props) => { const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0}); const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [listImage, setListImage] = useState([]); const [dataPrice, setDataPrice] = useState([
useEffect(() => { {name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
getData(); {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'},
const getData = async () => { {name: 'GCEM21', change: 0.6, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
const res = await getTransaction({}); {name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
if (res.data.code == 200 && res.data.data) { {name: 'GCEM21', change: 0.9, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
setData(res.data.data); {name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
} else { {name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data')); {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({}); const onReceivedMessage = (message) => {
if (res1.data.code == 200 && res1.data.data) { console.log(message)
setListImage(res1.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
} }
}; 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) => { const mapStateToProps = (state) => {
return { return {
user: state.userReducer, user: state.userReducer,
}; };
}; };
export default connect(mapStateToProps, {})(Home); export default connect(mapStateToProps, {})(Home);
src/Screens/Home/HomeView.js
...@@ -12,9 +12,9 @@ import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions'; ...@@ -12,9 +12,9 @@ import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
import R from '../../assets/R'; import R from '../../assets/R';
import AppText from '../../components/AppText'; import AppText from '../../components/AppText';
import SwiperComponent from './SwiperComponent'; import SwiperComponent from './SwiperComponent';
import PriceListView from './PriceListView';
const HomeView = (props) => { const HomeView = (props) => {
const {total_deposit, total_withdraw} = props.data;
return ( return (
<ImageBackground <ImageBackground
source={R.images.bgHome} source={R.images.bgHome}
...@@ -25,8 +25,12 @@ const HomeView = (props) => { ...@@ -25,8 +25,12 @@ const HomeView = (props) => {
{props.listImage.length > 0 ? ( {props.listImage.length > 0 ? (
<SwiperComponent listImage={props.listImage} /> <SwiperComponent listImage={props.listImage} />
) : null} ) : null}
<PriceListView
<Footer /> setFilterId={props.setFilterId}
filterId={props.filterId}
filters={props.filters}
dataPrice={props.dataPrice}
/>
</ScrollView> </ScrollView>
</ImageBackground> </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 = { ...@@ -35,6 +35,7 @@ const colors = {
accent: '#A60014', accent: '#A60014',
primary: '#0AC4BA', primary: '#0AC4BA',
secondary: '#00b33c', secondary: '#00b33c',
green: '#08C708',
tertiary: '#FFE358', tertiary: '#FFE358',
black: '#000000', black: '#000000',
white: '#FFFFFF', 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