front: add missing translation components

front/components/SearchResult.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
 	VStack,
 	Heading,
-	Text,
 	Box,
 	Card,
 	Flex,
@@ -93,9 +92,7 @@ const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 
 	return (
 		<ScrollView>
-			<Text fontSize="xl" fontWeight="bold" mt={4}>
-				{translate('songsFilter')}
-			</Text>
+			<Translate translationKey='songsFilter' fontSize="xl" fontWeight="bold" mt={4}/>
 			<Box>
 				{songData?.length ? (
 					songData.slice(0, props.maxRows).map((comp, index) => (
@@ -132,9 +129,7 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => {
 
 	return (
 		<Box>
-			<Text fontSize="xl" fontWeight="bold" mt={4}>
-				{translate('artistFilter')}
-			</Text>
+			<Translate translationKey='artistFilter' fontSize="xl" fontWeight="bold" mt={4} />
 			{artistData?.length ? (
 				<CardGridCustom
 					content={artistData
@@ -163,9 +158,7 @@ const GenreSearchComponent = (props: ItemSearchComponentProps) => {
 
 	return (
 		<Box>
-			<Text fontSize="xl" fontWeight="bold" mt={4}>
-				{translate('genreFilter')}
-			</Text>
+			<Translate translationKey='genreFilter' fontSize="xl" fontWeight="bold" mt={4}/>
 			{genreData?.length ? (
 				<CardGridCustom
 					content={genreData.slice(0, props.maxItems ?? genreData.length).map((g) => ({
@@ -200,9 +193,7 @@ const FavoritesComponent = () => {
 
 	return (
 		<ScrollView>
-			<Text fontSize="xl" fontWeight="bold" mt={4}>
-				{translate('songsFilter')}
-			</Text>
+			<Translate translationKey='songsFilter' fontSize="xl" fontWeight="bold" mt={4}/>
 			<Box>
 				{favoritesQuery.data?.map((songData) => (
 					<FavSongRow

front/components/UI/ScaffoldDesktopCC.tsx

@@ -6,7 +6,7 @@ import API from '../../API';
 import ButtonBase from './ButtonBase';
 import { Icon } from 'iconsax-react-native';
 import { LoadingView } from '../Loading';
-import { TranslationKey, translate } from '../../i18n/i18n';
+import { Translate, TranslationKey, translate } from '../../i18n/i18n';
 import { useNavigation } from '../../Navigation';
 import Spacer from './Spacer';
 import User from '../../models/User';
@@ -55,7 +55,7 @@ const SongHistory = (props: { quantity: number }) => {
 	return (
 		<View>
 			{musics.length === 0 ? (
-				<Text style={{ paddingHorizontal: 16 }}>{translate('menuNoSongsPlayedYet')}</Text>
+				<Translate style={{ paddingHorizontal: 16 }} translationKey='menuNoSongsPlayedYet'/>
 			) : (
 				musics.map((song) => (
 					<View
@@ -117,7 +117,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
 						/>
 						{!isSmallScreen && (
 							<Text fontSize={'xl'} selectable={false}>
-								Chromacase
+								ChromaCase
 							</Text>
 						)}
 					</Row>

front/i18n/Translations.ts

@@ -307,7 +307,13 @@ export const en = {
 	gamesPlayed: 'Games Played',
 	metronome: 'Metronome',
 	loading: "Loading... Please Wait",
-	emailCheckFailed: 'Email verification failed. The token has expired or is invalid.'
+	emailCheckFailed: 'Email verification failed. The token has expired or is invalid.',
+	chromacasePitch: 'Chromacase is a free and open source project that aims to provide a complete learning experience for anyone willing to learn piano.',
+	whatIsChromacase: 'What is Chromacase?',
+	clickHereForMoreInfo: 'Click here for more info',
+	forgotPassword: 'I forgot my password',
+	updateProfile: 'Update Profile',
+	accountCreatedOn: 'Account Created on'
 };
 
 export const fr: typeof en = {
@@ -619,7 +625,13 @@ export const fr: typeof en = {
 	gamesPlayed: 'Parties Jouées',
 	metronome: 'Métronome',
 	loading: "Chargement en cours... Veuillez Patienter",
-	emailCheckFailed: 'Email verification failed. The token has expired or is invalid.'
+	emailCheckFailed: 'La vérification du mail a échoué',
+	chromacasePitch: 'ChromaCase est une solution gratuite et opens-source qui cherche à fournir une experience d\'apprentissage complete pour toutes les perosnne qui chercheraient à apprendre le piano.',
+	whatIsChromacase: 'Chromacase c\'est quoi?',
+	clickHereForMoreInfo: 'cliquez ici pour plus d\'info',
+	forgotPassword: 'J\'ai oublié mon mot de passe',
+	updateProfile: 'Changer le Profile',
+	accountCreatedOn: 'Compte créé le'
 };
 
 export const sp: typeof en = {

front/views/MusicView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Center, Text, useBreakpointValue, useTheme } from 'native-base';
+import { Center, useBreakpointValue, useTheme } from 'native-base';
 import { useWindowDimensions } from 'react-native';
 import {
 	TabView,
@@ -12,7 +12,7 @@ import {
 import { Heart, Clock, StatusUp, FolderCross } from 'iconsax-react-native';
 import { Scene } from 'react-native-tab-view/lib/typescript/src/types';
 import { RouteProps, useNavigation } from '../Navigation';
-import { Translate, TranslationKey, translate } from '../i18n/i18n';
+import { Translate, TranslationKey } from '../i18n/i18n';
 import ScaffoldCC from '../components/UI/ScaffoldCC';
 import MusicList from '../components/UI/MusicList';
 import { useQuery } from '../Queries';
@@ -171,9 +171,7 @@ const MusicTab = (props: RouteProps<object>) => {
 			}}
 			renderLabel={({ route, color }) =>
 				layout.width > 800 && (
-					<Text style={{ color: color, paddingLeft: 10, overflow: 'hidden' }}>
-						{translate(route.title as TranslationKey)}
-					</Text>
+					<Translate translationKey={route.title as TranslationKey} style={{ color: color, paddingLeft: 10, overflow: 'hidden' }}/>
 				)
 			}
 			tabStyle={{ flexDirection: 'row' }}

front/views/PlayView.tsx

@@ -380,9 +380,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 								alignItems: 'center',
 							}}
 						>
-							<Text color={statColor} fontSize={12}>
-								<Translate translationKey={label} />
-							</Text>
+							<Translate translationKey={label} color={statColor} fontSize={12} />
 							<View
 								style={{
 									display: 'flex',

front/views/ProfileView.tsx

@@ -81,14 +81,14 @@ const ProfileView = (props: RouteProps<{}>) => {
 								{userQuery.data.name}
 							</Text>
 							<ButtonBase
-								title="Modifier profil"
+								title={translate('updateProfile')}
 								type={'filled'}
 								onPress={async () => navigation.navigate('Settings', {})}
 							/>
 						</View>
-						<Text style={{ paddingBottom: 10, fontWeight: 'bold' }}>
-							Account created on {userQuery.data.data.createdAt.toLocaleDateString()}
-						</Text>
+						<Translate style={{ paddingBottom: 10, fontWeight: 'bold' }} translationKey='accountCreatedOn' format={(e) => (
+							`${e} ${userQuery.data.data.createdAt.toLocaleDateString()}`
+						)} />
 						<Flex
 							style={{
 								flexDirection: 'row',
@@ -96,15 +96,12 @@ const ProfileView = (props: RouteProps<{}>) => {
 								paddingBottom: 10,
 							}}
 						>
-							<Text style={{ paddingRight: 20 }}>
-								Your client ID is {userQuery.data.id}
-							</Text>
 							<Translate translationKey="gamesPlayed" format={(e) => `${userQuery.data.data.gamesPlayed} ${e}`} />
 						</Flex>
 					</Column>
 				</View>
 				<Row style={{ alignItems: 'center', paddingBottom: 20 }}>
-					<Text style={{ paddingRight: 20 }}>{`${translate('level')} ${level}`}</Text>
+					<Translate style={{ paddingRight: 20 }} translationKey='level'  format={(e) => `${e} ${level}`} />
 					<Progress
 						bgColor={colors.coolGray[500]}
 						value={progessValue}

front/views/StartPageView.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { useNavigation } from '../Navigation';
 import {
 	View,
-	Text,
 	Stack,
 	Box,
 	useToast,
@@ -21,7 +20,7 @@ import BigActionButton from '../components/BigActionButton';
 import API, { APIError } from '../API';
 import { setAccessToken } from '../state/UserSlice';
 import { useDispatch } from '../state/Store';
-import { translate } from '../i18n/i18n';
+import { Translate, translate } from '../i18n/i18n';
 import useColorScheme from '../hooks/colorScheme';
 import { useAssets } from 'expo-asset';
 
@@ -73,7 +72,7 @@ const StartPageView = () => {
 						}
 						size={isSmallScreen ? '5xl' : '6xl'}
 					/>
-					<Heading fontSize={isSmallScreen ? '3xl' : '5xl'}>Chromacase</Heading>
+					<Heading fontSize={isSmallScreen ? '3xl' : '5xl'}>ChromaCase</Heading>
 				</Row>
 			</Center>
 			<Stack
@@ -154,12 +153,9 @@ const StartPageView = () => {
 					}}
 				>
 					<Heading fontSize="4xl" style={{ textAlign: 'center' }}>
-						What is Chromacase?
+						<Translate translationKey='whatIsChromacase' />
 					</Heading>
-					<Text fontSize={'xl'}>
-						Chromacase is a free and open source project that aims to provide a complete
-						learning experience for anyone willing to learn piano.
-					</Text>
+					<Translate fontSize={'xl'} translationKey='chromacasePitch' />
 				</Box>
 
 				<Box
@@ -177,7 +173,7 @@ const StartPageView = () => {
 						}}
 					>
 						<Link href="http://eip.epitech.eu/2024/chromacase" isExternal>
-							Click here for more info
+							<Translate translationKey='clickHereForMoreInfo' />
 						</Link>
 					</Box>
 				</Box>
@@ -195,7 +191,9 @@ const StartPageView = () => {
 							alignItems: 'center',
 						}}
 					>
-						<Link href="/forgot_password">I forgot my password</Link>
+						<Link href="/forgot_password">
+							<Translate translationKey='forgotPassword' />
+						</Link>
 					</Box>
 				</Box>
 			</Column>