zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

you miss 100% of the shots you dont take

Browse Source
This commit is contained in:
danis
2023-07-09 23:24:31 +02:00
parent 28716eeab2
commit 3a09d10d3b
4 changed files with 251 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/Navigation.tsx
View File

@@ -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 },

14
front/components/SearchResult.tsx
View File

@@ -252,13 +252,13 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => {
</Text>
{artistData?.length ? (
<CardGridCustom
content={artistData.slice(0, props.maxItems ?? artistData.length).map((a) => ({
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}

109
front/views/ArtistDetailsView.tsx
View File

@@ -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 (
<SafeAreaView>
<ScrollView>
<Box>
<Image
source={{ uri: 'https://picsum.photos/200' }}
source={{ uri: 'https://picsum.photos/720' }}
alt={artistData?.name}
size={'100%'}
height={isMobileView ? 200 : 300}
@@ -36,9 +129,9 @@ const ArtistDetailsView = ({ artistId }: any) => {
resizeMode='cover'
/>
<Box>
<Heading mt={-20} ml={3} fontSize={50} >{artistData?.name}</Heading>
<Box>
{songData.map((comp: Song | SongWithArtist, index: Key | null | undefined) => (
<Heading mt={-20} ml={3} fontSize={50}>{artistData?.name}</Heading>
<ScrollView mt={3}>
{songs.map((comp: Song | SongWithArtist, index: Key | null | undefined) => (
<SongRow
key={index}
song={comp}
@@ -49,10 +142,10 @@ const ArtistDetailsView = ({ artistId }: any) => {
/>
))
}
</Box>
</ScrollView>
</Box>
</Box>
</SafeAreaView>
</ScrollView>
);
};

145
front/views/GenreDetailsView.tsx
View File

@@ -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 <LoadingView />;
// }
// if (isErrorGenre) {
// navigation.navigate('Error');
// }
return (
<SafeAreaView>
<Box>
</Box>
</SafeAreaView>
);
}
<ScrollView>
<Box
size={'100%'}
height={isMobileView ? 200 : 300}
width={'100%'}
backgroundColor={'#20c997'}
/>
<Flex
flexWrap="wrap"
direction={isMobileView ? 'column' : 'row'}
justifyContent={['flex-start']}
mt={4}
>
<Box>
</Box>
<Box>
</Box>
</Flex>
</ScrollView>
);
}
export default GenreDetailsView;