Front: If resource is not found, redirect to Error View

front/API.ts

@@ -72,7 +72,7 @@ export default class API {
 		try {
 			const jsonResponse = body.length != 0 ? JSON.parse(body) : {};
 			if (!response.ok) {
-				throw new APIError(jsonResponse ?? response.statusText, response.status);
+				throw new APIError(response.statusText ?? body, response.status);
 			}
 			return jsonResponse;
 		} catch (e) {

front/Navigation.tsx

@@ -27,6 +27,7 @@ import ArtistDetailsView from './views/ArtistDetailsView';
 import { Button, Center, VStack } from 'native-base';
 import { unsetAccessToken } from './state/UserSlice';
 import TextButton from './components/TextButton';
+import ErrorView from './views/ErrorView';
 
 const protectedRoutes = () =>
 	({
@@ -64,6 +65,11 @@ const protectedRoutes = () =>
 			options: { title: translate('search') },
 			link: '/search/:query?',
 		},
+		Error: {
+			component: ErrorView,
+			options: { title: translate('error'), headerLeft: null },
+			link: undefined,
+		},
 		User: { component: ProfileView, options: { title: translate('user') }, link: '/user' },
 	} as const);
 

front/i18n/Translations.ts

@@ -1,4 +1,7 @@
 export const en = {
+	error: 'Error',
+	goBackHome: 'Go Back Home',
+	anErrorOccured: 'An Error Occured',
 	welcome: 'Welcome',
 	welcomeMessage: 'Welcome back ',
 	signOutBtn: 'Sign out',
@@ -179,6 +182,9 @@ export const en = {
 };
 
 export const fr: typeof en = {
+	error: 'Erreur',
+	goBackHome: "Retourner à l'accueil",
+	anErrorOccured: 'Une Errur est survenue',
 	welcome: 'Bienvenue',
 	welcomeMessage: 'Re-Bonjour ',
 	signOutBtn: 'Se déconnecter',
@@ -357,6 +363,9 @@ export const fr: typeof en = {
 };
 
 export const sp: typeof en = {
+	error: 'Error',
+	anErrorOccured: 'ocurrió un error',
+	goBackHome: 'regresar a casa',
 	welcomeMessage: 'Benvenido',
 	signOutBtn: 'Desconectarse',
 	signInBtn: 'Connectarse',

front/views/ArtistDetailsView.tsx

@@ -2,8 +2,9 @@ import { VStack, Image, Heading, IconButton, Icon, Container } from 'native-base
 import { Ionicons } from '@expo/vector-icons';
 import { SafeAreaView } from 'react-native';
 import { useQuery } from 'react-query';
-import LoadingComponent from '../components/Loading';
+import { LoadingView } from '../components/Loading';
 import API from '../API';
+import { useNavigation } from '../Navigation';
 
 const handleFavorite = () => {};
 
@@ -12,12 +13,19 @@ type ArtistDetailsViewProps = {
 };
 
 const ArtistDetailsView = ({ artistId }: ArtistDetailsViewProps) => {
-	const { isLoading, data: artistData } = useQuery(['artist', artistId], () =>
-		API.getArtist(artistId)
-	);
+	const navigation = useNavigation();
+	const {
+		isLoading,
+		data: artistData,
+		isError,
+	} = useQuery(['artist', artistId], () => API.getArtist(artistId));
 
 	if (isLoading) {
-		return <LoadingComponent />;
+		return <LoadingView />;
+	}
+
+	if (isError) {
+		navigation.navigate('Error');
 	}
 
 	return (

front/views/ErrorView.tsx

@@ -0,0 +1,19 @@
+import { Button, Center, VStack } from 'native-base';
+import Translate from '../components/Translate';
+import { useNavigation } from '../Navigation';
+
+const ErrorView = () => {
+	const navigation = useNavigation();
+	return (
+		<Center style={{ flexGrow: 1 }}>
+			<VStack space={3} alignItems="center">
+				<Translate translationKey="anErrorOccured" />
+				<Button onPress={() => navigation.navigate('Home')}>
+					<Translate translationKey="goBackHome" />
+				</Button>
+			</VStack>
+		</Center>
+	);
+};
+
+export default ErrorView;

front/views/SongLobbyView.tsx

@@ -29,6 +29,10 @@ const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
 	}, [chaptersOpen]);
 	useEffect(() => {}, [songQuery.isLoading]);
 	if (songQuery.isLoading || scoresQuery.isLoading) return <LoadingView />;
+	if (songQuery.isError || scoresQuery.isError) {
+		navigation.navigate('Error');
+		return <></>;
+	}
 	return (
 		<Box style={{ padding: 30, flexDirection: 'column' }}>
 			<Box style={{ flexDirection: 'row', height: '30%' }}>

front/views/settings/SettingsView.tsx

@@ -79,7 +79,7 @@ type SetttingsNavigatorProps = {
 const SetttingsNavigator = (props?: RouteProps<SetttingsNavigatorProps>) => {
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
 	const user = useMemo(() => userQuery.data, [userQuery]);
-	console.log(props?.screen);
+
 	if (userQuery.isLoading) {
 		return (
 			<Center style={{ flex: 1 }}>