From e1463d41b9ecc6f5827721801cb96f4b9584f17c Mon Sep 17 00:00:00 2001 From: danis Date: Tue, 5 Sep 2023 09:33:31 +0200 Subject: [PATCH] actual data from db tho needs better design care --- back/src/song/song.controller.ts | 6 -- front/API.ts | 43 +++++++++++--- front/views/GenreDetailsView.tsx | 97 ++++++++++++-------------------- front/views/SearchView.tsx | 14 ++--- 4 files changed, 78 insertions(+), 82 deletions(-) diff --git a/back/src/song/song.controller.ts b/back/src/song/song.controller.ts index be725ed..a80a31b 100644 --- a/back/src/song/song.controller.ts +++ b/back/src/song/song.controller.ts @@ -146,10 +146,4 @@ export class SongController { songId: id, }); } - - @Get('/artist/:artistId') - async getSongByArtist(@Param('artistId', ParseIntPipe) artistId: number) { - const res = await this.songService.songByArtist(artistId) - return res; - } } diff --git a/front/API.ts b/front/API.ts index 25dd3dc..35c413c 100644 --- a/front/API.ts +++ b/front/API.ts @@ -297,6 +297,24 @@ export default class API { }; } + /** + * Retrieves all songs corresponding to the given genre ID + * @param genreId the id of the genre we're aiming + * @returns a promise of an array of Songs + */ + public static getSongsByGenre(genreId: number): Query { + return { + key: ['genre', genreId, 'songs'], + exec: () => + API.fetch( + { + route: `/song?genreId=${genreId}`, + }, + { handler: PlageHandler(SongHandler) } + ).then(({ data }) => data), + }; + } + /** * Retrive a song's midi partition * @param songId the id to find the song @@ -332,15 +350,22 @@ export default class API { return `${API.baseUrl}/genre/${genreId}/illustration`; } - // public static getGenre(genreId: number): Query { - // return { - // key: ['genre', genreId], - // exec: () => - // API.fetch({ - // route: `/genre/${genreId}`, - // }), - // } - // } + /** + * Retrieves a genre + * @param genreId the id of the aimed genre + */ + public static getGenre(genreId: number): Query { + return { + key: ['genre', genreId], + exec: () => + API.fetch( + { + route: `/genre/${genreId}`, + }, + { handler: GenreHandler } + ), + }; + } /** * Retrive a song's musicXML partition diff --git a/front/views/GenreDetailsView.tsx b/front/views/GenreDetailsView.tsx index 7e42e24..1b62caa 100644 --- a/front/views/GenreDetailsView.tsx +++ b/front/views/GenreDetailsView.tsx @@ -2,72 +2,52 @@ import { SafeAreaView } from 'react-native'; import { VStack, Text, Box, Flex, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue, ScrollView } from 'native-base'; import { useQuery } from '../Queries'; import { LoadingView } from '../components/Loading'; -import { useNavigation } from '../Navigation'; +import { RouteProps, useNavigation } from '../Navigation'; import API from '../API'; import Artist from '../models/Artist'; import ArtistCard from '../components/ArtistCard'; import CardGridCustom from '../components/CardGridCustom'; import { translate } from '../i18n/i18n'; -const colorRange = [ - { - code: '#364fc7', - }, - { - code: '#5c940d', - }, - { - code: '#c92a2a', - }, - { - code: '#d6336c', - }, - { - code: '#20c997' - } -] +const colorRange = ['#364fc7', '#5c940d', '#c92a2a', '#d6336c', '#20c997']; +// { +// code: '#364fc7', +// }, +// { +// code: '#5c940d', +// }, +// { +// code: '#c92a2a', +// }, +// { +// code: '#d6336c', +// }, +// { +// code: '#20c997' +// } +// ] -const rockArtists: Artist[] = [ - { - id: 1, - name: "Led Zeppelin", - picture: "https://picsum.photos/200", - }, - { - id: 2, - name: "Queen", - picture: "https://picsum.photos/200", - }, - { - id: 3, - name: "The Rolling Stones", - picture: "https://picsum.photos/200", - }, - { - id: 4, - name: "AC/DC", - picture: "https://picsum.photos/200", - }, - { - name: "Guns N' Roses", - id: 5, - picture: "https://picsum.photos/200", - }, -]; +type GenreDetailsViewProps = { + genreId: number; +} -const GenreDetailsView = ({ genreId }: any) => { - const { isLoading: isLoadingGenre, data: genreData, error: isErrorGenre } = useQuery(API.getArtist(genreId)); +const rockArtists: any[] = []; + +const GenreDetailsView = ({ genreId }: RouteProps) => { + // const { isLoading: isLoadingGenre, data: genreData, error: isErrorGenre } = useQuery(API.getArtist(genreId)); + const genreQuery = useQuery(API.getGenre(genreId)) + const songsQuery = useQuery(API.getSongsByGenre(genreId)) const screenSize = useBreakpointValue({ base: "small", md: "big" }); const isMobileView = screenSize == "small"; const navigation = useNavigation(); - // if (isLoadingGenre) { - // return ; - // } - - // if (isErrorGenre) { - // navigation.navigate('Error'); - // } + if (genreQuery.isError || songsQuery.isError) { + navigation.navigate('Error'); + return <>; + } + if (!genreQuery.data || songsQuery.data === undefined) { + return ; + } return ( @@ -77,11 +57,12 @@ const GenreDetailsView = ({ genreId }: any) => { width={'100%'} bg={{ linearGradient: { - colors: [colorRange[Math.floor(Math.random() * 5)]?.code ?? '#364fc7', 'black'], + colors: [colorRange[Math.floor(Math.random() * 5)] ?? '#364fc7', 'black'], start: [0, 0], end: [0, 1], },}} /> + {genreQuery.data.name} { mt={4} > - {rockArtists?.length ? ( ({ + content={songsQuery.data.slice(0, songsQuery.data.length).map((artistData) => ({ image: API.getArtistIllustration(artistData.id), name: artistData.name, id: artistData.id, @@ -102,9 +82,6 @@ const GenreDetailsView = ({ genreId }: any) => { }))} cardComponent={ArtistCard} /> - ) : ( - {translate('errNoResults')} - )} diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx index 5c10e0e..b3b84bf 100644 --- a/front/views/SearchView.tsx +++ b/front/views/SearchView.tsx @@ -19,7 +19,7 @@ interface SearchContextType { songData: Song[]; artistData: Artist[]; genreData: Genre[]; - favoriteData: Song[]; + // favoriteData: Song[]; isLoadingSong: boolean; isLoadingArtist: boolean; isLoadingGenre: boolean; @@ -33,7 +33,7 @@ export const SearchContext = React.createContext({ songData: [], artistData: [], genreData: [], - favoriteData: [], + // favoriteData: [], isLoadingSong: false, isLoadingArtist: false, isLoadingGenre: false, @@ -62,10 +62,10 @@ const SearchView = (props: RouteProps) => { { enabled: !!stringQuery } ); - const { isLoading: isLoadingFavorite, data: favoriteData = [] } = useQuery( - API.getFavorites(), - { enabled: true } - ) + // const { isLoading: isLoadingFavorite, data: favoriteData = [] } = useQuery( + // API.getFavorites(), + // { enabled: true } + // ) const updateFilter = (newData: Filter) => { // called when the filter is changed @@ -87,7 +87,7 @@ const SearchView = (props: RouteProps) => { songData, artistData, genreData, - favoriteData, + // favoriteData, isLoadingSong, isLoadingArtist, isLoadingGenre,