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 [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

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