migrated back to redux store for necessary variables

VAMobile/src/App.tsx

@@ -57,7 +57,7 @@ import EditAddressScreen from 'screens/HomeScreen/ProfileScreen/ContactInformati
 import RequestNotificationsScreen from 'screens/auth/RequestNotifications/RequestNotificationsScreen'
 import store, { RootState } from 'store'
 import { getAccessToken, setRefreshAccessToken, setlogout } from 'store/api'
-import { AnalyticsState } from 'store/slices'
+import { AnalyticsState, AuthState } from 'store/slices'
 import { SettingsState } from 'store/slices'
 import {
   AccessibilityState,
@@ -211,6 +211,9 @@ export function AuthGuard() {
   const { data: userBiometricSettings, isLoading: initializingBiometrics } = useBiometricsSettings()
   const initializing = initializingAuth || initializingBiometrics
   const { tappedForegroundNotification, setTappedForegroundNotification } = useNotificationContext()
+  const { loggedIn, syncing, displayBiometricsPreferenceScreen } = useSelector<RootState, AuthState>(
+    (state) => state.auth,
+  )
   const { loadingRemoteConfig, remoteConfigActivated } = useSelector<RootState, SettingsState>(
     (state) => state.settings,
   )
@@ -308,10 +311,10 @@ export function AuthGuard() {
       },
     }
     console.debug('AuthGuard: initializing')
-    if (userAuthSettings?.loggedIn && tappedForegroundNotification) {
+    if (loggedIn && tappedForegroundNotification) {
       console.debug('User tapped foreground notification. Skipping initializeAuth.')
       setTappedForegroundNotification(false)
-    } else if (!userAuthSettings?.loggedIn) {
+    } else if (loggedIn) {
       initializeAuth(() => {
         refreshAccessToken(getAccessToken() || '', mutateOptions)
       })
@@ -331,7 +334,7 @@ export function AuthGuard() {
       }
     }
   }, [
-    userAuthSettings?.loggedIn,
+    loggedIn,
     tappedForegroundNotification,
     setTappedForegroundNotification,
     refreshAccessToken,
@@ -384,10 +387,10 @@ export function AuthGuard() {
       </Stack.Navigator>
     )
   } else if (
-    userAuthSettings?.syncing &&
+    syncing &&
     userAuthSettings?.firstTimeLogin &&
     userBiometricSettings?.canStoreWithBiometric &&
-    userBiometricSettings?.displayBiometricsPreferenceScreen
+    displayBiometricsPreferenceScreen
   ) {
     content = (
       <Stack.Navigator initialRouteName="BiometricsPreference">
@@ -398,17 +401,17 @@ export function AuthGuard() {
         />
       </Stack.Navigator>
     )
-  } else if (userAuthSettings?.firstTimeLogin && userAuthSettings?.loggedIn) {
+  } else if (userAuthSettings?.firstTimeLogin && loggedIn) {
     content = <OnboardingCarousel />
-  } else if (userAuthSettings?.syncing) {
+  } else if (syncing) {
     content = (
       <Stack.Navigator>
         <Stack.Screen name="Sync" component={SyncScreen} options={{ ...topPaddingAsHeaderStyles, title: 'sync' }} />
       </Stack.Navigator>
     )
-  } else if (userAuthSettings?.firstTimeLogin && userAuthSettings?.loggedIn) {
+  } else if (userAuthSettings?.firstTimeLogin && loggedIn) {
     content = <OnboardingCarousel />
-  } else if (!userAuthSettings?.firstTimeLogin && userAuthSettings?.loggedIn && requestNotificationPreferenceScreen) {
+  } else if (!userAuthSettings?.firstTimeLogin && loggedIn && requestNotificationPreferenceScreen) {
     content = (
       <Stack.Navigator>
         <Stack.Screen
@@ -418,7 +421,7 @@ export function AuthGuard() {
         />
       </Stack.Navigator>
     )
-  } else if (userAuthSettings?.loggedIn) {
+  } else if (loggedIn) {
     content = (
       <>
         <AuthedApp />

VAMobile/src/api/auth/getAuthSettings.tsx

@@ -12,10 +12,6 @@ const getAuthSettings = async (): Promise<UserAuthSettings> => {
   const firstTimeLogin = await checkFirstTimeLogin()
   return {
     firstTimeLogin: firstTimeLogin,
-    loading: false,
-    loggedIn: false,
-    loggingOut: false,
-    syncing: false,
   }
 }
 

VAMobile/src/api/auth/getBiometricsSettings.tsx

@@ -13,7 +13,6 @@ const getBiometricsSettings = async (): Promise<UserBiometricsSettings> => {
   const biometricsPreferred = await isBiometricsPreferred()
   return {
     canStoreWithBiometric: !!supportedBiometric,
-    displayBiometricsPreferenceScreen: true,
     shouldStoreWithBiometric: biometricsPreferred,
     supportedBiometric: supportedBiometric,
   }

VAMobile/src/api/auth/handleTokenCallbackUrl.tsx

@@ -6,6 +6,7 @@ import { logAnalyticsEvent, logNonFatalErrorToFirebase } from 'utils/analytics'
 import { getCodeVerifier, loginFinish, loginStart, parseCallbackUrlParams, processAuthResponse } from 'utils/auth'
 import { isErrorObject } from 'utils/common'
 import getEnv from 'utils/env'
+import { useAppDispatch } from 'utils/hooks'
 import { clearCookies } from 'utils/rnAuthSesson'
 
 import { usePostLoggedIn } from './postLoggedIn'
@@ -36,16 +37,17 @@ const handleTokenCallbackUrl = async (handleTokenCallbackParams: handleTokenCall
  */
 export const useHandleTokenCallbackUrl = () => {
   const { mutate: postLoggedIn } = usePostLoggedIn()
+  const dispatch = useAppDispatch()
   return useMutation({
     mutationFn: handleTokenCallbackUrl,
     onSettled: () => {
       logAnalyticsEvent(Events.vama_auth_completed())
-      loginStart(true)
+      loginStart(dispatch, true)
       clearCookies()
     },
     onSuccess: async (data) => {
       const authCredentials = await processAuthResponse(data)
-      await loginFinish(false, authCredentials)
+      await loginFinish(dispatch, false, authCredentials)
       postLoggedIn()
     },
     onError: (error) => {
@@ -54,7 +56,7 @@ export const useHandleTokenCallbackUrl = () => {
         if (error.status) {
           logAnalyticsEvent(Events.vama_login_token_fetch(error))
         }
-        loginFinish(true)
+        loginFinish(dispatch, true)
       }
     },
   })

VAMobile/src/api/auth/logout.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UserAuthSettings } from 'api/types'
 import { RootState } from 'store'
 import * as api from 'store/api'
+import { dispatchUpdateLoggingOut, dispatchUpdateSyncing } from 'store/slices'
 import { DemoState, updateDemoMode } from 'store/slices/demoSlice'
 import { logNonFatalErrorToFirebase } from 'utils/analytics'
 import { clearStoredAuthCreds, finishInitialize, retrieveRefreshToken } from 'utils/auth'
@@ -47,12 +48,8 @@ export const useLogout = () => {
   return useMutation({
     mutationFn: logout,
     onMutate: async () => {
-      const userSettings = queryClient.getQueryData(authKeys.settings) as UserAuthSettings
-      queryClient.setQueryData(authKeys.settings, {
-        ...userSettings,
-        loggingOut: true,
-        syncing: true,
-      })
+      dispatch(dispatchUpdateLoggingOut(true))
+      dispatch(dispatchUpdateSyncing(true))
       await clearCookies()
       if (demoMode) {
         dispatch(updateDemoMode(false, true))
@@ -62,7 +59,7 @@ export const useLogout = () => {
       await clearStoredAuthCreds()
       api.setAccessToken(undefined)
       api.setRefreshToken(undefined)
-      await finishInitialize(false)
+      await finishInitialize(dispatch, false)
       queryClient.clear()
     },
     onError: (error) => {

VAMobile/src/api/types/auth.ts

@@ -44,17 +44,11 @@ export enum LOGIN_PROMPT_TYPE {
 
 export type UserAuthSettings = {
   firstTimeLogin: boolean
-  loading: boolean
-  loggedIn: boolean
-  loggingOut: boolean
-  syncing: boolean
-
   authCredentials?: AuthCredentialData
 }
 
 export type UserBiometricsSettings = {
   canStoreWithBiometric: boolean
-  displayBiometricsPreferenceScreen: boolean
   shouldStoreWithBiometric: boolean
   supportedBiometric?: string
 }

VAMobile/src/screens/BiometricsPreferenceScreen/BiometricsPreferenceScreen.tsx

@@ -6,21 +6,22 @@ import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-c
 import { useBiometricsSettings } from 'api/auth'
 import { Box, TextView, VAScrollView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
-import { setBiometricsPreference, setDisplayBiometricsPreferenceScreen } from 'utils/auth'
+import { dispatchUpdateDisplayBiometricsPreferenceScreen } from 'store/slices/authSlice'
+import { setBiometricsPreference } from 'utils/auth'
 import {
   getSupportedBiometricA11yLabel,
   getSupportedBiometricText,
   getSupportedBiometricTranslationTag,
   getTranslation,
 } from 'utils/formattingUtils'
-import { useTheme } from 'utils/hooks'
+import { useAppDispatch, useTheme } from 'utils/hooks'
 
 export type SyncScreenProps = Record<string, unknown>
 
 function BiometricsPreferenceScreen({}: SyncScreenProps) {
   const theme = useTheme()
   const { t } = useTranslation(NAMESPACE.COMMON)
-
+  const dispatch = useAppDispatch()
   const { data: userBiometricSettings } = useBiometricsSettings()
   const supportedBiometric = userBiometricSettings?.supportedBiometric
   const biometricsText = getSupportedBiometricText(supportedBiometric || '', t)
@@ -31,12 +32,12 @@ function BiometricsPreferenceScreen({}: SyncScreenProps) {
   )
 
   const onSkip = (): void => {
-    setDisplayBiometricsPreferenceScreen(false)
+    dispatch(dispatchUpdateDisplayBiometricsPreferenceScreen(false))
   }
 
   const onUseBiometrics = (): void => {
     setBiometricsPreference(true)
-    setDisplayBiometricsPreferenceScreen(false)
+    dispatch(dispatchUpdateDisplayBiometricsPreferenceScreen(false))
   }
 
   return (

VAMobile/src/screens/SyncScreen/SyncScreen.tsx

@@ -20,12 +20,12 @@ import { UserAnalytics } from 'constants/analytics'
 import { TimeFrameTypeConstants } from 'constants/appointments'
 import { NAMESPACE } from 'constants/namespaces'
 import { RootState } from 'store'
-import { ErrorsState, checkForDowntimeErrors } from 'store/slices'
+import { ErrorsState, checkForDowntimeErrors, dispatchUpdateSyncing } from 'store/slices'
 import { DemoState } from 'store/slices/demoSlice'
 import colors from 'styles/themes/VAColors'
 import { setAnalyticsUserProperty } from 'utils/analytics'
 import { getUpcomingAppointmentDateRange } from 'utils/appointments'
-import { completeSync, loginFinish } from 'utils/auth'
+import { loginFinish } from 'utils/auth'
 import getEnv from 'utils/env'
 import { useAppDispatch, useOrientation, useTheme } from 'utils/hooks'
 
@@ -80,7 +80,7 @@ function SyncScreen({}: SyncScreenProps) {
 
   useEffect(() => {
     if (demoMode && !loggedIn) {
-      loginFinish(false)
+      loginFinish(dispatch, false)
     }
   }, [dispatch, demoMode, loggedIn, queryClient])
 
@@ -96,10 +96,20 @@ function SyncScreen({}: SyncScreenProps) {
     }
 
     if (!loggingOut && loggedIn && downtimeWindowsFetched && authorizedServicesFetched) {
-      completeSync()
+      dispatch(dispatchUpdateSyncing(false))
       setAnalyticsUserProperty(UserAnalytics.vama_environment(ENVIRONMENT))
     }
-  }, [loggedIn, loggingOut, downtimeWindowsFetched, authorizedServicesFetched, t, syncing, queryClient, ENVIRONMENT])
+  }, [
+    loggedIn,
+    loggingOut,
+    downtimeWindowsFetched,
+    authorizedServicesFetched,
+    t,
+    syncing,
+    queryClient,
+    ENVIRONMENT,
+    dispatch,
+  ])
 
   return (
     <VAScrollView contentContainerStyle={splashStyles} removeInsets={true}>

VAMobile/src/store/index.ts

@@ -2,6 +2,7 @@ import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit'
 
 import accessabilityReducer from 'store/slices/accessibilitySlice'
 import analyticsReducer from 'store/slices/analyticsSlice'
+import authReducer from 'store/slices/authSlice'
 import demoReducer from 'store/slices/demoSlice'
 import errorReducer from 'store/slices/errorSlice'
 import settingsReducer from 'store/slices/settingsSlice'
@@ -11,6 +12,7 @@ import snackbarReducer from 'store/slices/snackBarSlice'
 const store = configureStore({
   reducer: {
     accessibility: accessabilityReducer,
+    auth: authReducer,
     demo: demoReducer,
     errors: errorReducer,
     analytics: analyticsReducer,

VAMobile/src/store/slices/authSlice.ts

@@ -0,0 +1,51 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+
+export type AuthState = {
+  loading: boolean
+  loggedIn: boolean
+  loggingOut: boolean
+  syncing: boolean
+  displayBiometricsPreferenceScreen: boolean
+}
+
+export const initialAuthState: AuthState = {
+  loading: false,
+  loggedIn: false,
+  loggingOut: false,
+  syncing: false,
+  displayBiometricsPreferenceScreen: true,
+}
+
+/**
+ * Redux slice that will create the actions and reducers
+ */
+const authSlice = createSlice({
+  name: 'auth',
+  initialState: initialAuthState,
+  reducers: {
+    dispatchUpdateLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload
+    },
+    dispatchUpdateLoggedIn: (state, action: PayloadAction<boolean>) => {
+      state.loggedIn = action.payload
+    },
+    dispatchUpdateLoggingOut: (state, action: PayloadAction<boolean>) => {
+      state.loggingOut = action.payload
+    },
+    dispatchUpdateSyncing: (state, action: PayloadAction<boolean>) => {
+      state.syncing = action.payload
+    },
+    dispatchUpdateDisplayBiometricsPreferenceScreen: (state, action: PayloadAction<boolean>) => {
+      state.displayBiometricsPreferenceScreen = action.payload
+    },
+  },
+})
+
+export const {
+  dispatchUpdateLoading,
+  dispatchUpdateLoggedIn,
+  dispatchUpdateLoggingOut,
+  dispatchUpdateSyncing,
+  dispatchUpdateDisplayBiometricsPreferenceScreen,
+} = authSlice.actions
+export default authSlice.reducer

VAMobile/src/store/slices/index.ts

@@ -6,15 +6,19 @@ import { initialErrorsState } from 'store/slices/errorSlice'
 import { initialSettingsState } from 'store/slices/settingsSlice'
 import { initialSnackBarState } from 'store/slices/snackBarSlice'
 
+import { initialAuthState } from './authSlice'
+
 export * from './accessibilitySlice'
 export * from './analyticsSlice'
+export * from './authSlice'
 export * from './errorSlice'
 export * from './snackBarSlice'
 export * from './settingsSlice'
 
 export const InitialState: RootState = {
   errors: initialErrorsState,
   accessibility: initialAccessibilityState,
+  auth: initialAuthState,
   demo: initialDemoState,
   analytics: initialAnalyticsState,
   snackBar: initialSnackBarState,

VAMobile/src/testUtils.tsx

@@ -19,6 +19,7 @@ import { RootState } from 'store'
 import { InitialState } from 'store/slices'
 import accessabilityReducer from 'store/slices/accessibilitySlice'
 import analyticsReducer from 'store/slices/analyticsSlice'
+import authReducer from 'store/slices/authSlice'
 import demoReducer from 'store/slices/demoSlice'
 import errorReducer from 'store/slices/errorSlice'
 import settingsReducer from 'store/slices/settingsSlice'
@@ -77,6 +78,7 @@ const getConfiguredStore = (state?: Partial<RootState>) => {
   return configureStore({
     reducer: {
       accessibility: accessabilityReducer as any,
+      auth: authReducer as any,
       demo: demoReducer as any,
       errors: errorReducer as any,
       analytics: analyticsReducer as any,
@@ -206,14 +208,9 @@ function render(ui, { preloadedState, navigationProvided = false, queriesData, .
     })
     queryClient.setQueryData(authKeys.settings, {
       firstTimeLogin: false,
-      loading: false,
-      loggedIn: false,
-      loggingOut: false,
-      syncing: false,
     } as UserAuthSettings)
     queryClient.setQueryData(authKeys.biometrics, {
       canStoreWithBiometric: true,
-      displayBiometricsPreferenceScreen: true,
       shouldStoreWithBiometric: true,
       supportedBiometric: '',
     } as UserBiometricsSettings)