From dd09827d08ece71386f29cfa38dd8e5222efccd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 9 Jan 2024 17:13:36 +0100
Subject: [PATCH] minor fixes

---
 front/Navigation.tsx              |   6 +-
 front/components/ScoreModal.tsx   |  10 +-
 front/components/UI/MusicList.tsx |   2 -
 front/views/LeaderboardView.tsx   | 240 +++++++++++++++---------------
 front/views/MusicView.tsx         |   2 +-
 front/views/PlayView.tsx          |   2 +-
 6 files changed, 130 insertions(+), 132 deletions(-)

diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index c3a06e4..d59a94a 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NativeStackNavigationProp, NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
 import {
 	NavigationProp,
 	ParamListBase,
@@ -174,7 +174,7 @@ type RouteParams<Routes extends Record<string, Route>> = {
 type PrivateRoutesParams = RouteParams<typeof protectedRoutes>;
 type PublicRoutesParams = RouteParams<typeof publicRoutes>;
 type TabsRoutesParams = RouteParams<typeof tabRoutes>;
-type AppRouteParams = PrivateRoutesParams &
+type AppRouteParams = Omit<PrivateRoutesParams, "Tabs"> & { Tabs: { screen: keyof TabsRoutesParams } } &
 	PublicRoutesParams &
 	TabsRoutesParams & { Oops: undefined };
 
@@ -324,4 +324,4 @@ export const Router = () => {
 	);
 };
 
-export const useNavigation = () => navigationHook<NavigationProp<AppRouteParams>>();
+export const useNavigation = () => navigationHook<NativeStackNavigationProp<AppRouteParams>>();
diff --git a/front/components/ScoreModal.tsx b/front/components/ScoreModal.tsx
index 7c2628c..ca79f69 100644
--- a/front/components/ScoreModal.tsx
+++ b/front/components/ScoreModal.tsx
@@ -97,7 +97,7 @@ const ScoreModal = (props: ScoreModalProps) => {
 					type="outlined"
 					title={translate('playAgain')}
 					onPress={() =>
-						navigation.dispatch(StackActions.replace('Play', { songId: props.songId }))
+						navigation.replace('Play', { songId: props.songId })
 					}
 				/>
 				<ButtonBase
@@ -105,9 +105,11 @@ const ScoreModal = (props: ScoreModalProps) => {
 					icon={Play}
 					type="filled"
 					title={translate('menuMusic')}
-					onPress={() =>
-						navigation.canGoBack() ? navigation.goBack() : navigation.navigate('Home')
-					}
+					onPress={() => {
+						navigation.canGoBack()
+							? navigation.goBack()
+							: navigation.replace('Tabs', { screen: 'Home' });
+					}}
 				/>
 			</Row>
 		</Column>
diff --git a/front/components/UI/MusicList.tsx b/front/components/UI/MusicList.tsx
index 4272ccd..c3a2bd0 100644
--- a/front/components/UI/MusicList.tsx
+++ b/front/components/UI/MusicList.tsx
@@ -194,7 +194,6 @@ function MusicListComponent({
 	// FlatList: Renders list efficiently, only rendering visible items.
 	return (
 		<FlatList
-			nestedScrollEnabled
 			style={styles.container}
 			ListHeaderComponent={headerComponent}
 			data={musicListState.displayedMusics}
@@ -225,7 +224,6 @@ const styles = StyleSheet.create({
 		flex: 1,
 		gap: 2,
 		borderRadius: 10,
-		overflow: 'hidden',
 	},
 	footerContainer: {
 		height: 60,
diff --git a/front/views/LeaderboardView.tsx b/front/views/LeaderboardView.tsx
index 6670ec1..959ff51 100644
--- a/front/views/LeaderboardView.tsx
+++ b/front/views/LeaderboardView.tsx
@@ -29,138 +29,136 @@ const Leaderboardiew = () => {
 	] as const;
 
 	return (
-		<SafeAreaView>
-			<ScrollView>
-				<Text
-					style={{
-						fontSize: 20,
-						fontWeight: '500',
-						marginBottom: 16,
-					}}
-				>
-					{translate('leaderBoardHeading')}
-				</Text>
-				<Text
-					style={{
-						fontSize: 14,
-						fontWeight: '500',
-					}}
-				>
-					{translate('leaderBoardHeadingFull')}
-				</Text>
-				<View
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						alignItems: 'flex-start',
-						paddingTop: 20,
-						flex: 1,
-						alignSelf: 'stretch',
-					}}
-				>
-					{!isPhone ? (
-						<View /** podium view */
-							style={{
-								display: 'flex',
-								flexDirection: 'row',
-								justifyContent: 'center',
-								alignItems: 'center',
-								alignSelf: 'stretch',
-								gap: 32,
-								paddingBottom: 10,
-								marginBottom: 20,
-							}}
-						>
-							<PodiumCard
-								medalColor="#AE84FB"
-								offset={120}
-								userAvatarUrl={podiumUserData[2]?.data.avatar}
-								userPseudo={podiumUserData[2]?.name}
-								userLvl={podiumUserData[2]?.data.totalScore}
-							/>
-							<PodiumCard
-								medalColor="#EAD93C"
-								offset={0}
-								userAvatarUrl={podiumUserData[0]?.data.avatar}
-								userPseudo={podiumUserData[0]?.name}
-								userLvl={podiumUserData[0]?.data.totalScore}
-							/>
-							<PodiumCard
-								medalColor="#5F74F7"
-								offset={60}
-								userAvatarUrl={podiumUserData[1]?.data.avatar}
-								userPseudo={podiumUserData[1]?.name}
-								userLvl={podiumUserData[1]?.data.totalScore}
-							/>
-						</View>
-					) : (
-						<View
-							style={{
-								display: 'flex',
-								flexDirection: 'column',
-								justifyContent: 'center',
-								alignItems: 'center',
-								alignSelf: 'stretch',
-								marginBottom: 20,
-								marginHorizontal: 10,
-							}}
-						>
-							<PodiumCard
-								medalColor="#EAD93C"
-								offset={0}
-								userAvatarUrl={podiumUserData[0]?.data.avatar}
-								userPseudo={podiumUserData[0]?.name}
-								userLvl={podiumUserData[0]?.data.totalScore}
-							/>
-							<View
-								style={{
-									display: 'flex',
-									flexDirection: 'row-reverse',
-									justifyContent: 'center',
-									alignItems: 'center',
-									gap: 64,
-								}}
-							>
-								<PodiumCard
-									medalColor="#5F74F7"
-									offset={0}
-									userAvatarUrl={podiumUserData[1]?.data.avatar}
-									userPseudo={podiumUserData[1]?.name}
-									userLvl={podiumUserData[1]?.data.totalScore}
-								/>
-								<PodiumCard
-									medalColor="#AE84FB"
-									offset={60}
-									userAvatarUrl={podiumUserData[2]?.data.avatar}
-									userPseudo={podiumUserData[2]?.name}
-									userLvl={podiumUserData[2]?.data.totalScore}
-								/>
-							</View>
-						</View>
-					)}
+		<ScrollView>
+			<Text
+				style={{
+					fontSize: 20,
+					fontWeight: '500',
+					marginBottom: 16,
+				}}
+			>
+				{translate('leaderBoardHeading')}
+			</Text>
+			<Text
+				style={{
+					fontSize: 14,
+					fontWeight: '500',
+				}}
+			>
+				{translate('leaderBoardHeadingFull')}
+			</Text>
+			<View
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'flex-start',
+					paddingTop: 20,
+					flex: 1,
+					alignSelf: 'stretch',
+				}}
+			>
+				{!isPhone ? (
+					<View /** podium view */
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'center',
+							alignItems: 'center',
+							alignSelf: 'stretch',
+							gap: 32,
+							paddingBottom: 10,
+							marginBottom: 20,
+						}}
+					>
+						<PodiumCard
+							medalColor="#AE84FB"
+							offset={120}
+							userAvatarUrl={podiumUserData[2]?.data.avatar}
+							userPseudo={podiumUserData[2]?.name}
+							userLvl={podiumUserData[2]?.data.totalScore}
+						/>
+						<PodiumCard
+							medalColor="#EAD93C"
+							offset={0}
+							userAvatarUrl={podiumUserData[0]?.data.avatar}
+							userPseudo={podiumUserData[0]?.name}
+							userLvl={podiumUserData[0]?.data.totalScore}
+						/>
+						<PodiumCard
+							medalColor="#5F74F7"
+							offset={60}
+							userAvatarUrl={podiumUserData[1]?.data.avatar}
+							userPseudo={podiumUserData[1]?.name}
+							userLvl={podiumUserData[1]?.data.totalScore}
+						/>
+					</View>
+				) : (
 					<View
 						style={{
 							display: 'flex',
 							flexDirection: 'column',
+							justifyContent: 'center',
 							alignItems: 'center',
 							alignSelf: 'stretch',
-							gap: 10,
-							paddingRight: 10,
+							marginBottom: 20,
+							marginHorizontal: 10,
 						}}
 					>
-						{scoresQuery.data.slice(3, 20).map((comp, index) => (
-							<BoardRow
-								key={comp.name + index}
-								index={index + 4}
-								userAvatarUrl={comp.data.avatar}
-								userLvl={comp.data.totalScore}
-								userPseudo={comp.name}
+						<PodiumCard
+							medalColor="#EAD93C"
+							offset={0}
+							userAvatarUrl={podiumUserData[0]?.data.avatar}
+							userPseudo={podiumUserData[0]?.name}
+							userLvl={podiumUserData[0]?.data.totalScore}
+						/>
+						<View
+							style={{
+								display: 'flex',
+								flexDirection: 'row-reverse',
+								justifyContent: 'center',
+								alignItems: 'center',
+								gap: 64,
+							}}
+						>
+							<PodiumCard
+								medalColor="#5F74F7"
+								offset={0}
+								userAvatarUrl={podiumUserData[1]?.data.avatar}
+								userPseudo={podiumUserData[1]?.name}
+								userLvl={podiumUserData[1]?.data.totalScore}
 							/>
-						))}
+							<PodiumCard
+								medalColor="#AE84FB"
+								offset={60}
+								userAvatarUrl={podiumUserData[2]?.data.avatar}
+								userPseudo={podiumUserData[2]?.name}
+								userLvl={podiumUserData[2]?.data.totalScore}
+							/>
+						</View>
 					</View>
+				)}
+				<View
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						alignSelf: 'stretch',
+						gap: 10,
+						paddingRight: 10,
+					}}
+				>
+					{scoresQuery.data.slice(3, 20).map((comp, index) => (
+						<BoardRow
+							key={comp.name + index}
+							index={index + 4}
+							userAvatarUrl={comp.data.avatar}
+							userLvl={comp.data.totalScore}
+							userPseudo={comp.name}
+						/>
+					))}
 				</View>
-			</ScrollView>
-		</SafeAreaView>
+			</View>
+		</ScrollView>
 	);
 };
 
diff --git a/front/views/MusicView.tsx b/front/views/MusicView.tsx
index 3bfb4b4..8ad6ae2 100644
--- a/front/views/MusicView.tsx
+++ b/front/views/MusicView.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useBreakpointValue, useTheme } from 'native-base';
-import { useWindowDimensions } from 'react-native';
+import { ScrollView, useWindowDimensions } from 'react-native';
 import {
 	TabView,
 	SceneMap,
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index c2bec2e..b25f518 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -134,7 +134,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 		stopwatch.stop();
 		if (webSocket.current?.readyState != WebSocket.OPEN) {
 			console.warn('onEnd: Websocket not open');
-			navigation.dispatch(StackActions.replace('Home', {}));
+			navigation.replace('Tabs', { screen: 'Home' });
 			return;
 		}
 		webSocket.current?.send(