Front: Global Error Handling on User Profile Fetch Error

front/Navigation.tsx

@@ -1,9 +1,9 @@
 import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
 import { NavigationProp, ParamListBase, useNavigation as navigationHook } from "@react-navigation/native";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { RootState, useSelector } from './state/Store';
-import { translate } from './i18n/i18n';
+import { Translate, translate } from './i18n/i18n';
 import SongLobbyView from './views/SongLobbyView';
 import AuthenticationView from './views/AuthenticationView';
 import StartPageView from './views/StartPageView';
@@ -17,6 +17,7 @@ import ScoreView from './views/ScoreView';
 import { LoadingView } from './components/Loading';
 import ProfileView from './views/ProfileView';
 import useColorScheme from './hooks/colorScheme';
+import { Button, Center, VStack } from 'native-base';
 
 
 const protectedRoutes = () => ({
@@ -32,6 +33,7 @@ const protectedRoutes = () => ({
 const publicRoutes = () => ({
 	Start: { component: StartPageView, options: { title: "Chromacase", headerShown: false } },
 	Login: { component: AuthenticationView, options: { title: translate('signInBtn') } },
+	Oops: { component: ProfileErrorView, options: { title: 'Oops', headerShown: false } },
 }) as const;
 
 type Route<Props = any> = {
@@ -65,6 +67,16 @@ const routesToScreens = (routes: Partial<Record<keyof AppRouteParams, Route>>) =
 		/>
 	))
 
+const ProfileErrorView = (props: { onTryAgain: () => any }) => {
+	return <Center style={{ flexGrow: 1 }}>
+		<VStack space={3}>
+			<Translate translationKey='userProfileFetchError'/>
+			<Button onPress={props.onTryAgain}><Translate translationKey='tryAgain'/></Button>
+
+		</VStack>
+	</Center>
+}
+
 export const Router = () => {
 	const accessToken = useSelector((state: RootState) => state.user.accessToken);
 	const userProfile = useQuery(['user', 'me', accessToken], () => API.getUserInfo(), {
@@ -73,17 +85,25 @@ export const Router = () => {
 	});
 	const colorScheme = useColorScheme();
 
+	useEffect(() => {
+		if (accessToken) {
+			userProfile.refetch();
+		}
+	}, [accessToken]);
+
 	return (
 		<NavigationContainer theme={colorScheme == 'light'
 			? DefaultTheme
 			: DarkTheme
 		}>
 			<Stack.Navigator>
-				{ userProfile.isLoading && !userProfile.data ?
-					<Stack.Screen name="Loading" component={RouteToScreen(LoadingView)}/>
-					: routesToScreens(userProfile.isSuccess && accessToken
-						? protectedRoutes()
-						: publicRoutes())
+				{ userProfile.isError && accessToken && !userProfile.isLoading
+					? <Stack.Screen name="Oops" component={RouteToScreen(() => <ProfileErrorView onTryAgain={() => userProfile.refetch()}/>)}/>
+					: userProfile.isLoading && !userProfile.data ?
+						<Stack.Screen name="Loading" component={RouteToScreen(LoadingView)}/>
+						: routesToScreens(userProfile.isSuccess && accessToken
+							? protectedRoutes()
+							: publicRoutes())
 				}
 			</Stack.Navigator>
 		</NavigationContainer>

front/i18n/Translations.ts

@@ -96,7 +96,8 @@ export const en = {
 	unknownError: 'Unknown error',
 	errAlrdExst: 'Already exist',
 	errIncrrct: 'Incorrect Credentials',
-
+	userProfileFetchError: 'An error occured while fetching your profile',
+	tryAgain: 'Try Again',
 
 	changePassword: 'Change password',
 	oldPassword: 'Old password',
@@ -255,6 +256,8 @@ export const fr: typeof en = {
 	errAlrdExst: "Utilisateur existe déjà",
 	unknownError: 'Erreur inconnue',
 	errIncrrct: 'Identifiant incorrect',
+	userProfileFetchError: 'Une erreur est survenue lors de la récupération du profil',
+	tryAgain: 'Réessayer',
 
 	passwordUpdated: 'Mot de passe mis à jour',
 	emailUpdated: 'Email mis à jour',
@@ -401,7 +404,9 @@ export const sp: typeof en = {
 	unknownError: 'Error desconocido',
 	errAlrdExst: "Ya existe",
 	errIncrrct: "credenciales incorrectas",
-
+	userProfileFetchError: 'Ocurrió un error al obtener su perfil',
+	tryAgain: 'intentar otra vez',
+	
 	changePassword: 'Cambio de contraseña',
 	oldPassword: 'Contraseña anterior',
 	newPassword: 'Nueva contraseña',