From df682327d6cfb19be062511a245ead47faed4c99 Mon Sep 17 00:00:00 2001
From: danis <amaury.danis-cousandier@epitech.eu>
Date: Thu, 30 Nov 2023 13:34:20 +0100
Subject: [PATCH] feat(leaderboard): i might be dumb

---
 front/components/UI/ScaffoldCC.tsx |   2 +-
 front/views/HomeView.tsx           |   2 +-
 front/views/LeaderboardView.tsx    | 218 +++++++++++++++--------------
 3 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx
index c761200..c6070a0 100644
--- a/front/components/UI/ScaffoldCC.tsx
+++ b/front/components/UI/ScaffoldCC.tsx
@@ -13,7 +13,7 @@ const menu = [
 	{ type: 'main', title: 'menuProfile', icon: User, link: 'User' },
 	{ type: 'main', title: 'menuMusic', icon: Music, link: 'Music' },
 	{ type: 'main', title: 'menuSearch', icon: SearchNormal1, link: 'Search' },
-	{ type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Score' },
+	{ type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Leaderboard' },
 	{ type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' },
 ] as const;
 
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 1023bd1..b057acd 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -122,7 +122,7 @@ const HomeView = (props: RouteProps<{}>) => {
 							translate={{ translationKey: 'leaderboardTitle' }}
 							colorScheme="primary"
 							size="sm"
-							onPress={() => navigation.navigate('Leaderboard')}
+							onPress={() => navigation.navigate('Leaderboard', {})}
 						/>
 						<TextButton
 							label={'V2'}
diff --git a/front/views/LeaderboardView.tsx b/front/views/LeaderboardView.tsx
index b56104e..e5c4d8a 100644
--- a/front/views/LeaderboardView.tsx
+++ b/front/views/LeaderboardView.tsx
@@ -1,11 +1,11 @@
-import { Box, Heading, useBreakpointValue, ScrollView, Text } from 'native-base';
+import { useBreakpointValue, ScrollView, Text } from 'native-base';
 import { View, Image } from 'react-native';
 import { useQuery } from '../Queries';
 import API from '../API';
-import { Ionicons } from '@expo/vector-icons';
 import { LoadingView } from '../components/Loading';
-import { useNavigation } from '../Navigation';
+import { useNavigation, RouteProps } from '../Navigation';
 import { MedalStar } from 'iconsax-react-native';
+import ScaffoldCC from '../components/UI/ScaffoldCC';
 
 type PodiumCardProps = {
 	offset: number;
@@ -175,7 +175,7 @@ const BoardRowComponent = ({ userAvatarUrl, userPseudo, userLvl, index }: BoardR
 	);
 };
 
-const Leaderboardiew = () => {
+const Leaderboardiew = (props: RouteProps<{}>) => {
 	const navigation = useNavigation();
 	const scoresQuery = useQuery(API.getTopTwentyPlayers());
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
@@ -186,107 +186,43 @@ const Leaderboardiew = () => {
 		return <></>;
 	}
 	if (scoresQuery.data === undefined) {
-		return <LoadingView />;
+		return (
+			<ScaffoldCC routeName={props.route.name}>
+				<LoadingView />
+			</ScaffoldCC>
+		);
 	}
 
 	return (
-		<ScrollView style={{ marginBottom: 5 }}>
-			<View
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					alignItems: 'flex-start',
-					flex: 1,
-					flexGrow: 1,
-					flexShrink: 0,
-					flexBasis: 0,
-					alignSelf: 'stretch',
-				}}
-			>
-				{!isPhone ? (
-					<View /** podium view */
-						style={{
-							display: 'flex',
-							flexDirection: 'row',
-							justifyContent: 'center',
-							alignItems: 'center',
-							alignSelf: 'stretch',
-							paddingBottom: 10,
-							marginBottom: 20,
-						}}
-					>
-						<PodiumCardComponent
-							medalColor="#AE84FB"
-							offset={80}
-							userAvatarUrl={
-								scoresQuery.data?.at(2)?.data.avatar ??
-								'https://picsum.photos/140/140'
-							}
-							userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
-							userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
-						/>
-						<PodiumCardComponent
-							medalColor="#EAD93C"
-							offset={0}
-							userAvatarUrl={
-								scoresQuery.data?.at(0)?.data.avatar ??
-								'https://picsum.photos/140/140'
-							}
-							userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
-							userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
-						/>
-						<PodiumCardComponent
-							medalColor="#5F74F7"
-							offset={60}
-							userAvatarUrl={
-								scoresQuery.data?.at(1)?.data.avatar ??
-								'https://picsum.photos/140/140'
-							}
-							userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
-							userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
-						/>
-					</View>
-				) : (
-					<View
-						style={{
-							display: 'flex',
-							flexDirection: 'column',
-							justifyContent: 'center',
-							alignItems: 'center',
-							alignSelf: 'stretch',
-						}}
-					>
-						<PodiumCardComponent
-							medalColor="#AE84FB"
-							offset={80}
-							userAvatarUrl={
-								scoresQuery.data?.at(0)?.data.avatar ??
-								'https://picsum.photos/140/140'
-							}
-							userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
-							userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
-						/>
-						<View
+		<ScaffoldCC routeName={props.route.name}>
+			<ScrollView style={{ marginBottom: 5 }}>
+				<View
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'flex-start',
+						flex: 1,
+						flexGrow: 1,
+						flexShrink: 0,
+						flexBasis: 0,
+						alignSelf: 'stretch',
+					}}
+				>
+					{!isPhone ? (
+						<View /** podium view */
 							style={{
 								display: 'flex',
 								flexDirection: 'row',
 								justifyContent: 'center',
 								alignItems: 'center',
+								alignSelf: 'stretch',
+								paddingBottom: 10,
+								marginBottom: 20,
 							}}
 						>
 							<PodiumCardComponent
-								medalColor="#EAD93C"
-								offset={0}
-								userAvatarUrl={
-									scoresQuery.data?.at(1)?.data.avatar ??
-									'https://picsum.photos/140/140'
-								}
-								userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
-								userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
-							/>
-							<PodiumCardComponent
-								medalColor="#5F74F7"
-								offset={60}
+								medalColor="#AE84FB"
+								offset={80}
 								userAvatarUrl={
 									scoresQuery.data?.at(2)?.data.avatar ??
 									'https://picsum.photos/140/140'
@@ -294,19 +230,89 @@ const Leaderboardiew = () => {
 								userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
 								userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
 							/>
+							<PodiumCardComponent
+								medalColor="#EAD93C"
+								offset={0}
+								userAvatarUrl={
+									scoresQuery.data?.at(0)?.data.avatar ??
+									'https://picsum.photos/140/140'
+								}
+								userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
+								userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
+							/>
+							<PodiumCardComponent
+								medalColor="#5F74F7"
+								offset={60}
+								userAvatarUrl={
+									scoresQuery.data?.at(1)?.data.avatar ??
+									'https://picsum.photos/140/140'
+								}
+								userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
+								userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
+							/>
 						</View>
-					</View>
-				)}
-				{scoresQuery.data.slice(3).map((comp: any, index: number) => (
-					<BoardRowComponent
-						index={index}
-						userAvatarUrl={comp?.avatar ?? 'https://picsum.photos/50/50'}
-						userLvl={comp?.data.totalScore ?? 42}
-						userPseudo={comp?.name ?? '---'}
-					/>
-				))}
-			</View>
-		</ScrollView>
+					) : (
+						<View
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								justifyContent: 'center',
+								alignItems: 'center',
+								alignSelf: 'stretch',
+							}}
+						>
+							<PodiumCardComponent
+								medalColor="#AE84FB"
+								offset={80}
+								userAvatarUrl={
+									scoresQuery.data?.at(0)?.data.avatar ??
+									'https://picsum.photos/140/140'
+								}
+								userPseudo={scoresQuery.data?.at(0)?.name ?? '---'}
+								userLvl={scoresQuery.data?.at(0)?.data.totalScore ?? 42}
+							/>
+							<View
+								style={{
+									display: 'flex',
+									flexDirection: 'row',
+									justifyContent: 'center',
+									alignItems: 'center',
+								}}
+							>
+								<PodiumCardComponent
+									medalColor="#EAD93C"
+									offset={0}
+									userAvatarUrl={
+										scoresQuery.data?.at(1)?.data.avatar ??
+										'https://picsum.photos/140/140'
+									}
+									userPseudo={scoresQuery.data?.at(1)?.name ?? '---'}
+									userLvl={scoresQuery.data?.at(1)?.data.totalScore ?? 42}
+								/>
+								<PodiumCardComponent
+									medalColor="#5F74F7"
+									offset={60}
+									userAvatarUrl={
+										scoresQuery.data?.at(2)?.data.avatar ??
+										'https://picsum.photos/140/140'
+									}
+									userPseudo={scoresQuery.data?.at(2)?.name ?? '---'}
+									userLvl={scoresQuery.data?.at(2)?.data.totalScore ?? 42}
+								/>
+							</View>
+						</View>
+					)}
+					{scoresQuery.data.slice(3).map((comp: any, index: number) => (
+						<BoardRowComponent
+							index={index}
+							userAvatarUrl={comp?.avatar ?? 'https://picsum.photos/50/50'}
+							userLvl={comp?.data.totalScore ?? 42}
+							userPseudo={comp?.name ?? '---'}
+						/>
+					))}
+				</View>
+			</ScrollView>
+		</ScaffoldCC>
 	);
 };