Format code

front/Navigation.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { NativeStackScreenProps, createNativeStackNavigator } from '@react-navigation/native-stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {
 	NavigationProp,
 	ParamListBase,
@@ -35,8 +34,6 @@ import DiscoveryView from './views/V2/DiscoveryView';
 import MusicView from './views/MusicView';
 import Leaderboardiew from './views/LeaderboardView';
 import { LinearGradient } from 'expo-linear-gradient';
-import ScaffoldMobileCC from './components/UI/ScaffoldMobileCC';
-import ScaffoldDesktopCC from './components/UI/ScaffoldDesktopCC';
 import { createCustomNavigator } from './utils/navigator';
 import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';

front/components/ScoreModal.tsx

@@ -106,9 +106,7 @@ const ScoreModal = (props: ScoreModalProps) => {
 					type="filled"
 					title={translate('menuMusic')}
 					onPress={() =>
-						navigation.canGoBack()
-							? navigation.goBack()
-							: navigation.navigate('Home')
+						navigation.canGoBack() ? navigation.goBack() : navigation.navigate('Home')
 					}
 				/>
 			</Row>

front/components/UI/ScaffoldDesktopCC.tsx

@@ -7,15 +7,13 @@ import API from '../../API';
 import ButtonBase from './ButtonBase';
 import { Icon } from 'iconsax-react-native';
 import { LoadingView } from '../Loading';
-import { Translate, TranslationKey, translate } from '../../i18n/i18n';
+import { Translate, translate } from '../../i18n/i18n';
 import { useNavigation } from '../../Navigation';
 import Spacer from './Spacer';
-import User from '../../models/User';
 import LogoutButtonCC from './LogoutButtonCC';
-import GlassmorphismCC from './Glassmorphism';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { ReactElement } from 'react';
-import { NavigationState, ParamListBase } from '@react-navigation/native';
+import { NavigationState } from '@react-navigation/native';
 
 // TODO a tester avec un historique de plus de 3 musics différente mdr !!
 const SongHistory = (props: { quantity: number }) => {
@@ -176,6 +174,7 @@ const ScaffoldDesktopCC = ({
 							if ((options as any).subMenu) return null;
 							return (
 								<NavigationButton
+									key={route.name}
 									isSmallScreen={!!isSmallScreen}
 									label={options.title !== undefined ? options.title : route.name}
 									icon={options.tabBarIcon as Icon}
@@ -214,6 +213,7 @@ const ScaffoldDesktopCC = ({
 						if (!(options as any).subMenu) return null;
 						return (
 							<NavigationButton
+								key={route.key}
 								isSmallScreen={!!isSmallScreen}
 								label={options.title !== undefined ? options.title : route.name}
 								icon={options.tabBarIcon as Icon}

front/components/UI/ScaffoldMobileCC.tsx

@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import { Flex, useMediaQuery, useTheme } from 'native-base';
 import ButtonBase from './ButtonBase';
-import { Discover, Icon } from 'iconsax-react-native';
+import { Icon } from 'iconsax-react-native';
 import { translate } from '../../i18n/i18n';
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { ComponentProps } from 'react';
@@ -66,6 +66,6 @@ const ScaffoldMobileCC = ({ state, descriptors, navigation }: BottomTabBarProps)
 // This is needed to bypass a bug in react-navigation that calls custom tabBars weirdly
 const Wrapper = (props: ComponentProps<typeof ScaffoldMobileCC>) => {
 	return <ScaffoldMobileCC {...props} />;
-}
+};
 
 export default Wrapper;

front/views/PlayView.tsx

@@ -283,7 +283,7 @@ const PlayView = ({ songId }: PlayViewProps) => {
 	useEffect(() => {
 		// Song.data is updated on navigation.navigate (do not know why)
 		// Hotfix to prevent midi setup process from reruning on game end
-		if (navigation.getState().routes.at(-1)?.name != "Play") {
+		if (navigation.getState().routes.at(-1)?.name != 'Play') {
 			return;
 		}
 		if (playType && song.data && !webSocket.current) {

front/views/SearchView.tsx

@@ -80,7 +80,6 @@ const SearchView = (props: SearchViewProps) => {
 	};
 
 	return (
-
 		<ScrollView>
 			<SafeAreaView>
 				<SearchContext.Provider
@@ -98,13 +97,12 @@ const SearchView = (props: SearchViewProps) => {
 						updateFilter,
 						updateStringQuery,
 					}}
-					>
+				>
 					<SearchBar />
 					<SearchResultComponent />
 				</SearchContext.Provider>
 			</SafeAreaView>
 		</ScrollView>
-
 	);
 };
 

front/views/V2/DiscoveryView.tsx

@@ -18,69 +18,69 @@ const HomeView = () => {
 	const suggestions = suggestionsQuery.data?.slice(4) ?? [];
 
 	return (
-			<ScrollView>
+		<ScrollView>
+			<View
+				style={{
+					width: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: 16,
+				}}
+			>
+				<View
+					style={{
+						width: '100%',
+						maxWidth: 1100,
+						aspectRatio: isPhone ? 0.618 : 1.618,
+					}}
+				>
+					<GoldenRatio songs={topSuggestions} />
+				</View>
 				<View
 					style={{
 						width: '100%',
-						display: 'flex',
 						flexDirection: 'column',
+						justifyContent: 'flex-start',
+						alignItems: 'stretch',
 						gap: 16,
 					}}
 				>
-					<View
+					<Text
 						style={{
-							width: '100%',
-							maxWidth: 1100,
-							aspectRatio: isPhone ? 0.618 : 1.618,
+							fontSize: 24,
+							fontWeight: 'bold',
+							marginLeft: 16,
+							marginBottom: 16,
+							marginTop: 24,
 						}}
 					>
-						<GoldenRatio songs={topSuggestions} />
-					</View>
+						{'Suggestions'}
+					</Text>
 					<View
 						style={{
-							width: '100%',
-							flexDirection: 'column',
-							justifyContent: 'flex-start',
-							alignItems: 'stretch',
+							flexDirection: 'row',
+							flexWrap: 'wrap',
+							justifyContent: isPhone ? 'center' : 'flex-start',
+							alignItems: 'flex-start',
 							gap: 16,
 						}}
 					>
-						<Text
-							style={{
-								fontSize: 24,
-								fontWeight: 'bold',
-								marginLeft: 16,
-								marginBottom: 16,
-								marginTop: 24,
-							}}
-						>
-							{'Suggestions'}
-						</Text>
-						<View
-							style={{
-								flexDirection: 'row',
-								flexWrap: 'wrap',
-								justifyContent: isPhone ? 'center' : 'flex-start',
-								alignItems: 'flex-start',
-								gap: 16,
-							}}
-						>
-							{suggestions.map((song) => (
-								<SongCardInfo
-									key={song.id}
-									song={song}
-									onPress={() => {
-										navigation.navigate('Play', { songId: song.id });
-									}}
-									onPlay={() => {
-										console.log('play');
-									}}
-								/>
-							))}
-						</View>
+						{suggestions.map((song) => (
+							<SongCardInfo
+								key={song.id}
+								song={song}
+								onPress={() => {
+									navigation.navigate('Play', { songId: song.id });
+								}}
+								onPlay={() => {
+									console.log('play');
+								}}
+							/>
+						))}
 					</View>
 				</View>
-			</ScrollView>
+			</View>
+		</ScrollView>
 	);
 };