Front: 'Get Song By Artist' Query: fix typings

2023-07-05 14:18:31 +01:00
parent 931fe13eee
commit 87de52cae0
4 changed files with 67 additions and 69 deletions
--- a/front/API.ts
+++ b/front/API.ts
@@ -279,15 +279,22 @@ export default class API {
 		};
 	}

-		/**
+	/**
 	 * @description retrieves songs from a specific artist
 	 * @param artistId is the id of the artist that composed the songs aimed
 	 * @returns a Promise of Songs type array
 	 */
-	public static async getSongsByArtist(artistId: number): Promise<Song[]> {
-		return API.fetch({
-			route: `/song?artistId=${artistId}`,
-		});
+	public static getSongsByArtist(artistId: number): Query<Song[]> {
+		return {
+			key: ['artist', artistId, 'songs'],
+			exec: () =>
+				API.fetch(
+					{
+						route: `/song?artistId=${artistId}`,
+					},
+					{ handler: PlageHandler(SongHandler) }
+				).then(({ data }) => data),
+		};
 	}

 	/**
--- a/front/components/RowCustom.tsx
+++ b/front/components/RowCustom.tsx
@@ -1,10 +1,8 @@
-import { useColorScheme } from "react-native";
-import { RootState, useSelector } from "../state/Store";
-import { Box, Pressable } from "native-base";
+import { useColorScheme } from 'react-native';
+import { RootState, useSelector } from '../state/Store';
+import { Box, Pressable } from 'native-base';

-const RowCustom = (
-	props: Parameters<typeof Box>[0] & { onPress?: () => void }
-) => {
+const RowCustom = (props: Parameters<typeof Box>[0] & { onPress?: () => void }) => {
 	const settings = useSelector((state: RootState) => state.settings.local);
 	const systemColorMode = useColorScheme();
 	const colorScheme = settings.colorScheme;
@@ -17,13 +15,13 @@ const RowCustom = (
 					py={3}
 					my={1}
 					bg={
-						(colorScheme == "system" ? systemColorMode : colorScheme) == "dark"
+						(colorScheme == 'system' ? systemColorMode : colorScheme) == 'dark'
 							? isHovered || isPressed
-								? "gray.800"
+								? 'gray.800'
 								: undefined
 							: isHovered || isPressed
-								? "coolGray.200"
-								: undefined
+							? 'coolGray.200'
+							: undefined
 					}
 				>
 					{props.children}
@@ -33,4 +31,4 @@ const RowCustom = (
 	);
 };

-export default RowCustom;
+export default RowCustom;
--- a/front/components/SongRow.tsx
+++ b/front/components/SongRow.tsx
@@ -1,8 +1,7 @@
-import { HStack, Image, Text } from "native-base";
-import Song, { SongWithArtist } from "../models/Song";
-import RowCustom from "./RowCustom";
-import TextButton from "./TextButton";
-
+import { HStack, Image, Text } from 'native-base';
+import Song, { SongWithArtist } from '../models/Song';
+import RowCustom from './RowCustom';
+import TextButton from './TextButton';

 type SongRowProps = {
 	song: Song | SongWithArtist; // TODO: remove Song
@@ -11,8 +10,8 @@ type SongRowProps = {

 const SongRow = ({ song, onPress }: SongRowProps) => {
 	return (
-		<RowCustom width={"100%"}>
-			<HStack px={2} space={5} justifyContent={"space-between"}>
+		<RowCustom width={'100%'}>
+			<HStack px={2} space={5} justifyContent={'space-between'}>
 				<Image
 					flexShrink={0}
 					flexGrow={0}
@@ -20,16 +19,16 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 					style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
 					source={{ uri: song.cover }}
 					alt={song.name}
-                    borderColor={'white'}
-                    borderWidth={1}
+					borderColor={'white'}
+					borderWidth={1}
 				/>
 				<HStack
 					style={{
-						display: "flex",
+						display: 'flex',
 						flexShrink: 1,
 						flexGrow: 1,
-						alignItems: "center",
-						justifyContent: "flex-start",
+						alignItems: 'center',
+						justifyContent: 'flex-start',
 					}}
 					space={6}
 				>
@@ -39,7 +38,7 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 						}}
 						isTruncated
 						pl={5}
-						maxW={"100%"}
+						maxW={'100%'}
 						bold
 						fontSize="md"
 					>
@@ -49,19 +48,19 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 						style={{
 							flexShrink: 0,
 						}}
-						fontSize={"sm"}
+						fontSize={'sm'}
 					>
-						{song.artistId ?? "artist"}
+						{song.artistId ?? 'artist'}
 					</Text>
 				</HStack>
 				<TextButton
 					flexShrink={0}
 					flexGrow={0}
-					translate={{ translationKey: "playBtn" }}
+					translate={{ translationKey: 'playBtn' }}
 					colorScheme="primary"
-					variant={"outline"}
+					variant={'outline'}
 					size="sm"
-                    mr={5}
+					mr={5}
 					onPress={onPress}
 				/>
 			</HStack>
@@ -69,4 +68,4 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 	);
 };

-export default SongRow;
+export default SongRow;
--- a/front/views/ArtistDetailsView.tsx
+++ b/front/views/ArtistDetailsView.tsx
@@ -1,62 +1,56 @@
-import { VStack, Text, Box, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue } from 'native-base';
-import { Ionicons } from '@expo/vector-icons';
+import { Box, Image, Heading, useBreakpointValue } from 'native-base';
 import { SafeAreaView } from 'react-native';
 import { useQuery } from '../Queries';
 import { LoadingView } from '../components/Loading';
 import API from '../API';
 import Song, { SongWithArtist } from '../models/Song';
 import SongRow from '../components/SongRow';
-import { Key, useEffect, useState } from 'react';
-import { useNavigation } from '../Navigation';
+import { Key } from 'react';
+import { RouteProps, useNavigation } from '../Navigation';

-const ArtistDetailsView = ({ artistId }: any) => {
-	const { isLoading, data: artistData, isError } = useQuery(API.getArtist(artistId));
-	// const { isLoading: isLoadingSongs, data: songData = [], error: errorSongs } = useQuery(['songs', artistId], () => API.getSongsByArtist(artistId))
-	const screenSize = useBreakpointValue({ base: "small", md: "big" });
-	const isMobileView = screenSize == "small";
+type ArtistDetailsViewProps = {
+	artistId: number;
+};
+
+const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) => {
+	const artistQuery = useQuery(API.getArtist(artistId));
+	const songsQuery = useQuery(API.getSongsByArtist(artistId));
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const isMobileView = screenSize == 'small';
 	const navigation = useNavigation();
-	const [merde, setMerde] = useState<any>(null);

-	useEffect(() => {
-		// Code to be executed when the component is focused
-		console.warn('Component focused!');
-		setMerde(API.getSongsByArtist(112));
-		// Call your function or perform any other actions here
-	}, []);
-
-	if (isLoading) {
-		return <LoadingView />;
-	}
-
-	if (isError) {
+	if (artistQuery.isError || songsQuery.isError) {
 		navigation.navigate('Error');
+		return <></>;
+	}
+	if (!artistQuery.data || songsQuery.data === undefined) {
+		return <LoadingView />;
 	}

 	return (
 		<SafeAreaView>
 			<Box>
 				<Image
-				source={{ uri: 'https://picsum.photos/200' }}
-				alt={artistData?.name}
-				size={'100%'}
-				height={isMobileView ? 200 : 300}
-				width={'100%'}
-				resizeMode='cover'
+					source={{ uri: 'https://picsum.photos/200' }}
+					alt={artistQuery.data.name}
+					size={'100%'}
+					height={isMobileView ? 200 : 300}
+					width={'100%'}
+					resizeMode="cover"
 				/>
 				<Box>
-					<Heading m={3} >Abba</Heading>
+					<Heading m={3}>Abba</Heading>
 					<Box>
-						{merde.map((comp: Song | SongWithArtist, index: Key | null | undefined) => (
+						{songsQuery.data.map((comp: Song, index: Key | null | undefined) => (
 							<SongRow
 								key={index}
 								song={comp}
 								onPress={() => {
-									API.createSearchHistoryEntry(comp.name, "song", Date.now());
-									navigation.navigate("Song", { songId: comp.id });
+									API.createSearchHistoryEntry(comp.name, 'song');
+									navigation.navigate('Song', { songId: comp.id });
 								}}
 							/>
-							))
-						}
+						))}
 					</Box>
 				</Box>
 			</Box>