diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 011967b..fc64f15 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -28,6 +28,7 @@ import { Button, Center, VStack } from 'native-base'; import { unsetAccessToken } from './state/UserSlice'; import TextButton from './components/TextButton'; import ErrorView from './views/ErrorView'; +import GenreDetailsView from './views/GenreDetailsView'; // Util function to hide route props in URL const removeMe = () => ''; @@ -58,6 +59,11 @@ const protectedRoutes = () => options: { title: translate('artistFilter') }, link: '/artist/:artistId', }, + Genre: { + component: GenreDetailsView, + options: { title: translate('genreFilter')}, + link: '/genre/:genreId', + }, Score: { component: ScoreView, options: { title: translate('score'), headerLeft: null }, diff --git a/front/components/SearchResult.tsx b/front/components/SearchResult.tsx index 274cf54..aab02bf 100644 --- a/front/components/SearchResult.tsx +++ b/front/components/SearchResult.tsx @@ -252,13 +252,13 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => { {artistData?.length ? ( ({ - image: API.getArtistIllustration(a.id), - name: a.name, - id: a.id, + content={artistData.slice(0, props.maxItems ?? artistData.length).map((artistData) => ({ + image: API.getArtistIllustration(artistData.id), + name: artistData.name, + id: artistData.id, onPress: () => { - API.createSearchHistoryEntry(a.name, 'artist'); - navigation.navigate('Artist', { artistId: a.id }); + API.createSearchHistoryEntry(artistData.name, 'artist'); + navigation.navigate('Artist', { artistId: artistData.id }); }, }))} cardComponent={ArtistCard} @@ -287,7 +287,7 @@ const GenreSearchComponent = (props: ItemSearchComponentProps) => { id: g.id, onPress: () => { API.createSearchHistoryEntry(g.name, 'genre'); - navigation.navigate('Home'); + navigation.navigate('Genre', {genreId: g.id}); }, }))} cardComponent={GenreCard} diff --git a/front/views/ArtistDetailsView.tsx b/front/views/ArtistDetailsView.tsx index 9b07677..7baa1b4 100644 --- a/front/views/ArtistDetailsView.tsx +++ b/front/views/ArtistDetailsView.tsx @@ -1,4 +1,4 @@ -import { VStack, Text, Box, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue } from 'native-base'; +import { VStack, Text, Box, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue, ScrollView } from 'native-base'; import { Ionicons } from '@expo/vector-icons'; import { SafeAreaView } from 'react-native'; import { useQuery } from '../Queries'; @@ -9,6 +9,99 @@ import SongRow from '../components/SongRow'; import { Key, useEffect, useState } from 'react'; import { useNavigation } from '../Navigation'; +const songs: Song[] = [ + { + id: 1, + name: "Dancing Queen", + artistId: 1, + albumId: 1, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 2, + name: "Mamma Mia", + artistId: 1, + albumId: 1, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 3, + name: "Take a Chance on Me", + artistId: 1, + albumId: 2, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 4, + name: "Fernando", + artistId: 1, + albumId: 3, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 5, + name: "Waterloo", + artistId: 1, + albumId: 4, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 6, + name: "The Winner Takes It All", + artistId: 1, + albumId: 5, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 7, + name: "SOS", + artistId: 1, + albumId: 6, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 8, + name: "Knowing Me, Knowing You", + artistId: 1, + albumId: 7, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 9, + name: "Money, Money, Money", + artistId: 1, + albumId: 8, + genreId: 1, + cover: undefined, + details: undefined, + }, + { + id: 10, + name: "Gimme! Gimme! Gimme! (A Man After Midnight)", + artistId: 1, + albumId: 9, + genreId: 1, + cover: undefined, + details: undefined, + }, +]; + const ArtistDetailsView = ({ artistId }: any) => { const { isLoading: isLoadingArt, data: artistData, error: isErrorArt } = useQuery(API.getArtist(artistId)); const { isLoading: isLoadingSong, data: songData = [], error: isErrorSong } = useQuery(API.getSongsByArtist(artistId)); @@ -25,10 +118,10 @@ const ArtistDetailsView = ({ artistId }: any) => { } return ( - + {artistData?.name} { resizeMode='cover' /> - {artistData?.name} - - {songData.map((comp: Song | SongWithArtist, index: Key | null | undefined) => ( + {artistData?.name} + + {songs.map((comp: Song | SongWithArtist, index: Key | null | undefined) => ( { /> )) } - + - + ); }; diff --git a/front/views/GenreDetailsView.tsx b/front/views/GenreDetailsView.tsx index a4a78d0..4a8b3d8 100644 --- a/front/views/GenreDetailsView.tsx +++ b/front/views/GenreDetailsView.tsx @@ -1,14 +1,143 @@ import { SafeAreaView } from 'react-native'; -import { VStack, Text, Box, Image, Heading, IconButton, Icon, Container, Center, useBreakpointValue } from 'native-base'; +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 API from '../API'; +import Artist from '../models/Artist'; +const colorRange = [ + { + 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", + }, +]; + +const rockSongs: Song[] = [ + { + id: 1, + name: "Stairway to Heaven", + artistId: 1, + albumId: 1, + genreId: 1, + cover: "https://picsum.photos/200", + details: { /* song details */ }, + }, + { + id: 2, + name: "Bohemian Rhapsody", + artistId: 2, + albumId: 2, + genreId: 1, + cover: "https://picsum.photos/200", + details: { /* song details */ }, + }, + { + id: 3, + name: "Paint It Black", + artistId: 3, + albumId: 3, + genreId: 1, + cover: "https://picsum.photos/200", + details: { /* song details */ }, + }, + { + id: 4, + name: "Highway to Hell", + artistId: 4, + albumId: 4, + genreId: 1, + cover: "https://picsum.photos/200", + details: { /* song details */ }, + }, + { + id: 5, + name: "Sweet Child o' Mine", + artistId: 5, + albumId: 5, + genreId: 1, + cover: "https://picsum.photos/200", + details: { /* song details */ }, + }, + // Add more songs as needed + ]; const GenreDetailsView = ({ genreId }: any) => { + // const { isLoading: isLoadingGenre, data: genreData, error: isErrorGenre } = useQuery(API.getArtist(genreId)); + const screenSize = useBreakpointValue({ base: "small", md: "big" }); + const isMobileView = screenSize == "small"; + const navigation = useNavigation(); + + // if (isLoadingGenre) { + // return ; + // } + + // if (isErrorGenre) { + // navigation.navigate('Error'); + // } + return ( - - - - - - ); -} \ No newline at end of file + + + + + + + + + + + +); +} + +export default GenreDetailsView; \ No newline at end of file