fixing error from CI

2023-09-20 17:59:36 +02:00
parent 94a64d16e6 7aa7f50ecb
commit 68c6c6fa11
31 changed files with 1260 additions and 24 deletions
@@ -136,6 +136,12 @@ const HomeView = () => {
 							size="sm"
 							onPress={() => navigation.navigate('Settings')}
 						/>
+						<TextButton
+							label={'V2'}
+							colorScheme="gray"
+							size="sm"
+							onPress={() => navigation.navigate('HomeNew')}
+						/>
 					</HStack>
 					<Box style={{ width: '100%' }}>
 						<Heading>
@@ -33,6 +33,7 @@ import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@motiz88/react-
 import * as Linking from 'expo-linking';
 import url from 'url';
 import { PianoCanvasContext, PianoCanvasMsg, NoteTiming } from '../models/PianoGame';
+import { Metronome } from '../components/Metronome';

 type PlayViewProps = {
 	songId: number;
@@ -83,6 +84,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 	const toast = useToast();
 	const [lastScoreMessage, setLastScoreMessage] = useState<ScoreMessage>();
 	const webSocket = useRef<WebSocket>();
+	const bpm = useRef<number>(60);
 	const [paused, setPause] = useState<boolean>(true);
 	const stopwatch = useStopwatch();
 	const [time, setTime] = useState(0);
@@ -348,6 +350,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				>
 					<PartitionCoord
 						file={musixml.data}
+						bpmRef={bpm}
 						onEndReached={onEnd}
 						onPause={onPause}
 						onResume={onResume}
@@ -357,6 +360,8 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 				{!partitionRendered && <LoadingComponent />}
 			</View>

+			<Metronome paused={paused} bpm={bpm.current} />
+
 			<Box
 				shadow={4}
 				style={{
@@ -90,7 +90,7 @@ const StartPageView = () => {
 					image={loginBanner?.at(0)?.uri}
 					iconName="user"
 					iconProvider={FontAwesome5}
-					onPress={() => navigation.navigate('Login', {})}
+					onPress={() => navigation.navigate('Login')}
 					style={{
 						width: isSmallScreen ? '90%' : 'clamp(100px, 33.3%, 600px)',
 						height: '300px',
@@ -130,7 +130,7 @@ const StartPageView = () => {
 					subtitle="Create an account to save your progress"
 					iconProvider={FontAwesome5}
 					iconName="user-plus"
-					onPress={() => navigation.navigate('Signup', {})}
+					onPress={() => navigation.navigate('Signup')}
 					style={{
 						height: '150px',
 						width: isSmallScreen ? '90%' : 'clamp(150px, 50%, 600px)',
@@ -0,0 +1,211 @@
+import { View } from 'react-native';
+import { Text, useBreakpointValue } from 'native-base';
+import React from 'react';
+import { useQuery, useQueries } from '../../Queries';
+import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
+import SongCardInfo from '../../components/V2/SongCardInfo';
+import API from '../../API';
+import { useNavigation } from '../../Navigation';
+
+const bigSideRatio = 1000;
+const smallSideRatio = 618;
+
+type HomeCardProps = {
+	image: string;
+	title: string;
+	artist: string;
+	fontSize: number;
+	onPress?: () => void;
+};
+
+const cards = [
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
+		title: 'Beethoven',
+		artist: 'Synphony No. 9',
+		fontSize: 46,
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
+		title: 'Mozart',
+		artist: 'Lieder Kantate KV 619',
+		fontSize: 36,
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
+		title: 'Back',
+		artist: 'Truc Truc',
+		fontSize: 26,
+	},
+	{
+		image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
+		title: 'Mozart',
+		artist: 'Machin Machin',
+		fontSize: 22,
+	},
+] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
+
+const HomeView = () => {
+	const songsQuery = useQuery(API.getSongSuggestions);
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const isPhone = screenSize === 'small';
+	const navigation = useNavigation();
+	const artistsQueries = useQueries(
+		(songsQuery.data ?? []).map((song) => API.getArtist(song.artistId))
+	);
+
+	React.useEffect(() => {
+		if (!songsQuery.data) return;
+		if (artistsQueries.every((query) => !query.isLoading)) return;
+
+		(songsQuery.data ?? [])
+			.filter((song) =>
+				artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)
+			)
+			.forEach((song, index) => {
+				if (index > 3) return;
+				cards[index]!.image = song.cover;
+				cards[index]!.title = song.name;
+				cards[index]!.artist = artistsQueries.find(
+					(artistQuery) => artistQuery.data?.id === song.artistId
+				)!.data!.name;
+				cards[index]!.onPress = () => {
+					navigation.navigate('Song', { songId: song.id });
+				};
+			});
+	}, [artistsQueries]);
+
+	return (
+		<View
+			style={{
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<View>
+				<View
+					style={{
+						alignSelf: 'stretch',
+						maxWidth: '1100px',
+						alignItems: 'stretch',
+						flexDirection: isPhone ? 'column' : 'row',
+					}}
+				>
+					<View
+						style={{
+							flexGrow: bigSideRatio,
+						}}
+					>
+						<HomeMainSongCard {...cards[0]} />
+					</View>
+					<View
+						style={{
+							flexGrow: smallSideRatio,
+							display: 'flex',
+							flexDirection: isPhone ? 'row' : 'column',
+							alignItems: 'stretch',
+						}}
+					>
+						<View
+							style={{
+								flexGrow: bigSideRatio,
+							}}
+						>
+							<HomeMainSongCard {...cards[1]} />
+						</View>
+						<View
+							style={{
+								flexGrow: smallSideRatio,
+								display: 'flex',
+								flexDirection: isPhone ? 'column-reverse' : 'row-reverse',
+								alignItems: 'stretch',
+							}}
+						>
+							<View
+								style={{
+									flexGrow: bigSideRatio,
+								}}
+							>
+								<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>
+								<View
+									style={{
+										flexGrow: smallSideRatio,
+									}}
+								></View>
+							</View>
+						</View>
+					</View>
+				</View>
+			</View>
+			<View
+				style={{
+					flexShrink: 0,
+					flexGrow: 0,
+					flexBasis: '15%',
+					width: '100%',
+				}}
+			>
+				<Text
+					style={{
+						color: 'white',
+						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',
+						// @ts-expect-error - gap is not in the typings
+						gap: 16,
+					}}
+				>
+					{songsQuery.data?.map((song) => (
+						<SongCardInfo
+							key={song.id}
+							song={song}
+							onPress={() => {
+								navigation.navigate('Song', { songId: song.id });
+							}}
+							onPlay={() => {
+								console.log('play');
+							}}
+						/>
+					))}
+				</View>
+			</View>
+		</View>
+	);
+};
+
+export default HomeView;
@@ -6,7 +6,7 @@ import ElementList from '../../components/GtkUI/ElementList';
 import { translate } from '../../i18n/i18n';
 import { useQuery } from '../../Queries';
 import * as ImagePicker from 'expo-image-picker';
-import { Google, PasswordCheck, SmsEdit, UserSquare } from 'iconsax-react-native';
+import { Google, PasswordCheck, SmsEdit, UserSquare, Verify } from 'iconsax-react-native';
 import ChangeEmailForm from '../../components/forms/changeEmailForm';
 import ChangePasswordForm from '../../components/forms/changePasswordForm';

@@ -53,6 +53,30 @@ const ProfileSettings = () => {
 							text: user.googleID ? 'Linked' : 'Not linked',
 						},
 					},
+					{
+						icon: <Verify size="24" color="#FFF" style={{ minWidth: 24 }} />,
+						type: 'text',
+						description: 'Vérifiez votre adresse e-mail', // TODO translate
+						title: translate('verified'),
+						data: {
+							text: user.emailVerified ? 'verified' : 'not verified',
+							onPress: user.emailVerified
+								? undefined
+								: () =>
+										API.fetch({ route: '/auth/reverify', method: 'PUT' })
+											.then(() =>
+												Toast.show({
+													description: 'Verification mail sent',
+												})
+											)
+											.catch((e) => {
+												console.error(e);
+												Toast.show({
+													description: 'Verification mail send error',
+												});
+											}),
+						},
+					},
 					{
 						icon: <UserSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
 						type: 'text',