zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front: Global Error Handling on User Profile Fetch Error

Browse Source
This commit is contained in:
Arthur Jamet
2023-04-25 15:52:38 +01:00
parent 7716c5f9c6
commit cf6b61e0e9
2 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/Navigation.tsx
+27 -7
View File
@@ -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>