diff --git a/front/Navigation.tsx b/front/Navigation.tsx index f5fc58b..1e12973 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -62,7 +62,7 @@ const protectedRoutes = () => }, Genre: { component: GenreDetailsView, - options: { title: translate('genreFilter')}, + options: { title: translate('genreFilter') }, link: '/genre/:genreId', }, Score: { diff --git a/front/Theme.tsx b/front/Theme.tsx index b6e61ed..ab23d2d 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -6,7 +6,7 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => { const colorScheme = useColorScheme(); const config = { dependencies: { - "linear-gradient": require("expo-linear-gradient").LinearGradient, + 'linear-gradient': require('expo-linear-gradient').LinearGradient, }, }; diff --git a/front/components/SearchBar.tsx b/front/components/SearchBar.tsx index dc70c58..b04cc97 100644 --- a/front/components/SearchBar.tsx +++ b/front/components/SearchBar.tsx @@ -16,7 +16,7 @@ type FilterButton = { const SearchBar = () => { const { filter, updateFilter } = React.useContext(SearchContext); const { stringQuery, updateStringQuery } = React.useContext(SearchContext); - const [ barText, updateBarText ] = React.useState(stringQuery); + const [barText, updateBarText] = React.useState(stringQuery); const debouncedUpdateStringQuery = debounce(updateStringQuery, 500); diff --git a/front/components/SearchResult.tsx b/front/components/SearchResult.tsx index 962d916..85e371f 100644 --- a/front/components/SearchResult.tsx +++ b/front/components/SearchResult.tsx @@ -31,7 +31,6 @@ import { useNavigation } from '../Navigation'; import Artist from '../models/Artist'; import SongRow from '../components/SongRow'; - const swaToSongCardProps = (song: SongWithArtist) => ({ songId: song.id, name: song.name, @@ -159,15 +158,17 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => { {artistData?.length ? ( ({ - image: API.getArtistIllustration(artistData.id), - name: artistData.name, - id: artistData.id, - onPress: () => { - API.createSearchHistoryEntry(artistData.name, 'artist'); - navigation.navigate('Artist', { artistId: artistData.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(artistData.name, 'artist'); + navigation.navigate('Artist', { artistId: artistData.id }); + }, + }))} cardComponent={ArtistCard} /> ) : ( @@ -194,7 +195,7 @@ const GenreSearchComponent = (props: ItemSearchComponentProps) => { id: g.id, onPress: () => { API.createSearchHistoryEntry(g.name, 'genre'); - navigation.navigate('Genre', {genreId: g.id}); + navigation.navigate('Genre', { genreId: g.id }); }, }))} cardComponent={GenreCard} diff --git a/front/components/SongRow.tsx b/front/components/SongRow.tsx index 5ac3189..d88eaf6 100644 --- a/front/components/SongRow.tsx +++ b/front/components/SongRow.tsx @@ -1,8 +1,8 @@ -import { HStack, IconButton, Image, Text } from "native-base"; -import Song, { SongWithArtist } from "../models/Song"; -import RowCustom from "./RowCustom"; -import TextButton from "./TextButton"; -import { MaterialIcons } from "@expo/vector-icons"; +import { HStack, IconButton, Image, Text } from 'native-base'; +import Song, { SongWithArtist } from '../models/Song'; +import RowCustom from './RowCustom'; +import TextButton from './TextButton'; +import { MaterialIcons } from '@expo/vector-icons'; type SongRowProps = { song: Song | SongWithArtist; // TODO: remove Song diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts index 040fe5c..07684ea 100644 --- a/front/i18n/Translations.ts +++ b/front/i18n/Translations.ts @@ -43,7 +43,7 @@ export const en = { artistFilter: 'Artists', songsFilter: 'Songs', genreFilter: 'Genres', - favoriteFilter: 'Favorites', + favoriteFilter: 'Favorites', // profile page user: 'Profile', @@ -232,7 +232,7 @@ export const fr: typeof en = { artistFilter: 'Artistes', songsFilter: 'Morceaux', genreFilter: 'Genres', - favoriteFilter: 'Favoris', + favoriteFilter: 'Favoris', // Difficulty settings diffBtn: 'Difficulté', @@ -430,7 +430,7 @@ export const sp: typeof en = { artistFilter: 'Artistas', songsFilter: 'canciones', genreFilter: 'géneros', - favoriteFilter: 'Favorites', + favoriteFilter: 'Favorites', // Difficulty settings diffBtn: 'Dificultad', diff --git a/front/views/ArtistDetailsView.tsx b/front/views/ArtistDetailsView.tsx index eae2ee4..555157e 100644 --- a/front/views/ArtistDetailsView.tsx +++ b/front/views/ArtistDetailsView.tsx @@ -32,14 +32,18 @@ const ArtistDetailsView = ({ artistId }: RouteProps) => return ( - + + style={{ height: '100%', width: '100%' }} + /> - {artistQuery.data.name} + + {artistQuery.data.name} + {songsQuery.data.map((comp: Song, index: Key | null | undefined) => ( @@ -59,4 +63,4 @@ const ArtistDetailsView = ({ artistId }: RouteProps) => ); }; -export default ArtistDetailsView; \ No newline at end of file +export default ArtistDetailsView; diff --git a/front/views/GenreDetailsView.tsx b/front/views/GenreDetailsView.tsx index df3655b..8ee28ee 100644 --- a/front/views/GenreDetailsView.tsx +++ b/front/views/GenreDetailsView.tsx @@ -10,20 +10,25 @@ import { LinearGradient } from 'expo-linear-gradient'; type GenreDetailsViewProps = { genreId: number; -} +}; const GenreDetailsView = ({ genreId }: RouteProps) => { - const genreQuery = useQuery(API.getGenre(genreId)) - const songsQuery = useQuery(API.getSongsByGenre(genreId)) - const artistQueries = useQueries(songsQuery.data?.map((song) => song.artistId).map((artistId) => API.getArtist(artistId)) ?? []); + const genreQuery = useQuery(API.getGenre(genreId)); + const songsQuery = useQuery(API.getSongsByGenre(genreId)); + const artistQueries = useQueries( + songsQuery.data?.map((song) => song.artistId).map((artistId) => API.getArtist(artistId)) ?? + [] + ); // Here, .artist will always be defined - const songWithArtist = songsQuery?.data?.map((song) => ({ - ...song, - artist: artistQueries.find((query) => query.data?.id == song.artistId)?.data - })).filter((song) => song.artist !== undefined); + const songWithArtist = songsQuery?.data + ?.map((song) => ({ + ...song, + artist: artistQueries.find((query) => query.data?.id == song.artistId)?.data, + })) + .filter((song) => song.artist !== undefined); - const screenSize = useBreakpointValue({ base: "small", md: "big" }); - const isMobileView = screenSize == "small"; + const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); + const isMobileView = screenSize == 'small'; const fadeColor = useColorModeValue('#ffffff', '#000000'); const navigation = useNavigation(); @@ -38,13 +43,17 @@ const GenreDetailsView = ({ genreId }: RouteProps) => { return ( + style={{ width: '100%', height: isMobileView ? 200 : 300 }} + source={{ uri: API.getGenreIllustration(genreQuery.data.id) }} + > + style={{ height: '100%', width: '100%' }} + /> - {genreQuery.data.name} + + {genreQuery.data.name} + ) => { /> -); -} + ); +}; -export default GenreDetailsView; \ No newline at end of file +export default GenreDetailsView;