From 6a8fe074e0664fd69c61148687d09666dc612359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sun, 26 Nov 2023 18:37:05 +0100
Subject: [PATCH] Removed Scrollview from ScaffoldMobile and now each view
 implement its scroll

---
 front/components/UI/ScaffoldCC.tsx       |   4 +-
 front/components/UI/ScaffoldMobileCC.tsx |  31 +++----
 front/components/V2/GoldenRatio.tsx      |   2 +-
 front/views/V2/DiscoveryView.tsx         | 111 +++++++++++------------
 4 files changed, 71 insertions(+), 77 deletions(-)

diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx
index 69f560f..1b9a103 100644
--- a/front/components/UI/ScaffoldCC.tsx
+++ b/front/components/UI/ScaffoldCC.tsx
@@ -21,9 +21,10 @@ type ScaffoldCCProps = {
 	children?: React.ReactNode;
 	routeName: string;
 	withPadding?: boolean;
+	enableScroll?: boolean;
 };
 
-const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps) => {
+const ScaffoldCC = ({ children, routeName, withPadding = true, enableScroll = true }: ScaffoldCCProps) => {
 	const userQuery = useQuery(API.getUserInfo);
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 
@@ -40,6 +41,7 @@ const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps
 		<Flex style={{ flex: 1, backgroundColor: '#cdd4fd' }}>
 			{screenSize === 'small' ? (
 				<ScaffoldMobileCC
+					enableScroll={enableScroll}
 					user={userQuery.data}
 					logo={logo}
 					routeName={routeName}
diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx
index 0b93f02..f32dd66 100644
--- a/front/components/UI/ScaffoldMobileCC.tsx
+++ b/front/components/UI/ScaffoldMobileCC.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { View } from 'react-native';
-import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base';
+import { Flex, useMediaQuery, useTheme } from 'native-base';
 import ButtonBase from './ButtonBase';
 import { Icon } from 'iconsax-react-native';
 import { useNavigation } from '../../Navigation';
@@ -14,9 +14,16 @@ type ScaffoldMobileCCProps = {
 	logo: string;
 	routeName: string;
 	widthPadding: boolean;
+	enableScroll: boolean;
 	menu: readonly {
 		type: 'main' | 'sub';
-		title: string;
+		title:
+			| 'menuDiscovery'
+			| 'menuProfile'
+			| 'menuMusic'
+			| 'menuSearch'
+			| 'menuLeaderBoard'
+			| 'menuSettings';
 		icon: Icon;
 		link: string;
 	}[];
@@ -29,19 +36,15 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
 
 	return (
 		<View style={{ height: '100%', flexDirection: 'column', overflow: 'hidden' }}>
-			<ScrollView
+			<View
 				style={{
 					flex: 1,
 					maxHeight: '100%',
-					flexDirection: 'column',
-					flexShrink: 0,
 					padding: props.widthPadding ? 8 : 0,
 				}}
-				contentContainerStyle={{ flex: 1 }}
 			>
-				<View>{props.children}</View>
-				<Spacer />
-			</ScrollView>
+				{props.children}
+			</View>
 			<View style={{ padding: 8, paddingTop: 0 }}>
 				<Flex
 					style={{
@@ -60,15 +63,7 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
 							icon={value.icon}
 							title={
 								props.routeName === value.link && !isSmallScreen
-									? translate(
-											value.title as
-												| 'menuDiscovery'
-												| 'menuProfile'
-												| 'menuMusic'
-												| 'menuSearch'
-												| 'menuLeaderBoard'
-												| 'menuSettings'
-									  )
+									? translate(value.title)
 									: undefined
 							}
 							isDisabled={props.routeName === value.link}
diff --git a/front/components/V2/GoldenRatio.tsx b/front/components/V2/GoldenRatio.tsx
index f515307..bedbc41 100644
--- a/front/components/V2/GoldenRatio.tsx
+++ b/front/components/V2/GoldenRatio.tsx
@@ -60,7 +60,7 @@ const GoldenRatio = () => {
 						direction={isPhone ? 'row-reverse' : 'column-reverse'}
 						header={<HomeMainSongCard {...cards[3]} />}
 					>
-						<View style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: 'red' }}>
+						<View style={{ display: 'flex', width: '100%', height: '100%'}}>
 						</View>
 					</GoldenRatioPanel>
 				</GoldenRatioPanel>
diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx
index 4bde174..bec0985 100644
--- a/front/views/V2/DiscoveryView.tsx
+++ b/front/views/V2/DiscoveryView.tsx
@@ -38,78 +38,75 @@ const HomeView = (props: RouteProps<{}>) => {
 	// }, [artistsQueries]);
 
 	return (
-		// <ScaffoldCC routeName={props.route.name}>
-		<ScrollView>
-			<View
-				style={{
-					width: '100%',
-					height: '100%',
-					display: 'flex',
-					flexDirection: 'column',
-					gap: 16,
-				}}
-			>
-				<View
-					style={{
-						width: '100%',
-						maxWidth: 1100,
-						// maxHeight: 500,
-						// aspectRatio: 1.618,
-						// golden ratio in vertical
-						aspectRatio: 0.618,
-					}}
-				>
-					<GoldenRatio />
-				</View>
+		<ScaffoldCC routeName={props.route.name}>
+			<ScrollView>
 				<View
 					style={{
 						width: '100%',
+						display: 'flex',
 						flexDirection: 'column',
-						flexWrap: 'wrap',
-						justifyContent: 'center',
-						alignItems: 'center',
 						gap: 16,
 					}}
 				>
-					<Text
-						style={{
-							fontSize: 24,
-							fontWeight: 'bold',
-							marginLeft: 16,
-							marginBottom: 16,
-							marginTop: 24,
-						}}
-					>
-						{'Suggestions'}
-					</Text>
-					{songsQuery.isLoading && <Text>Loading...</Text>}
 					<View
 						style={{
 							width: '100%',
-							flexDirection: 'row',
-							flexWrap: 'wrap',
-							justifyContent: 'center',
-							alignItems: 'flex-start',
+							maxWidth: 1100,
+							// maxHeight: 500,
+							// aspectRatio: 1.618,
+							// golden ratio in vertical
+							aspectRatio: 0.618,
+						}}
+					>
+						<GoldenRatio />
+					</View>
+					<View
+						style={{
+							width: '100%',
+							flexDirection: 'column',
+							justifyContent: 'flex-start',
+							alignItems: 'stretch',
 							gap: 16,
 						}}
 					>
-						{songsQuery.data?.map((song) => (
-							<SongCardInfo
-								key={song.id}
-								song={song}
-								onPress={() => {
-									navigation.navigate('Play', { songId: song.id });
-								}}
-								onPlay={() => {
-									console.log('play');
-								}}
-							/>
-						))}
+						<Text
+							style={{
+								fontSize: 24,
+								fontWeight: 'bold',
+								marginLeft: 16,
+								marginBottom: 16,
+								marginTop: 24,
+							}}
+						>
+							{'Suggestions'}
+						</Text>
+						{songsQuery.isLoading && <Text>Loading...</Text>}
+						<View
+							style={{
+								flexDirection: 'row',
+								flexWrap: 'wrap',
+								justifyContent: 'center',
+								alignItems: 'flex-start',
+								gap: 16,
+							}}
+						>
+							{songsQuery.data?.map((song) => (
+								<SongCardInfo
+									key={song.id}
+									song={song}
+									onPress={() => {
+										navigation.navigate('Play', { songId: song.id });
+									}}
+									onPlay={() => {
+										console.log('play');
+									}}
+								/>
+							))}
+						</View>
 					</View>
 				</View>
-			</View>
-		</ScrollView>
-		// </ScaffoldCC>
+			</ScrollView>
+		</ScaffoldCC>
 	);
 };