Merge branch 'phase2_home' into 'dev_phase2'

Phase2 home

See merge request !11

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 [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'],
@@ -232,14 +35,16 @@ const Home = (props) => {
             reconnect: true,
         });
         socket.on('response-update-price', (message) => {
-      console.log('received message', message);
+            receivedMessage(message);
         });
-  }, []);
+    };
 
-  const onReceivedMessage = (message) => {
-    console.log(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);
@@ -268,18 +73,32 @@ const Home = (props) => {
         } 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 changeFilter = (id) => {
+        setFilterId(id);
+        const newList = id == -1 ? [...dataPrice] : _.filter([...dataPrice], item => item.category_id == id);
+        setDataPriceFilter(newList);
+        console.log(id, newList);
     };
 
-  return (
-    <HomeView
+    return <HomeView
         data={data}
-      dataPrice={dataPrice}
+        dataPrice={dataPriceFilter}
         listImage={listImage}
         filterId={filterId}
         filters={filters}
-      setFilterId={setFilterId}
-    />
-  );
+        setFilterId={changeFilter}
+    />;
 };
 
 const mapStateToProps = (state) => {
@@ -287,4 +106,4 @@ const mapStateToProps = (state) => {
         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

+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',