From 66048ca7935e7f4fce0427d4307a8e3313e4b595 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Sun, 19 Nov 2023 16:27:40 +0100
Subject: [PATCH] Front: Prettier

---
 front/i18n/Translations.ts |  9 +++--
 front/views/PlayView.tsx   | 71 ++++++++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts
index fca7ca0..85c8cc6 100644
--- a/front/i18n/Translations.ts
+++ b/front/i18n/Translations.ts
@@ -298,7 +298,8 @@ export const en = {
 	changeIt: 'Change It',
 	verified: 'Verified',
 	selectPlayMode: 'Select a play mode',
-	selectPlayModeExplaination: "'Practice' only considers the notes you play, while 'Play' mode also takes rhythm into account."
+	selectPlayModeExplaination:
+		"'Practice' only considers the notes you play, while 'Play' mode also takes rhythm into account.",
 };
 
 export const fr: typeof en = {
@@ -602,7 +603,8 @@ export const fr: typeof en = {
 	changeIt: 'Modifier',
 	verified: 'Verifié',
 	selectPlayMode: 'Sélectionnez un mode de jeu',
-	selectPlayModeExplaination: "Le mode 'S'entrainer' ne compte que les notes, tandis que le mode 'Jouer' prend en compte à la fois les notes et le rythme."
+	selectPlayModeExplaination:
+		"Le mode 'S'entrainer' ne compte que les notes, tandis que le mode 'Jouer' prend en compte à la fois les notes et le rythme.",
 };
 
 export const sp: typeof en = {
@@ -912,5 +914,6 @@ export const sp: typeof en = {
 	changeIt: 'Cambialo',
 	verified: 'Verified',
 	selectPlayMode: 'Selecciona un modo de juego',
-	selectPlayModeExplaination: "El modo 'práctica' solo cuenta notas, mientras que el modo 'reproducir' tiene en cuenta tanto las notas como el ritmo."
+	selectPlayModeExplaination:
+		"El modo 'práctica' solo cuenta notas, mientras que el modo 'reproducir' tiene en cuenta tanto las notas como el ritmo.",
 };
diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 86596bf..aeb72e9 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -90,7 +90,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 	const [paused, setPause] = useState<boolean>(true);
 	const stopwatch = useStopwatch();
 	const [time, setTime] = useState(0);
-	const songHistory = useQuery(API.getSongHistory(songId), { refetchOnWindowFocus: true });
+	const songHistory = useQuery(API.getSongHistory(songId));
 	const [partitionRendered, setPartitionRendered] = useState(false); // Used to know when partitionview can render
 	const [score, setScore] = useState(0); // Between 0 and 100
 	// const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -109,7 +109,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 	});
 	const colorScheme = useColorScheme();
 	const { colors } = useTheme();
-	const textColor = colorScheme == 'dark' ? colors.lightText : colors.coolGray[800];
+	const textColor = colors.text;
+	const statColor = colors.lightText;
 
 	const onPause = () => {
 		stopwatch.pause();
@@ -303,7 +304,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 		}
 	}, [song.data, partitionRendered]);
 
-	if (!song.data || !songHistory.data) {
+	if (!song.data) {
 		return <LoadingView />;
 	}
 	return (
@@ -335,12 +336,16 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 						title={translate('selectPlayMode')}
 						description={translate('selectPlayModeExplaination')}
 						isVisible={type === undefined}
-						setIsVisible={navigation.canGoBack() ? (isVisible) => {
-							if (!isVisible) {
-								// If we dismiss the popup, Go to previous page
-								navigation.goBack();
-							}
-						} : undefined}
+						setIsVisible={
+							navigation.canGoBack()
+								? (isVisible) => {
+										if (!isVisible) {
+											// If we dismiss the popup, Go to previous page
+											navigation.goBack();
+										}
+								  }
+								: undefined
+						}
 					>
 						<Row style={{ justifyContent: 'space-between' }}>
 							<ButtonBase
@@ -351,16 +356,26 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 							/>
 							<ButtonBase
 								style={{}}
-								type='filled'
+								type="filled"
 								title={translate('playBtn')}
 								onPress={async () => setType('normal')}
 							/>
 						</Row>
 					</PopupCC>
-					
-					{/* eslint-disable-next-line react/jsx-key*/}
-					{([['lastScore', songHistory.data.best ?? 0, <Clock color={textColor.toString()}/>], ['bestScore', songHistory.data.history.at(0)?.score ?? 0, <Cup color={textColor.toString()}/>]] as const)
-						.map(([label, value, icon]) => (
+					{(
+						[
+							[
+								'lastScore',
+								songHistory.data?.best ?? 0,
+								() => <Clock color={statColor} />,
+							] as const,
+							[
+								'bestScore',
+								songHistory.data?.history.at(0)?.score ?? 0,
+								() => <Cup color={statColor} />,
+							],
+						] as const
+					).map(([label, value, icon]) => (
 						<View
 							key={label}
 							style={{
@@ -370,8 +385,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 								alignItems: 'center',
 							}}
 						>
-							<Text color={textColor} fontSize={12}>
-								<Translate translationKey={label}/>
+							<Text color={statColor} fontSize={12}>
+								<Translate translationKey={label} />
 							</Text>
 							<View
 								style={{
@@ -380,8 +395,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 									gap: 5,
 								}}
 							>
-								{icon}
-								<Text color={textColor} fontSize={12} bold>
+								{icon()}
+								<Text color={statColor} fontSize={12} bold>
 									{value}
 								</Text>
 							</View>
@@ -410,7 +425,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 							borderRadius: 12,
 						}}
 					>
-						<Text color={textColor} fontSize={24}>
+						<Text color={textColor[900]} fontSize={24}>
 							{score}
 						</Text>
 					</View>
@@ -428,10 +443,10 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 								borderRadius: 12,
 							}}
 						>
-							<Text color={textColor} fontSize={20}>
+							<Text color={textColor[900]} fontSize={20}>
 								{lastScoreMessage?.content}
 							</Text>
-							<Text color={textColor} fontSize={15} bold>
+							<Text color={textColor[900]} fontSize={15} bold>
 								{streak > 0 && `x${streak}`}
 							</Text>
 						</View>
@@ -516,7 +531,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 								}}
 							>
 								<Text
-									color={textColor}
+									color={textColor[800]}
 									fontSize={14}
 									maxW={'100%'}
 									isTruncated
@@ -524,7 +539,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 									{song.data.name}
 								</Text>
 								<Text
-									color={textColor}
+									color={textColor[900]}
 									fontSize={12}
 									maxW={'100%'}
 									isTruncated
@@ -548,7 +563,13 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 						<IconButton
 							size="sm"
 							variant="solid"
-							icon={<Icon as={Ionicons} name={paused ? 'play' : 'pause'} />}
+							icon={
+								<Icon
+									as={Ionicons}
+									color={colors.coolGray[900]}
+									name={paused ? 'play' : 'pause'}
+								/>
+							}
 							onPress={() => {
 								if (paused) {
 									onResume();
@@ -570,7 +591,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 								/>
 							</>
 						)}
-						<Text color={textColor}>
+						<Text color={textColor[900]}>
 							{time < 0
 								? paused
 									? '0:00'