added auto employeelogout when app in background

components/screen-main/screen-main.component.jsx

@@ -1,25 +1,21 @@
-import { Ionicons } from "@expo/vector-icons";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React, { useEffect, useRef } from "react";
 import i18n from "i18next";
 import moment from "moment";
-import React, { useEffect } from "react";
+import { AppState } from "react-native";
 import { Button } from "react-native-paper";
+import { Ionicons } from "@expo/vector-icons";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+import { logImEXEvent } from "../../firebase/firebase.analytics";
+
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.analytics";
 import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
-import {
-  checkUserSession,
-  emailSignInStart,
-  signOutStart,
-} from "../../redux/user/user.actions";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
-
+import { checkUserSession, emailSignInStart, signOutStart } from "../../redux/user/user.actions";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { employeeSignOut } from "../../redux/employee/employee.actions";
 import { selectCurrentEmployee } from "../../redux/employee/employee.selectors";
 
 import ScreenJobDetail from "../screen-job-detail/screen-job-detail.component";
@@ -39,15 +35,12 @@ const ActiveJobStack = createNativeStackNavigator();
 const MoreStack = createNativeStackNavigator();
 const BottomTabs = createBottomTabNavigator();
 const MediaBrowserStack = createNativeStackNavigator();
-
-//ADDED JF TimeTicketBrowserStack for holding screens
 const TimeTicketBrowserStack = createNativeStackNavigator();
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
 });
-
 const mapDispatchToProps = (dispatch) => ({
   checkUserSession: () => dispatch(checkUserSession()),
   emailSignInStart: (email, password) =>
@@ -56,10 +49,12 @@ const mapDispatchToProps = (dispatch) => ({
   setCameraJobId: (id) => dispatch(setCameraJobId(id)),
   setCameraJob: (job) => dispatch(setCameraJob(job)),
 });
-
 const mapStateToProps2 = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
 });
+const mapDispatchToProps2 = (dispatch) => ({
+  signOut: () => dispatch(employeeSignOut()),
+});
 
 const JobsTabNavigator = connect(
   mapStateToProps,
@@ -120,11 +115,29 @@ const MoreStackNavigator = () => (
   </MoreStack.Navigator>
 );
 
-//ADDED JF TimeTicketBrowserStackNavigator for navigating the stack
+//ADDED JF TimeTicketBrowserStackNavigator for navigating the stack and logout on appState background
 const TimeTicketBrowserStackNavigator = connect(
   mapStateToProps2,
-  mapDispatchToProps
-)(({ currentEmployee }) => {
+  mapDispatchToProps2
+)(({ currentEmployee, signOut }) => {
+  const appState = useRef(AppState.currentState);
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === "active"
+      ) {
+        // console.log("App has come to the foreground");
+        signOut();
+      }
+      appState.current = nextAppState;
+      // console.log("AppState", appState.current);
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   return (
     <TimeTicketBrowserStack.Navigator>
       {currentEmployee === null ? (
@@ -214,7 +227,6 @@ const BottomTabsNavigator = () => (
     />
   </BottomTabs.Navigator>
 );
-//ADDED JF BottomTabs.Screen named TimeTicketBrowserTab
 
 export function ScreenMainComponent({
   checkUserSession,