integrate api:

- category list
- price table list

src/RootView.js

@@ -31,7 +31,7 @@ const RootView = (props) => {
 
         <StackNavigation />
       </View>
-      <VersionChecker/>
+      {/*<VersionChecker/>*/}
       <NoInternetComponent />
     </>
   );

src/Screens/Transaction/PriceList/Item.js

@@ -17,27 +17,25 @@ import R from '../../../assets/R';
 import Block from '../../../components/Block';
 
 const Item = (props) => {
-  const {item} = props;
+  const {item, isEndItem} = props;
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}]}>
       <TouchableOpacity onPress={() => props.onPress(item)}>
         <Block flex={1} row>
-          <View style={styles.wrapDate}>
             <Image source={R.images.iconRecharge} style={styles.imgIcon} />
-          </View>
-          <Block padding={[5, 10]} space={'between'} flex={1}>
+          <Block padding={[0, WIDTHXD(40)]} space={'between'} flex={1}>
             <View
               style={{
                 flex: 1,
                 flexDirection: 'row',
                 justifyContent: 'space-between',
               }}>
-              <Text numberOfLines={2} style={styles.txtBlack}>
-                Ngô CBOT
+              <Text numberOfLines={2} style={[styles.txtBlack, {flexWrap: 'wrap', flex: 1}]} numberOfLines={1} ellipsizeMode='tail'>
+                {item.name}
               </Text>
-              <Text style={styles.txtMoney}>{toPriceVnd(300000)}</Text>
+              <Text style={styles.txtMoney}>{toPriceVnd(item.fee)}</Text>
             </View>
-            <Text style={styles.txt}>ZCE</Text>
+            <Text style={styles.txt}>{item.code}</Text>
           </Block>
         </Block>
       </TouchableOpacity>
@@ -49,8 +47,7 @@ export default Item;
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 10,
-    paddingVertical: 10,
+    paddingVertical: HEIGHTXD(40),
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -59,10 +56,10 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
-    marginHorizontal: 10,
     backgroundColor: R.colors.white,
-    marginBottom: 10,
     borderRadius: HEIGHTXD(30),
+    marginVertical: HEIGHTXD(15),
+    marginHorizontal: WIDTHXD(30)
   },
 
   wrapLeft: {
@@ -70,19 +67,14 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: HEIGHTXD(30),
     borderBottomStartRadius: HEIGHTXD(30),
   },
-  wrapDate: {
-    justifyContent: 'center',
-    paddingHorizontal: 10,
-  },
   txtTitle: {
     fontSize: getFontXD(42),
     color: R.colors.black,
     fontWeight: 'bold',
   },
   txt: {
-    fontSize: getFontXD(39),
-    color: '#929292',
-    fontStyle: 'italic',
+    fontSize: getFontXD(36),
+    color: 'black',
   },
   rowBet: {
     flexDirection: 'row',
@@ -90,14 +82,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   txtBlack: {
-    fontSize: getFontXD(42),
+    fontSize: getFontXD(50),
     color: 'black',
-    fontWeight: 'bold',
   },
   imgIcon: {
-    width: WIDTHXD(178),
-    height: HEIGHTXD(178),
+    width: WIDTHXD(150),
+    height: HEIGHTXD(150),
     resizeMode: 'contain',
+    marginLeft: WIDTHXD(35)
   },
   txtMoney: {
     fontSize: getFontXD(42),

src/Screens/Transaction/PriceList/PriceList.js

 import React, {useState, useEffect} from 'react';
-import {getListNotification} from '../../../apis/Functions/users';
+import {getListCategoryProduct, getTransactionListByCategory} from '../../../apis/Functions/Transaction';
 import PriceListView from './PriceListView';
 import I18n from '../../../helper/i18/i18n';
+import {Alert, Platform} from 'react-native';
+
 const PriceList = (props) => {
-  const [selected, setSelected] = useState('');
-  const [page, setPage] = useState(1);
-  const [data, setData] = useState([]);
-  const [tottalPage, setTotalPage] = useState(1);
-  const [isRefresh, setisRefresh] = useState(false);
-  const [fillter, setFillters] = useState('ALL');
+    const [selected, setSelected] = useState('');
+    const [page, setPage] = useState(1);
+    const [data, setData] = useState([]);
+    const [tottalPage, setTotalPage] = useState(1);
+    const [isRefresh, setIsRefresh] = useState(false);
+    const [filters, setFilters] = useState([]);
+    const [filterId, setFilterId] = useState(-1);
+
+    useEffect(() => {
+        getCategoryData();
+    }, []);
+    useEffect(() => {
+        setData([])
+        getData();
+    }, [filterId]);
 
-  useEffect(() => {
-    getData();
-  }, [fillter]);
+    const getCategoryData = async () => {
+        // setIsRefresh(true);
+        const res = await getListCategoryProduct({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 20,
+            page_index: 1,
+            type: 'PRODUCT',
+        });
+        if ((res.data.code = 200 && res.data.data)) {
+            let data = [];
+            data.push({id: -1, name: 'All'});
+            setFilters(data.concat([...res.data.data]));
+        } else {
+            Alert.alert(I18n.t('Notification'), res.data.message);
+        }
+    };
 
-  const getData = async () => {
-    setisRefresh(true);
-    setPage(1);
-    const res = await getListNotification({
-      keyword: '',
-      platform: Platform.OS,
-      page_size: 10,
-      page_index: 1,
-      type: fillter,
-    });
-    setisRefresh(false);
-    if ((res.data.code = 200 && res.data.data)) {
-      setData(res.data.data);
-      setTotalPage(res.data.meta.pages);
-    } else {
-      Alert.alert(I18n.t('Notification'), res.data.message);
-    }
-  };
+    const onRefresh = () => {
+        setPage(1);
+        getData();
+    };
 
-  const onRefresh = () => {
-    getData();
-  };
+    const getData = async () => {
+        setIsRefresh(true);
+        setPage(1);
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 10,
+            page_index: 1,
+            category_id: filterId,
+        });
+        setIsRefresh(false);
+        console.log('getData', res);
+        if ((res.data.code = 200 && res.data.data)) {
+            setData(res.data.data);
+            setTotalPage(res.data.meta.pages);
+        } else {
+            Alert.alert(I18n.t('Notification'), res.data.message);
+        }
+    };
 
-  const onLoadMore = () => {
-    console.log(tottalPage);
-    if (page < tottalPage) getDataLoadMore();
-  };
+    const onLoadMore = () => {
+        console.log(tottalPage);
+        if (page < tottalPage) {
+            getDataLoadMore();
+        }
+    };
 
-  const getDataLoadMore = async () => {
-    setisRefresh(true);
-    const res = await getListNotification({
-      keyword: '',
-      platform: Platform.OS,
-      page_size: 10,
-      page_index: 1,
-      type: fillter,
-    });
-    setPage(page + 1);
-    if (res.data.code == 200) {
-      setData(data.concat(res.data.data));
-    }
-    setisRefresh(false);
-  };
+    const getDataLoadMore = async () => {
+        setIsRefresh(true);
+        const res = await getTransactionListByCategory({
+            keyword: '',
+            platform: Platform.OS,
+            page_size: 10,
+            page_index: page + 1,
+            category_id: filterId,
+        });
+        setPage(page + 1);
+        if (res.data.code == 200) {
+            setData(data.concat(res.data.data));
+        }
+        setIsRefresh(false);
+    };
 
-  return (
-    <PriceListView
-      onRefresh={onRefresh}
-      isRefresh={isRefresh}
-      onLoadMore={onLoadMore}
-      setFillters={setFillters}
-      fillter={fillter}
-      data={data}
-    />
-  );
+    return (
+        <PriceListView
+            onRefresh={onRefresh}
+            isRefresh={isRefresh}
+            onLoadMore={onLoadMore}
+            setFilterId={setFilterId}
+            filterId={filterId}
+            filters={filters}
+            data={data}
+        />
+    );
 };
 
 export default PriceList;

src/Screens/Transaction/PriceList/PriceListView.js

 import React, {useState} from 'react';
 import {
-  View,
-  Text,
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
+    View,
+    Text,
+    FlatList,
+    StyleSheet,
+    TouchableOpacity,
+    ScrollView,
 } from 'react-native';
 
 import HeaderDrawer from '../../../components/Header/HeaderDrawer';
 import Item from './Item';
-import {getFontXD} from '../../../Config/Functions';
+import {getFontXD, HEIGHTXD} from '../../../Config/Functions';
 import AppText from '../../../components/AppText';
 import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
 import {useNavigation} from '@react-navigation/native';
 
 const Fillters = [
-  {
-    id: '1',
-    name: 'All',
-    value: 'ALL',
-  },
-  {
-    id: '2',
-    name: 'Deposit',
-    value: 'DEPOSIT',
-  },
-  {
-    id: '3',
-    name: 'Withdraw',
-    value: 'WITHDRAW',
-  },
-  {
-    id: '4',
-    name: 'Transfer',
-    value: 'TRANSFER',
-  },
+    {
+        id: '1',
+        name: 'All',
+        value: 'ALL',
+    },
+    {
+        id: '2',
+        name: 'Deposit',
+        value: 'DEPOSIT',
+    },
+    {
+        id: '3',
+        name: 'Withdraw',
+        value: 'WITHDRAW',
+    },
+    {
+        id: '4',
+        name: 'Transfer',
+        value: 'TRANSFER',
+    },
 ];
 
-const NotificaitonView = (props) => {
-  const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
-  const navigate = useNavigation();
+const PriceListView = (props) => {
+    const {onRefresh, isRefresh, onLoadMore, setFilterId, filters, data, filterId} = props;
+    const navigate = useNavigation();
+    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>
 
-  return (
-    <View style={{flex: 1}}>
-      <View style={styles.headerContainer}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          {Fillters.map((e) => (
-            <TouchableOpacity
-              key={e.value}
-              onPress={() => setFillters(e.value)}
-              style={[
-                styles.itemFillter,
-                fillter == e.value ? {borderColor: '#1473E6'} : null,
-              ]}>
-              <AppText
-                i18nKey={e.name}
-                style={[
-                  styles.txtFillter,
-                  fillter == e.value ? {color: '#1473E6'} : {},
-                ]}></AppText>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      </View>
-
-      {data.length == 0 ? (
-        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
-          <AppText
-            i18nKey={'NoData'}
-            style={{
-              fontSize: 18,
-              fontWeight: 'bold',
-            }}></AppText>
+            {data.length == 0 && !isRefresh? (
+                <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
+                    <AppText
+                        i18nKey={'NoData'}
+                        style={{
+                            fontSize: 18,
+                            fontWeight: 'bold',
+                        }}></AppText>
+                </View>
+            ) : (
+                <FlatList
+                    style={{paddingVertical: HEIGHTXD(15)}}
+                    keyExtractor={(item) => item.id}
+                    data={data}
+                    refreshing={isRefresh}
+                    onRefresh={onRefresh}
+                    onEndReachedThreshold={0.01}
+                    onEndReached={(info) => {
+                        onLoadMore();
+                    }}
+                    renderItem={({item, index}) => <Item item={item}
+                                                  isEndItem={index == data.length -1}
+                                                  onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
+                />
+            )}
         </View>
-      ) : (
-        <FlatList
-          keyExtractor={(item) => item.id}
-          data={data}
-          refreshing={isRefresh}
-          onRefresh={onRefresh}
-          onEndReachedThreshold={0.01}
-          onEndReached={(info) => {
-            onLoadMore();
-          }}
-          renderItem={({item}) => <Item item={item}
-                                        onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
-        />
-      )}
-    </View>
-  );
+    );
 };
 
 const styles = StyleSheet.create({
-  headerContainer: {
-    paddingVertical: 10,
-    backgroundColor: 'white',
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-  },
-  itemFillter: {
-    borderRadius: 10,
-    paddingVertical: 5,
-    paddingHorizontal: 10,
-    borderWidth: 1,
-    borderColor: '#929292',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 10,
-  },
-  txtFillter: {
-    fontSize: getFontXD(36),
-    color: '#929292',
-    fontWeight: 'bold',
-  },
-  txtTitle: {
-    fontSize: getFontXD(46),
-    fontWeight: 'bold',
-  },
+    headerContainer: {
+        paddingVertical: 10,
+        backgroundColor: 'white',
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 10,
+    },
+    itemFillter: {
+        borderRadius: 10,
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        borderWidth: 1,
+        borderColor: '#929292',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 10,
+    },
+    txtFillter: {
+        fontSize: getFontXD(36),
+        color: '#929292',
+        fontWeight: 'bold',
+    },
+    txtTitle: {
+        fontSize: getFontXD(46),
+        fontWeight: 'bold',
+    },
 });
 
-export default NotificaitonView;
+export default PriceListView;

src/apis/Functions/Transaction.js

+import {GetData} from '../helpers';
+
+import url from '../url';
+
+export const getListCategoryProduct = async (body) =>
+  GetData(url.urlGetCategoryNew, body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const getTransactionListByCategory = async (body) =>
+  GetData(url.urlGetTransactionListByCategory, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -38,4 +38,7 @@ export default {
 
   urlUpdateLanguage: root + 'api/v1/customers/update-language',
   urlGetNewestVersionInfo: root + 'api/v1/settings/version',
+
+  //Transaction
+  urlGetTransactionListByCategory: `${root}api/v1/transactions/price-table`,
 };