From 87de52cae02922a84ca6627e825cec1bbed7fe5e Mon Sep 17 00:00:00 2001 From: Arthur Jamet Date: Wed, 5 Jul 2023 14:18:31 +0100 Subject: [PATCH] Front: 'Get Song By Artist' Query: fix typings --- front/API.ts | 17 ++++++--- front/components/RowCustom.tsx | 20 +++++----- front/components/SongRow.tsx | 37 +++++++++--------- front/views/ArtistDetailsView.tsx | 62 ++++++++++++++----------------- 4 files changed, 67 insertions(+), 69 deletions(-) diff --git a/front/API.ts b/front/API.ts index 20f15cc..29b2c03 100644 --- 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 { - return API.fetch({ - route: `/song?artistId=${artistId}`, - }); + public static getSongsByArtist(artistId: number): Query { + return { + key: ['artist', artistId, 'songs'], + exec: () => + API.fetch( + { + route: `/song?artistId=${artistId}`, + }, + { handler: PlageHandler(SongHandler) } + ).then(({ data }) => data), + }; } /** diff --git a/front/components/RowCustom.tsx b/front/components/RowCustom.tsx index f72cded..aa9d4e3 100644 --- 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[0] & { onPress?: () => void } -) => { +const RowCustom = (props: Parameters[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; \ No newline at end of file +export default RowCustom; diff --git a/front/components/SongRow.tsx b/front/components/SongRow.tsx index a122e40..4a61c83 100644 --- 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 ( - - + + { style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }} source={{ uri: song.cover }} alt={song.name} - borderColor={'white'} - borderWidth={1} + borderColor={'white'} + borderWidth={1} /> @@ -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'} @@ -69,4 +68,4 @@ const SongRow = ({ song, onPress }: SongRowProps) => { ); }; -export default SongRow; \ No newline at end of file +export default SongRow; diff --git a/front/views/ArtistDetailsView.tsx b/front/views/ArtistDetailsView.tsx index 2e5e088..3bc9a4b 100644 --- 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) => { + 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(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 ; - } - - if (isError) { + if (artistQuery.isError || songsQuery.isError) { navigation.navigate('Error'); + return <>; + } + if (!artistQuery.data || songsQuery.data === undefined) { + return ; } return ( {artistData?.name} - Abba + Abba - {merde.map((comp: Song | SongWithArtist, index: Key | null | undefined) => ( + {songsQuery.data.map((comp: Song, index: Key | null | undefined) => ( { - API.createSearchHistoryEntry(comp.name, "song", Date.now()); - navigation.navigate("Song", { songId: comp.id }); + API.createSearchHistoryEntry(comp.name, 'song'); + navigation.navigate('Song', { songId: comp.id }); }} /> - )) - } + ))}