update code

src/Screens/Menu/MyGroup/DetailPartner.js

+import React, {Component} from 'react';
+import {View, Text, Image, StyleSheet} from 'react-native';
+import HeaderBack from '../../../components/Header/HeaderBack';
+import R from '../../../assets/R';
+import AppText from '../../../components/AppText';
+import {getFontXD} from '../../../Config/Functions';
+const DetailPartner = (props) => {
+  const {
+    fullname,
+    picture_url,
+    cqg_status_name,
+    status_name,
+    created,
+    email,
+  } = props.route.params.data;
+
+  return (
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Detail'} />
+      <View style={{flex: 1}}>
+        <View style={styles.containerTop}>
+          <Image style={styles.img} source={{uri: picture_url}} />
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'Fullname'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{fullname}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'level'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{fullname}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'Sponsor'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{fullname}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'Email'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{email}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'Status'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{status_name}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'DateJoin'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{created}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'OpenAccountExchange'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{cqg_status_name}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'CountSponsors'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{fullname}</Text>
+          </View>
+        </View>
+
+        <View style={styles.row}>
+          <View style={styles.wrapLeft}>
+            <AppText style={styles.txtTitle} i18nKey={'TotalCommission'} />
+          </View>
+          <View style={styles.wrapRight}>
+            <Text style={{fontSize: getFontXD(42)}}>{fullname}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: R.colors.white,
+    padding: 10,
+    marginTop: 10,
+    marginHorizontal: 10,
+    borderRadius: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+    elevation: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  img: {
+    width: 80,
+    height: 80,
+    borderRadius: 45,
+    borderWidth: 0.4,
+    borderColor: R.colors.main,
+  },
+  wrapLeft: {
+    flex: 1,
+    justifyContent: 'center',
+    marginRight: 5,
+  },
+  wrapRight: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 5,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginRight: 5,
+  },
+  txtName: {
+    fontSize: getFontXD(46),
+    color: R.colors.black,
+  },
+  containerTop: {
+    alignItems: 'center',
+    marginVertical: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    marginHorizontal: 10,
+    marginTop: 5,
+  },
+});
+
+export default DetailPartner;

src/Screens/Menu/MyGroup/Item.js

+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
+import R from '../../../assets/R';
+import AppText from '../../../components/AppText';
+import {getFontXD} from '../../../Config/Functions';
+import {useNavigation} from '@react-navigation/native';
+import {DETAILPARTNER} from '../../../routers/ScreenNames';
+
+const Item = (props) => {
+  const {
+    fullname,
+    picture_url,
+    cqg_status_name,
+    status_name,
+    created,
+  } = props.item;
+
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigation.navigate(DETAILPARTNER, {data: props.item})}
+      style={[styles.container, props.isEnd ? {marginBottom: 10} : {}]}>
+      <Image source={{uri: picture_url}} style={styles.img} />
+      <View style={styles.wrapRight}>
+        <Text style={styles.txtName}>{fullname}</Text>
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <AppText style={styles.txtTitle} i18nKey={'Status'} />
+          <Text style={{fontSize: getFontXD(42)}}>{status_name}</Text>
+        </View>
+
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <AppText style={styles.txtTitle} i18nKey={'DateJoin'} />
+          <Text style={{fontSize: getFontXD(42)}}>{created}</Text>
+        </View>
+
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <AppText style={styles.txtTitle} i18nKey={'OpenAccountExchange'} />
+          <Text style={{fontSize: getFontXD(42)}}>{cqg_status_name}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Item;
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: R.colors.white,
+    padding: 10,
+    marginTop: 10,
+    marginHorizontal: 10,
+    borderRadius: 5,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 1.84,
+    elevation: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  img: {
+    width: 80,
+    height: 80,
+    borderRadius: 45,
+    borderWidth: 0.4,
+    borderColor: R.colors.main,
+  },
+  wrapRight: {
+    marginLeft: 5,
+    flex: 1,
+    height: 80,
+    justifyContent: 'space-between',
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.color777,
+    marginRight: 5,
+  },
+  txtName: {
+    fontSize: getFontXD(46),
+    color: R.colors.black,
+  },
+});

src/Screens/Menu/MyGroup/MyGroup.js

@@ -12,17 +12,20 @@ import SearchModal from './SearchModal';
 const ListTabs = [
   {
     type: 'level1',
+    value: 1,
   },
   {
     type: 'level2',
+    value: 2,
   },
   {
     type: 'level3',
+    value: 3,
   },
 ];
 
 const MyGroup = (props) => {
-  const [isModalVisible, setModalVisible] = useState(true);
+  const [isModalVisible, setModalVisible] = useState(false);
   const toggleModal = () => {
     setModalVisible(!isModalVisible);
   };
@@ -47,7 +50,7 @@ const MyGroup = (props) => {
           {ListTabs.map((e) => (
             <Tab.Screen
               name={e.type}
-              children={() => <Level1 type={e.type} />}
+              children={() => <Level1 type={e.value} />}
               options={{tabBarLabel: I18n.t(e.type)}}
             />
           ))}

src/Screens/Menu/MyGroup/SearchModal.js

@@ -26,50 +26,49 @@ import {SEARCHPARTNER} from '../../../routers/ScreenNames';
 import {showAlert, TYPE} from '../../../components/DropdownAlert';
 import {useNavigation} from '@react-navigation/native';
 import TextField from '../../../components/Input/TextField';
-
+import {connect} from 'react-redux';
 import IconClose from 'react-native-vector-icons/AntDesign';
 
 const {width} = Dimensions.get('window');
 
-const ListLevels = [
+const SearchProductCodeModal = (props) => {
+  const ListLevels = [
     {
-    value: 'all',
+      value: '-1',
       name: I18n.t('All'),
     },
     {
-    value: 'level1',
+      value: '1',
       name: I18n.t('level1'),
     },
     {
-    value: 'level2',
+      value: '2',
       name: I18n.t('level2'),
     },
     {
-    value: 'level3',
+      value: '3',
       name: I18n.t('level3'),
     },
-];
+  ];
 
-const ListStatus = [
+  const ListStatus = [
     {
-    value: 'all',
+      value: '-1',
       name: I18n.t('All'),
     },
     {
-    value: 'Open',
+      value: '1',
       name: I18n.t('Opened'),
     },
     {
-    value: 'Unopen',
+      value: '0',
       name: I18n.t('Unopen'),
     },
-];
-
-const SearchProductCodeModal = (props) => {
+  ];
   const navigate = useNavigation();
   const [textSearch, setTextSearch] = useState('');
-  const [level, setLevel] = useState(null);
-  const [open, setOpen] = useState(new Date());
+  const [level, setLevel] = useState(ListLevels[0]);
+  const [open, setOpen] = useState(ListStatus[0]);
 
   return (
     <Modal
@@ -119,6 +118,7 @@ const SearchProductCodeModal = (props) => {
                 i18nKey={'level'}
               />
               <PickerItem
+                defaultValue={level.name}
                 width={width - 40}
                 data={ListLevels}
                 onValueChange={(value, items) => {
@@ -131,6 +131,7 @@ const SearchProductCodeModal = (props) => {
                 i18nKey={'OpenAccountCQG'}
               />
               <PickerItem
+                defaultValue={open.name}
                 width={width - 40}
                 data={ListStatus}
                 onValueChange={(value, items) => {
@@ -146,9 +147,13 @@ const SearchProductCodeModal = (props) => {
                 }}>
                 <TouchableOpacity
                   onPress={() => {
-                    console.log(level, open, textSearch);
                     props.toggleModal();
-                    navigate.navigate(SEARCHPARTNER);
+                    console.log(open);
+                    navigate.navigate(SEARCHPARTNER, {
+                      keyword: textSearch,
+                      level: level.value,
+                      trader_account_status: open.value,
+                    });
                   }}
                   style={styles.btnSend}>
                   <Text style={styles.txtSend}>{I18n.t('Search')}</Text>
@@ -235,4 +240,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default SearchProductCodeModal;
+const mapStateToProps = (state) => {
+  return {
+    language: state.languageReducer,
+  };
+};
+
+export default connect(mapStateToProps, {})(SearchProductCodeModal);

src/Screens/Menu/MyGroup/SearchPartner.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {Component, useState, useEffect} from 'react';
+import {View, Text, FlatList} from 'react-native';
+import Item from './Item';
+import {getListPartner} from '../../../apis/Functions/users';
 import HeaderBack from '../../../components/Header/HeaderBack';
+import {showAlert, TYPE} from '../../../components/DropdownAlert';
+import I18n from '../../../helper/i18/i18n';
+const Level1 = (props) => {
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+  console.log(props.route.params);
+
+  const {trader_account_status, level, keyword} = props.route.params;
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListPartner({
+      keyword,
+      level,
+      trader_account_status,
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+    });
+
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+    setisRefresh(false);
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListPartner({
+      keyword: '',
+      level: 1,
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: page + 1,
+    });
+    setPage(page + 1);
+
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
 
-const SearchPartner = (props) => {
   return (
     <View style={{flex: 1}}>
       <HeaderBack title="SearchPartner" />
-      <Text>List partner</Text>
+
+      <FlatList
+        data={data}
+        showsVerticalScrollIndicator={false}
+        keyExtractor={(item) => item.id}
+        refreshing={isRefresh}
+        onRefresh={() => onRefresh()}
+        onEndReachedThreshold={0.01}
+        onEndReached={(info) => {
+          onLoadMore();
+        }}
+        renderItem={({item, index}) => (
+          <Item isEnd={data.length - 1 == index ? true : false} item={item} />
+        )}
+      />
     </View>
   );
 };
 
-export default SearchPartner;
+export default Level1;

src/Screens/Menu/MyGroup/Tabs/Level1.js

-import React, {Component} from 'react';
-import {View, Text} from 'react-native';
+import React, {Component, useState, useEffect} from 'react';
+import {View, Text, FlatList} from 'react-native';
+import Item from '../Item';
+import {getListPartner} from '../../../../apis/Functions/users';
+import {showAlert, TYPE} from '../../../../components/DropdownAlert';
 
 const Level1 = (props) => {
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState([]);
+  const [tottalPage, setTotalPage] = useState(1);
+  const [isRefresh, setisRefresh] = useState(false);
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    setisRefresh(true);
+    setPage(1);
+    const res = await getListPartner({
+      keyword: '',
+      level: props.type,
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: 1,
+    });
+
+    if ((res.data.code = 200 && res.data.data)) {
+      setData(res.data.data);
+      setTotalPage(res.data.meta.pages);
+    } else {
+      showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
+    }
+    setisRefresh(false);
+  };
+
+  const onRefresh = () => {
+    getData();
+  };
+
+  const onLoadMore = () => {
+    if (page < tottalPage) getDataLoadMore();
+  };
+
+  const getDataLoadMore = async () => {
+    setisRefresh(true);
+    const res = await getListPartner({
+      keyword: '',
+      level: props.type,
+      platform: Platform.OS,
+      page_size: 10,
+      page_index: page + 1,
+    });
+    setPage(page + 1);
+
+    if (res.data.code == 200) {
+      setData(data.concat(res.data.data));
+    }
+    setisRefresh(false);
+  };
+
   return (
-    <View>
-      <Text>{props.type}</Text>
+    <View style={{flex: 1}}>
+      <FlatList
+        data={data}
+        showsVerticalScrollIndicator={false}
+        keyExtractor={(item) => item.id}
+        refreshing={isRefresh}
+        onRefresh={() => onRefresh()}
+        onEndReachedThreshold={0.01}
+        onEndReached={(info) => {
+          onLoadMore();
+        }}
+        renderItem={({item, index}) => (
+          <Item isEnd={data.length - 1 == index ? true : false} item={item} />
+        )}
+      />
     </View>
   );
 };

src/apis/Functions/users.js

@@ -96,3 +96,8 @@ export const verifyPassword = async (body) =>
   PostData(url.urlVerifyPassword, body)
     .then((res) => res)
     .catch((err) => err);
+
+export const getListPartner = async (body) =>
+  GetData(url.urlGetListPartner, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

@@ -70,4 +70,5 @@ export default {
   urlStoreOTPSmart: root + 'api/v1/customers/store-otp-password',
   urlVerufySmartOTP: root + 'api/v1/customers/verify-otp-password',
   urlVerifyPassword: `${root}api/auth/customer-verify-password`,
+  urlGetListPartner: root + 'api/v1/customers/my-partner',
 };

src/helper/i18/locales/en.js

@@ -58,7 +58,7 @@ export default {
   Fullname: 'Full name',
   Birth: 'Birth',
   Male: 'Male',
-  Status: 'Status',
+  Status: 'Status:',
   Phone: 'Phone',
   Enter_Phone: 'Enter phone',
   Address: 'Address:',
@@ -347,4 +347,9 @@ export default {
   NamePartner: 'Name partner',
   Opened: 'Opened',
   Unopen: 'Unopene',
+  OpenAccountExchange: 'Open account exchange:',
+  DateJoin: 'Date join:',
+  Sponsor: 'Sponsor',
+  CountSponsors: 'Count sponsors',
+  TotalCommission: 'Total commission',
 };

src/helper/i18/locales/vn.js

@@ -62,7 +62,7 @@ export default {
   Fullname: 'Họ và tên',
   Birth: 'Ngày sinh',
   Male: 'Giới tính',
-  Status: 'Trạng thái',
+  Status: 'Trạng thái:',
   Phone: 'Điện thoại',
   Address: 'Địa chỉ:',
   Update: 'Cập nhật',
@@ -345,4 +345,9 @@ export default {
   NamePartner: 'Tên đối tác',
   Opened: 'Đã mở',
   Unopen: 'Chưa mở',
+  OpenAccountExchange: 'Mở tài khoản giao dịch:',
+  DateJoin: 'Ngày tham gia:',
+  Sponsor: 'Người giới thiệu',
+  CountSponsors: 'Số người giới thiệu',
+  TotalCommission: 'Tổng tiền hoa hồng',
 };

src/routers/ScreenNames.js

@@ -96,3 +96,4 @@ export const FAQSSMARTOTP = 'FAQSSMARTOTP';
 
 export const CONFIRMCREATEOTP = 'CONFIRMCREATEOTP';
 export const SEARCHPARTNER = 'SEARCHPARTNER';
+export const DETAILPARTNER = 'DETAILPARTNER';

src/routers/StackNavigation.js

@@ -70,6 +70,8 @@ import RulesSmartOTP from '../Screens/SmartOTP/WebView/RulesSmartOTP';
 import ConfirmCreate from '../Screens/SmartOTP/ConfirmCreate/ConfirmCreate';
 import SearchPartner from '../Screens/Menu/MyGroup/SearchPartner';
 
+import DetailPartner from '../Screens/Menu/MyGroup/DetailPartner';
+
 import * as ScreenName from './ScreenNames';
 
 const Stack = createStackNavigator();
@@ -211,6 +213,7 @@ function MyStack(props) {
       />
 
       <Stack.Screen name={ScreenName.SEARCHPARTNER} component={SearchPartner} />
+      <Stack.Screen name={ScreenName.DETAILPARTNER} component={DetailPartner} />
     </Stack.Navigator>
   );
 }