From c085e9aa220eaf76f135684ee6eac9d40f9a7e99 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 17:54:46 +0100
Subject: [PATCH] Tried to make work the golden ratio on phone but failed (it's
 better tho)

---
 front/components/V2/GoldenRatio.tsx      | 92 +++++------------------
 front/components/V2/GoldenRatioPanel.tsx | 60 +++++++++++++++
 front/views/V2/DiscoveryView.tsx         | 93 +++++++++++++-----------
 3 files changed, 132 insertions(+), 113 deletions(-)
 create mode 100644 front/components/V2/GoldenRatioPanel.tsx

diff --git a/front/components/V2/GoldenRatio.tsx b/front/components/V2/GoldenRatio.tsx
index f17d5c4..9860fe3 100644
--- a/front/components/V2/GoldenRatio.tsx
+++ b/front/components/V2/GoldenRatio.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useBreakpointValue } from 'native-base';
+import { useBreakpointValue, Text } from 'native-base';
 import HomeMainSongCard from './HomeMainSongCard';
-
-const bigSideRatio = 1000;
-const smallSideRatio = 618;
+import GoldenRatioPanel from './GoldenRatioPanel';
 
 type HomeCardProps = {
 	image: string;
@@ -44,80 +42,30 @@ const cards = [
 const GoldenRatio = () => {
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
+	// return (<GoldenRatioPanel direction='column' header={<>r</>}>test</GoldenRatioPanel>)
 	return (
-		<View
-			style={{
-				alignSelf: 'stretch',
-				maxWidth: 1100,
-				alignItems: 'stretch',
-				flexDirection: isPhone ? 'column' : 'row',
-			}}
+		<GoldenRatioPanel
+			direction={isPhone ? 'column' : 'row'}
+			header={<HomeMainSongCard {...cards[0]} />}
 		>
-			<View
-				style={{
-					flexGrow: bigSideRatio,
-				}}
+			<GoldenRatioPanel
+				direction={isPhone ? 'row' : 'column'}
+				header={<HomeMainSongCard {...cards[1]} />}
 			>
-				<HomeMainSongCard {...cards[0]} />
-			</View>
-			<View
-				style={{
-					flexGrow: smallSideRatio,
-					display: 'flex',
-					flexDirection: isPhone ? 'row' : 'column',
-					alignItems: 'stretch',
-				}}
-			>
-				<View
-					style={{
-						flexGrow: bigSideRatio,
-					}}
+				<GoldenRatioPanel
+					direction={isPhone ? 'column-reverse' : 'row-reverse'}
+					header={<HomeMainSongCard {...cards[2]} />}
 				>
-					<HomeMainSongCard {...cards[1]} />
-				</View>
-				<View
-					style={{
-						flexGrow: smallSideRatio,
-						display: 'flex',
-						flexDirection: isPhone ? 'column-reverse' : 'row-reverse',
-						alignItems: 'stretch',
-					}}
-				>
-					<View
-						style={{
-							flexGrow: bigSideRatio,
-						}}
+					<GoldenRatioPanel
+						direction={isPhone ? 'row-reverse' : 'column-reverse'}
+						header={<HomeMainSongCard {...cards[3]} />}
 					>
-						<HomeMainSongCard {...cards[2]} />
-					</View>
-					<View
-						style={{
-							flexGrow: smallSideRatio,
-							display: 'flex',
-							flexDirection: isPhone ? 'row-reverse' : 'column-reverse',
-							alignItems: 'stretch',
-						}}
-					>
-						<View
-							style={{
-								flexGrow: bigSideRatio,
-								display: 'flex',
-								flexDirection: 'column',
-								alignItems: 'stretch',
-								justifyContent: 'flex-end',
-							}}
-						>
-							<HomeMainSongCard {...cards[3]} />
+						<View style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: 'red' }}>
 						</View>
-						<View
-							style={{
-								flexGrow: smallSideRatio,
-							}}
-						></View>
-					</View>
-				</View>
-			</View>
-		</View>
+					</GoldenRatioPanel>
+				</GoldenRatioPanel>
+			</GoldenRatioPanel>
+		</GoldenRatioPanel>
 	);
 };
 
diff --git a/front/components/V2/GoldenRatioPanel.tsx b/front/components/V2/GoldenRatioPanel.tsx
new file mode 100644
index 0000000..e5b0824
--- /dev/null
+++ b/front/components/V2/GoldenRatioPanel.tsx
@@ -0,0 +1,60 @@
+import { View, ViewStyle } from 'react-native';
+
+const bigSideRatio = 1000;
+const smallSideRatio = 618;
+
+const bigSizePercent = '61.8%';
+const smallSizePercent = '38.2%';
+
+type GoldenRatioPanelProps = {
+	direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+	header: React.ReactNode;
+	children: React.ReactNode;
+	style?: ViewStyle;
+};
+
+const isVerticalDir = (direction: GoldenRatioPanelProps['direction']) => {
+	return direction === 'column' || direction === 'column-reverse';
+};
+
+const GoldenRatioPanel = ({ direction, header, children, style }: GoldenRatioPanelProps) => {
+	const firstSizePercent = bigSizePercent;
+	const secondSizePercent = smallSizePercent;
+	const isVertical = isVerticalDir(direction);
+	return (
+		<View
+			style={[
+				{
+					width: !isVertical ? '100%' : undefined,
+					height: isVertical ? '100%' : undefined,
+					display: 'flex',
+					flexDirection: direction,
+				},
+				style,
+			]}
+		>
+			<View
+				style={{
+					height: isVertical ? firstSizePercent : undefined,
+					width: !isVertical ? firstSizePercent : undefined,
+				}}
+			>
+				{header}
+			</View>
+			<View
+				style={{
+					height: isVertical ? secondSizePercent : undefined,
+					width: !isVertical ? secondSizePercent : undefined,
+				}}
+			>
+				{children}
+			</View>
+		</View>
+	);
+};
+
+GoldenRatioPanel.defaultProps = {
+	direction: 'row',
+};
+
+export default GoldenRatioPanel;
diff --git a/front/views/V2/DiscoveryView.tsx b/front/views/V2/DiscoveryView.tsx
index cc6f94a..e55afb6 100644
--- a/front/views/V2/DiscoveryView.tsx
+++ b/front/views/V2/DiscoveryView.tsx
@@ -38,17 +38,49 @@ const HomeView = (props: RouteProps<{}>) => {
 	// }, [artistsQueries]);
 
 	return (
-		<ScaffoldCC routeName={props.route.name}>
+		// <ScaffoldCC routeName={props.route.name}>
+		<View
+			style={{
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
 			<View
 				style={{
 					width: '100%',
-					height: '100%',
-					display: 'flex',
-					flexDirection: 'column',
+					maxWidth: 1100,
+					// maxHeight: 500,
+					// aspectRatio: 1.618,
+					// golden ratio in vertical
+					aspectRatio: 0.618,
 				}}
 			>
 				<GoldenRatio />
-				<View
+			</View>
+			<View
+				style={{
+					flexDirection: 'column',
+					flexWrap: 'wrap',
+					justifyContent: 'flex-start',
+					alignItems: 'flex-start',
+					gap: 16,
+				}}
+			>
+				<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',
@@ -57,43 +89,22 @@ const HomeView = (props: RouteProps<{}>) => {
 						gap: 16,
 					}}
 				>
-					<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: 'flex-start',
-							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>
+					{songsQuery.data?.map((song) => (
+						<SongCardInfo
+							key={song.id}
+							song={song}
+							onPress={() => {
+								navigation.navigate('Play', { songId: song.id });
+							}}
+							onPlay={() => {
+								console.log('play');
+							}}
+						/>
+					))}
+				</View> */}
 			</View>
-		</ScaffoldCC>
+		</View>
+		// </ScaffoldCC>
 	);
 };