logout when session end

src/Screens/Authen/Login.js

@@ -50,6 +50,7 @@ const Login = (props) => {
   };
 
   useEffect(() => {
+    props.hideLoading();
     getAccount();
     getTokenDevice();
   }, []);

src/apis/helpers.js

 import KEY from '../assets/AsynStorage';
 import axios from 'axios';
 import AsyncStorage from '@react-native-community/async-storage';
+import {showAlert, TYPE} from '../components/DropdownAlert/index';
+import I18n from '../helper/i18/i18n';
+import {DeviceEventEmitter} from 'react-native';
 
 axios.defaults.timeout = 10000;
 
 export async function GetData(url, data) {
-  const token = await AsyncStorage.getItem(KEY.TOKEN);
-  let myRequest = {
-    method: 'get',
-    url,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + token,
-    },
-    params: {
-      ...data,
-    },
-    timeout: 30 * 1000,
-    // withCredentials: true,
-  };
-  console.log('My request', myRequest);
-  return await axios(myRequest)
-    .then((response) => response)
-    .then((response) => response)
-    .catch((error) => {
-      console.log(error.request);
-      const err = {
-        message: 'error',
-        status: error.request.status,
-      };
-      return err;
-    });
+    const token = await AsyncStorage.getItem(KEY.TOKEN);
+    let myRequest = {
+        method: 'get',
+        url,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token,
+        },
+        params: {
+            ...data,
+        },
+        timeout: 30 * 1000,
+        // withCredentials: true,
+    };
+    console.log('My request', myRequest);
+    return await axios(myRequest)
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .catch((error) => {
+            console.log(error.request);
+            const err = {
+                message: 'error',
+                status: error.request.status,
+            };
+            return err;
+        });
 }
 
 export async function PostLogin(url, json) {
-  let myRequest = {
-    method: 'post',
-    url,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    timeout: 30 * 1000,
-    data: JSON.stringify(json),
-  };
-  console.log('post data mobile', myRequest);
-  return await axios(myRequest)
-    .then((response) => response)
-    .then((response) => response)
-    .catch((error) => {
-      console.log(error);
-      const err = {
-        message: 'error',
-        status: error.request.status,
-      };
-      return err;
-    });
+    let myRequest = {
+        method: 'post',
+        url,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        timeout: 30 * 1000,
+        data: JSON.stringify(json),
+    };
+    console.log('post data mobile', myRequest);
+    return await axios(myRequest)
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .catch((error) => {
+            console.log(error);
+            const err = {
+                message: 'error',
+                status: error.request.status,
+            };
+            return err;
+        });
 }
 
 export async function PostData(url, json, isAuth = true) {
-  const token = await AsyncStorage.getItem(KEY.TOKEN);
-  console.log(token);
-  let myRequest = {
-    method: 'post',
-    url,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + token,
-    },
-    timeout: 30 * 1000,
-    data: JSON.stringify(json),
-  };
-  console.log('post data mobile', myRequest);
-  return await axios(myRequest)
-    .then((response) => response)
-    .then((response) => response)
-    .catch((error) => {
-      console.log(error.request);
-      const err = {
-        message: 'error',
-        status: error.request.status,
-      };
-      return err;
-    });
+    const token = await AsyncStorage.getItem(KEY.TOKEN);
+    console.log(token);
+    let myRequest = {
+        method: 'post',
+        url,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token,
+        },
+        timeout: 30 * 1000,
+        data: JSON.stringify(json),
+    };
+    console.log('post data mobile', myRequest);
+    return await axios(myRequest)
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .catch((error) => {
+            console.log(error.request);
+            const err = {
+                message: 'error',
+                status: error.request.status,
+            };
+            return err;
+        });
 }
 
 export async function PostFormData(url, data) {
-  const token = await AsyncStorage.getItem(KEY.TOKEN);
-  const source = axios.CancelToken.source();
-  const timeout = setTimeout(() => {
-    source.cancel();
-    // Timeout Logic
-  }, 60000);
-  console.log(token);
-  let myRequest = {
-    method: 'post',
-    url,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'multipart/form-data',
-      Authorization: 'Bearer ' + token,
-    },
-    timeout: 60000,
-    data: data,
-    cancelToken: source.token,
-  };
-  console.log('post data mobile', myRequest.data);
-  return await axios(myRequest)
-    .then((response) => {
-      clearTimeout(timeout);
-      return response;
-    })
-    .then((response) => {
-      clearTimeout(timeout);
-      return response;
-    })
-    .catch((error) => {
-      clearTimeout(timeout);
-      console.log('errorTimeout', error);
-      const err = {
-        message: 'error',
-        status: error.request.status,
-      };
-      return err;
-    });
+    const token = await AsyncStorage.getItem(KEY.TOKEN);
+    const source = axios.CancelToken.source();
+    const timeout = setTimeout(() => {
+        source.cancel();
+        // Timeout Logic
+    }, 60000);
+    console.log(token);
+    let myRequest = {
+        method: 'post',
+        url,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'multipart/form-data',
+            Authorization: 'Bearer ' + token,
+        },
+        timeout: 60000,
+        data: data,
+        cancelToken: source.token,
+    };
+    console.log('post data mobile', myRequest.data);
+    return await axios(myRequest)
+        .then((response) => {
+            clearTimeout(timeout);
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .then((response) => {
+            clearTimeout(timeout);
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .catch((error) => {
+            clearTimeout(timeout);
+            console.log('errorTimeout', error);
+            const err = {
+                message: 'error',
+                status: error.request.status,
+            };
+            return err;
+        });
 }
 
 /**
@@ -135,27 +190,46 @@ export async function PostFormData(url, data) {
  * @param {*} isAuth is state auth
  */
 export async function PutData(url, json, isAuth = true) {
-  const token = await AsyncStorage.getItem(KEY.TOKEN);
-  let myRequest = {
-    method: 'put',
-    url,
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + token,
-    },
-    data: JSON.stringify(json),
-  };
-  console.log('PutData', myRequest);
-  return await axios(myRequest)
-    .then((response) => response)
-    .then((response) => response)
-    .catch((error) => {
-      console.log(error.request);
-      const err = {
-        message: 'error',
-        status: error.request.status,
-      };
-      return err;
-    });
+    const token = await AsyncStorage.getItem(KEY.TOKEN);
+    let myRequest = {
+        method: 'put',
+        url,
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer ' + token,
+        },
+        data: JSON.stringify(json),
+    };
+    console.log('PutData', myRequest);
+    return await axios(myRequest)
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .then((response) => {
+            if (response.data?.code === 401) {
+                logout();
+                return;
+            } else {
+                return response;
+            }
+        })
+        .catch((error) => {
+            console.log(error.request);
+            const err = {
+                message: 'error',
+                status: error.request.status,
+            };
+            return err;
+        });
+}
+
+export function logout() {
+    showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('LoginSessionEnd'));
+    DeviceEventEmitter.emit('logout');
 }

src/helper/i18/locales/en.js

@@ -289,4 +289,5 @@ export default {
   WarnMinReqestWithdraw:
     'The withdrawal amount must be more than 1 million dong',
   Overtime: 'Overtime OTP',
+  LoginSessionEnd: 'Login session end, please login again',
 };

src/helper/i18/locales/vn.js

@@ -289,4 +289,5 @@ export default {
   FirstEscrow: 'Ký quỹ ban đầu (VNĐ) ',
   WarnMinReqestWithdraw: 'Số tiền rút phải lớn hơn 1 triệu đồng',
   Overtime: 'Mã OTP hết hạn sử dụng',
+  LoginSessionEnd: "Hết phiên đăng nhập, vui lòng đăng nhập lại",
 };

src/routers/TabNavigation.js

 import React, {useEffect} from 'react';
-import {View, Text, Linking, Image} from 'react-native';
+import {View, Text, Linking, Image, DeviceEventEmitter} from 'react-native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -23,152 +23,165 @@ import {changeLanguage} from '../actions/language';
 import KEY from '../assets/AsynStorage';
 import AsyncStorage from '@react-native-community/async-storage';
 import {DETAILNEW} from '../routers/ScreenNames';
-import {getHeight, getWidth} from '../Config/Functions';
+import {getHeight, getWidth, logout} from '../Config/Functions';
 
 const Tab = createBottomTabNavigator();
 
 const PayScreenComponent = () => {
-  return null;
+    return null;
 };
 
 const TabNavigator = (props) => {
-  console.log(getHeight(), getWidth());
-  const navigate = useNavigation();
-  useEffect(() => {
-    setInitLanguage();
-    checkDeepking();
-    setTimeout(() => {
-      showPopUp();
-    }, 3000);
-  }, []);
-
-  const checkDeepking = () => {
-    Linking.getInitialURL().then((url) => {
-      if (url) deeplinkScreen(url);
-    });
-    Linking.addEventListener('url', (url) => {
-      if (url) handleOpenURL(url);
-    });
-  };
-
-  const handleOpenURL = (event) => {
-    deeplinkScreen(event.url);
-  };
-
-  const deeplinkScreen = (url) => {
-    const route = url.replace(/.*?:\/\//g, '');
-    const id = route.match(/\/([^\/]+)\/?$/)[1];
-    const root = route.split('/')[0];
-    // const routeName = route.split('/')[1];
-    if (root == 'screen') {
-      navigate.navigate(DETAILNEW, {id});
-    }
-  };
-
-  useEffect(() => {
-    checkScreenInit();
-  }, [props.screenInit]);
-
-  const checkScreenInit = () => {
-    if (props.screenInit.screen) {
-      const {screen, id} = props.screenInit;
-      navigate.navigate(screen, {id: id});
-    }
-  };
-
-  const setInitLanguage = async () => {
-    const laguage = await AsyncStorage.getItem(KEY.LANGUAGE);
-    if (laguage) props.changeLanguage(laguage);
-    setLocation(I18n, laguage);
-  };
-
-  const showPopUp = () => {
-    if (props.user.status == 1) {
-      return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
-        navigate.navigate(AccountVerification);
-      });
-    } else if (props.user.status == 3 && !props.user.contract_code) {
-      return confirmAlert(I18n.t('PopupOpenCQG'), () => {
-        navigate.navigate(PACKETCQG);
-      });
-    }
-  };
-  return (
-    <View style={{flex: 1}}>
-      <Tab.Navigator
-        initialRouteName="Screen1"
-        tabBarOptions={{activeTintColor: R.colors.main}}>
-        <Tab.Screen
-          name="Screen1"
-          component={Home}
-          options={{
-            tabBarLabel: 'Overview',
-            tabBarIcon: ({color, size}) => (
-              <Icon name="landmark" size={size} color={color} />
-            ),
-          }}
-        />
-
-        <Tab.Screen
-          name="Screen2"
-          component={Transaction}
-          options={{
-            tabBarLabel:
-              props.language.language == 'vi' ? 'Giao dịch' : 'Tradding',
-            tabBarIcon: ({color, size}) => (
-              <Image
-                source={R.images.iconTransaction2}
-                style={{width: size, height: size, tintColor: color}}
-              />
-            ),
-          }}
-        />
-
-        <Tab.Screen
-          name="Pay"
-          component={PayScreenComponent}
-          options={{
-            tabBarButton: () => <PlussModal />,
-          }}
-        />
-
-        <Tab.Screen
-          name="Screen3"
-          component={Notification}
-          options={{
-            tabBarLabel:
-              props.language.language == 'vi' ? 'Thông báo' : 'Notification',
-            tabBarIcon: ({color, size}) => (
-              <Ionicons
-                name="ios-notifications-outline"
-                size={size}
-                color={color}
-              />
-            ),
-          }}
-        />
-        <Tab.Screen
-          name="Screen4"
-          component={NewFeed}
-          options={{
-            tabBarLabel: props.language.language == 'vi' ? 'Tin tức' : 'News',
-            tabBarIcon: ({color, size}) => (
-              <Ionicons name="newspaper-outline" size={size} color={color} />
-            ),
-          }}
-        />
-      </Tab.Navigator>
-    </View>
-  );
+    console.log(getHeight(), getWidth());
+    const navigate = useNavigation();
+    useEffect(() => {
+        setInitLanguage();
+        checkDeepking();
+        setTimeout(() => {
+            showPopUp();
+        }, 3000);
+        let logoutListener = DeviceEventEmitter.addListener('logout', (e) => {
+            console.log('run in to logout');
+            logout(navigate);
+        });
+        return () => {
+            logoutListener.remove();
+        };
+    }, []);
+
+    const checkDeepking = () => {
+        Linking.getInitialURL().then((url) => {
+            if (url) {
+                deeplinkScreen(url);
+            }
+        });
+        Linking.addEventListener('url', (url) => {
+            if (url) {
+                handleOpenURL(url);
+            }
+        });
+    };
+
+    const handleOpenURL = (event) => {
+        deeplinkScreen(event.url);
+    };
+
+    const deeplinkScreen = (url) => {
+        const route = url.replace(/.*?:\/\//g, '');
+        const id = route.match(/\/([^\/]+)\/?$/)[1];
+        const root = route.split('/')[0];
+        // const routeName = route.split('/')[1];
+        if (root == 'screen') {
+            navigate.navigate(DETAILNEW, {id});
+        }
+    };
+
+    useEffect(() => {
+        checkScreenInit();
+    }, [props.screenInit]);
+
+    const checkScreenInit = () => {
+        if (props.screenInit.screen) {
+            const {screen, id} = props.screenInit;
+            navigate.navigate(screen, {id: id});
+        }
+    };
+
+    const setInitLanguage = async () => {
+        const laguage = await AsyncStorage.getItem(KEY.LANGUAGE);
+        if (laguage) {
+            props.changeLanguage(laguage);
+        }
+        setLocation(I18n, laguage);
+    };
+
+    const showPopUp = () => {
+        if (props.user.status == 1) {
+            return confirmAlert(I18n.t('PopupVerifyAccount'), () => {
+                navigate.navigate(AccountVerification);
+            });
+        } else if (props.user.status == 3 && !props.user.contract_code) {
+            return confirmAlert(I18n.t('PopupOpenCQG'), () => {
+                navigate.navigate(PACKETCQG);
+            });
+        }
+    };
+    return (
+        <View style={{flex: 1}}>
+            <Tab.Navigator
+                initialRouteName="Screen1"
+                tabBarOptions={{activeTintColor: R.colors.main}}>
+                <Tab.Screen
+                    name="Screen1"
+                    component={Home}
+                    options={{
+                        tabBarLabel: 'Overview',
+                        tabBarIcon: ({color, size}) => (
+                            <Icon name="landmark" size={size} color={color}/>
+                        ),
+                    }}
+                />
+
+                <Tab.Screen
+                    name="Screen2"
+                    component={Transaction}
+                    options={{
+                        tabBarLabel:
+                            props.language.language == 'vi' ? 'Giao dịch' : 'Tradding',
+                        tabBarIcon: ({color, size}) => (
+                            <Image
+                                source={R.images.iconTransaction2}
+                                style={{width: size, height: size, tintColor: color}}
+                            />
+                        ),
+                    }}
+                />
+
+                <Tab.Screen
+                    name="Pay"
+                    component={PayScreenComponent}
+                    options={{
+                        tabBarButton: () => <PlussModal/>,
+                    }}
+                />
+
+                <Tab.Screen
+                    name="Screen3"
+                    component={Notification}
+                    options={{
+                        tabBarLabel:
+                            props.language.language == 'vi' ? 'Thông báo' : 'Notification',
+                        tabBarIcon: ({color, size}) => (
+                            <Ionicons
+                                name="ios-notifications-outline"
+                                size={size}
+                                color={color}
+                            />
+                        ),
+                    }}
+                />
+                <Tab.Screen
+                    name="Screen4"
+                    component={NewFeed}
+                    options={{
+                        tabBarLabel: props.language.language == 'vi' ? 'Tin tức' : 'News',
+                        tabBarIcon: ({color, size}) => (
+                            <Ionicons name="newspaper-outline" size={size} color={color}/>
+                        ),
+                    }}
+                />
+            </Tab.Navigator>
+        </View>
+    );
 };
 
 const mapStateToProps = (state) => {
-  return {
-    user: state.userReducer,
-    notifi: state.CountNotificationReducer,
-    screenInit: state.ScreenInitReducer,
-    language: state.languageReducer,
-  };
+    return {
+        user: state.userReducer,
+        notifi: state.CountNotificationReducer,
+        screenInit: state.ScreenInitReducer,
+        language: state.languageReducer,
+    };
 };
 
 export default connect(mapStateToProps, {changeLanguage})(TabNavigator);