Skip to content

I
InvestCustomer
Commit 8d03e0b3 by Nguyễn Thị Thúy
Options

Merge branch 'phase2_home' into 'dev_phase2' 

Phase2 home

See merge request !11
parents dc328c41 f362a5d6
Showing with 112 additions and 287 deletions
src/Screens/Home/Home.js
import React, {useEffect, useState} from 'react';
import {View, Alert, Platform} from 'react-native';
import {Alert, Platform} from 'react-native';
import {connect} from 'react-redux';
import {getTransaction} from '../../apis/Functions/users';
import {getImagesHome} from '../../apis/Functions/General';
import {getPriceTable} from '../../apis/Functions/Home';
import I18n from '../../helper/i18/i18n';
import HomeView from './HomeView';
import {getListCategoryProduct} from '../../apis/Functions/Transaction';
import {hideLoading, showLoading} from '../../actions/loadingAction';
import _ from 'lodash';
const Home = (props) => {
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',
isUp: false,
},
{
name: 'GCEM21',
change: 0.5,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.1,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.6,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.3,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.9,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.2,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.3,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.5,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.1,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.7,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.4,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.5,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.5,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.8,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.3,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.4,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
{
name: 'GCEM21',
change: 0.5,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: true,
},
{
name: 'GCEM21',
change: 0.4,
changePercent: 0.1,
openPrice: 1777.2,
closePrice: 17778.3,
highPrice: 1778.9,
lowPrice: 1777,
time: 'Gold (Globex): June 2021',
isUp: false,
},
]);
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 [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [dataPrice, setDataPrice] = useState([]);
const [dataPriceFilter, setDataPriceFilter] = useState([]);
const [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]);
const [filterId, setFilterId] = useState(-1);
useEffect(() => {
getData();
initSocket();
}, []);
useEffect(() => {
const newList = filterId == -1 ? [...dataPrice] : _.filter([...dataPrice], item => item.category_id == filterId);
setDataPriceFilter(newList);
}, [dataPrice]);
const initSocket = () => {
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) => {
receivedMessage(message);
});
};
const receivedMessage = (message) => {
setDataPrice(message);
};
const getData = async () => {
props.showLoading();
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 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);
}
const resPriceHome = await getPriceTable({});
if (resPriceHome.data.code == 200 && resPriceHome.data.data) {
setDataPrice(resPriceHome.data.data);
setDataPriceFilter(resPriceHome.data.data);
} else {
Alert.alert(I18n.t('Notification'), I18n.t('Can_not_get_data'));
}
props.hideLoading();
console.log('filterId', filterId);
};
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);
}
};
const changeFilter = (id) => {
setFilterId(id);
const newList = id == -1 ? [...dataPrice] : _.filter([...dataPrice], item => item.category_id == id);
setDataPriceFilter(newList);
console.log(id, newList);
};
return (
<HomeView
data={data}
dataPrice={dataPrice}
listImage={listImage}
filterId={filterId}
filters={filters}
setFilterId={setFilterId}
/>
);
return <HomeView
data={data}
dataPrice={dataPriceFilter}
listImage={listImage}
filterId={filterId}
filters={filters}
setFilterId={changeFilter}
/>;
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(Home);
export default connect(mapStateToProps, {showLoading, hideLoading})(Home);
src/Screens/Home/HomeView.js
import React from 'react';
import {
View,
Text,
ImageBackground,
StyleSheet,
ScrollView,
} from 'react-native';
import HeaderHome from '../../components/Header/HeaderHome';
import Footer from './Footer';
import {HEIGHT, HEIGHTXD, toPriceVnd, getFontXD} from '../../Config/Functions';
import {getFontXD} from '../../Config/Functions';
import R from '../../assets/R';
import AppText from '../../components/AppText';
import SwiperComponent from './SwiperComponent';
import PriceListView from './PriceListView';
......
src/Screens/Home/ItemPrice.js
......@@ -47,12 +47,12 @@ const ItemPrice = (props) => {
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: item.isUp ? R.colors.green : R.colors.red2}]}>
<Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: item.is_up ? R.colors.green : R.colors.red2}]}>
{item.change}
</Text>
</View>
<Text style={[styles.txtMoney, {color: item.isUp ? R.colors.green : R.colors.red2}]}>{`${item.change}%`}</Text>
<Text style={[styles.txtMoney, {color: item.is_up ? R.colors.green : R.colors.red2}]}>{`${item.change_percent}%`}</Text>
</View>
</Block>
<Block padding={[0, 0]} space={'between'} flex={1}>
......@@ -73,9 +73,9 @@ const ItemPrice = (props) => {
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}
ellipsizeMode='tail'>
{item.openPrice}
{item.open_price}
</Text>
<Image source={item.isUp ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
<Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
</View>
<View
style={{
......@@ -84,7 +84,7 @@ const ItemPrice = (props) => {
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.close_price}</Text>
<Image source={R.images.iconCheck2} style={styles.imgIcon} />
</View>
</View>
......@@ -104,7 +104,7 @@ const ItemPrice = (props) => {
justifyContent: 'center',
}}>
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}>
{item.highPrice}
{item.high_price}
</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
H
......@@ -116,7 +116,7 @@ const ItemPrice = (props) => {
flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={styles.txtMoney}>{item.lowPrice}</Text>
<Text style={styles.txtMoney}>{item.low_price}</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
L
</Text>
......
src/Screens/Home/PriceListView.js
import React, {useState} from 'react';
import React, {useState, useEffect} from 'react';
import {
View,
Text,
......
src/apis/Functions/Home.js 0 → 100644
import {GetData} from '../helpers';
import url from '../url';
export const getPriceTable = async (body) =>
GetData(url.urlGetPriceTable, body)
.then((res) => res)
.catch((err) => err);
src/apis/url.js
......@@ -25,6 +25,7 @@ export default {
//Home
urlGetTransaction: root + 'api/v1/customers/statistic-transaction',
urlGetPriceTable: `${root}api/v1/customers/update-price-table`,
//History
urlGetListHistory: root + 'api/v1/customers/get-list-transaction-history',
......
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