Front: Get Rid of external image, load local assets

front/views/ProfileView.tsx

@@ -1,46 +1,31 @@
 import React from 'react';
-import { Dimensions, View } from 'react-native';
-import { Box, Image, Heading, HStack } from 'native-base';
+import { View } from 'react-native';
+import { Box, Heading, HStack } from 'native-base';
 import { useNavigation } from '../Navigation';
 import TextButton from '../components/TextButton';
 import UserAvatar from '../components/UserAvatar';
-
-const ProfilePictureBannerAndLevel = () => {
-	const username = 'Username';
-	const level = '1';
-
-	// banner size
-	const dimensions = Dimensions.get('window');
-	const imageHeight = dimensions.height / 5;
-	const imageWidth = dimensions.width;
-
-	// need to change the padding for the username and level
-
-	return (
-		<View style={{ flexDirection: 'row' }}>
-			<Image
-				source={{ uri: 'https://wallpaperaccess.com/full/317501.jpg' }}
-				size="lg"
-				style={{ height: imageHeight, width: imageWidth, zIndex: 0, opacity: 0.5 }}
-			/>
-			<HStack zIndex={1} space={3} position={'absolute'} marginY={10} marginX={10}>
-				<UserAvatar size="lg" />
-				<Box>
-					<Heading>{username}</Heading>
-					<Heading>Level : {level}</Heading>
-				</Box>
-			</HStack>
-		</View>
-	);
-};
+import { LoadingView } from '../components/Loading';
+import { useQuery } from '../Queries';
+import API from '../API';
 
 const ProfileView = () => {
 	const navigation = useNavigation();
+	const userQuery = useQuery(API.getUserInfo);
+	
+	if (!userQuery.data) {
+		return <LoadingView/>
+	}
 
 	return (
 		<View style={{ flexDirection: 'column' }}>
-			<ProfilePictureBannerAndLevel />
-			<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50} zIndex={1}>
+			<HStack space={3} marginY={10} marginX={10}>
+				<UserAvatar size="lg" />
+				<Box>
+					<Heading>{userQuery.data.name}</Heading>
+					<Heading>XP : {userQuery.data.data.xp}</Heading>
+				</Box>
+			</HStack>
+			<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50}>
 				<TextButton
 					onPress={() => navigation.navigate('Settings', { screen: 'profile' })}
 					translate={{ translationKey: 'settingsBtn' }}

front/views/StartPageView.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import { useNavigation } from '../Navigation';
 import {
@@ -6,7 +7,6 @@ import {
 	Stack,
 	Box,
 	useToast,
-	AspectRatio,
 	Column,
 	useBreakpointValue,
 	Image,
@@ -15,6 +15,7 @@ import {
 	Row,
 	Heading,
 	Icon,
+	Button,
 } from 'native-base';
 import { FontAwesome5 } from '@expo/vector-icons';
 import BigActionButton from '../components/BigActionButton';
@@ -22,6 +23,8 @@ import API, { APIError } from '../API';
 import { setAccessToken } from '../state/UserSlice';
 import { useDispatch } from '../state/Store';
 import { translate } from '../i18n/i18n';
+import useColorScheme from '../hooks/colorScheme';
+import { useAssets } from 'expo-asset';
 
 const handleGuestLogin = async (apiSetter: (accessToken: string) => void): Promise<string> => {
 	const apiAccess = await API.createAndGetGuestAccount();
@@ -29,25 +32,20 @@ const handleGuestLogin = async (apiSetter: (accessToken: string) => void): Promi
 	return translate('loggedIn');
 };
 
-const imgLogin =
-	'https://media.discordapp.net/attachments/717080637038788731/1095980610981478470/Octopus_a_moder_style_image_of_a_musician_showing_a_member_card_c0b9072c-d834-40d5-bc83-796501e1382c.png?width=657&height=657';
-const imgGuest =
-	'https://media.discordapp.net/attachments/717080637038788731/1095996800835539014/Chromacase_guest_2.png?width=865&height=657';
-const imgRegister =
-	'https://media.discordapp.net/attachments/717080637038788731/1095991220267929641/chromacase_register.png?width=1440&height=511';
-
-const imgBanner =
-	'https://chromacase.studio/wp-content/uploads/2023/03/music-sheet-music-color-2462438.jpg';
-
-const imgLogo =
-	'https://chromacase.studio/wp-content/uploads/2023/03/cropped-cropped-splashLogo-280x300.png';
-
 const StartPageView = () => {
 	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isSmallScreen = screenSize === 'small';
 	const dispatch = useDispatch();
+	const colorScheme = useColorScheme();
 	const toast = useToast();
+	const [icon] = useAssets(colorScheme == 'light'
+		? require('../assets/icon_light.png')
+		: require('../assets/icon_dark.png')
+	)
+	const [loginBanner] = useAssets(require('../assets/auth/login_banner.png'));
+	const [guestBanner] = useAssets(require('../assets/auth/guest_banner.png'));
+	const [registerBanner] = useAssets(require('../assets/auth/register_banner.png'));
 
 	return (
 		<View
@@ -63,14 +61,14 @@ const StartPageView = () => {
 						justifyContent: 'center',
 						marginTop: 20,
 					}}
+					space={3}
 				>
 					<Icon
 						as={
 							<Image
 								alt="Chromacase logo"
-								source={{
-									uri: imgLogo,
-								}}
+								// source={{ uri: titleBanner?.at(0)?.uri }}
+								source={{ uri: icon?.at(0)?.uri }}
 							/>
 						}
 						size={isSmallScreen ? '5xl' : '6xl'}
@@ -89,7 +87,7 @@ const StartPageView = () => {
 				<BigActionButton
 					title="Authenticate"
 					subtitle="Save and resume your learning at anytime on all devices"
-					image={imgLogin}
+					image={loginBanner?.at(0)?.uri}
 					iconName="user"
 					iconProvider={FontAwesome5}
 					onPress={() => navigation.navigate('Login', {})}
@@ -102,7 +100,7 @@ const StartPageView = () => {
 				<BigActionButton
 					title="Test Chromacase"
 					subtitle="Use a guest account to see around but your progression won't be saved"
-					image={imgGuest}
+					image={guestBanner?.at(0)?.uri}
 					iconName="user-clock"
 					iconProvider={FontAwesome5}
 					onPress={() => {
@@ -128,7 +126,7 @@ const StartPageView = () => {
 			<Center>
 				<BigActionButton
 					title="Register"
-					image={imgRegister}
+					image={registerBanner?.at(0)?.uri}
 					subtitle="Create an account to save your progress"
 					iconProvider={FontAwesome5}
 					iconName="user-plus"
@@ -176,44 +174,12 @@ const StartPageView = () => {
 						}}
 					>
 						<Link
-							href="https://chromacase.studio"
+							href="https://chroma-case.github.io/"
 							isExternal
-							style={{
-								width: 'clamp(200px, 100%, 700px)',
-								position: 'relative',
-								overflow: 'hidden',
-								borderRadius: 10,
-							}}
 						>
-							<AspectRatio ratio={40 / 9} style={{ width: '100%' }}>
-								<Image
-									alt="Chromacase Banner"
-									source={{ uri: imgBanner }}
-									resizeMode="cover"
-								/>
-							</AspectRatio>
-							<Box
-								style={{
-									position: 'absolute',
-									top: 0,
-									left: 0,
-									width: '100%',
-									height: '100%',
-									backgroundColor: 'rgba(0,0,0,0.5)',
-								}}
-							></Box>
-							<Heading
-								fontSize="2xl"
-								style={{
-									textAlign: 'center',
-									position: 'absolute',
-									top: '40%',
-									left: 20,
-									color: 'white',
-								}}
-							>
-								Click here for more infos
-							</Heading>
+							<Button>
+								Click here for more info
+							</Button>
 						</Link>
 					</Box>
 				</Box>