diff --git a/front/components/ProgressBar.tsx b/front/components/ProgressBar.tsx index 8df8fd8..4a8fd92 100644 --- a/front/components/ProgressBar.tsx +++ b/front/components/ProgressBar.tsx @@ -1,6 +1,6 @@ import React from "react"; import { translate } from "../i18n/i18n"; -import { Box, useBreakpointValue, Text, VStack, Progress } from 'native-base'; +import { Box, useBreakpointValue, Text, VStack, Progress, Stack, AspectRatio } from 'native-base'; import { useNavigation } from "@react-navigation/native"; import { Pressable, Image } from "native-base"; import Card from "../components/Card"; @@ -12,27 +12,23 @@ const ProgressBar = ({ xp }: { xp: number}) => { const progessValue = 100 * xp / nextLevelThreshold; const nav = useNavigation(); - const flexDirection = useBreakpointValue({ base: 'column', xl: "row"}); return ( - nav.navigate('User')} - > - - Profile picture - - - + nav.navigate('User')} > + + + Profile picture + + {`${translate('level')} ${level}`} {xp} / {nextLevelThreshold} {translate('levelProgress')} - + ); } diff --git a/front/components/SongCardGrid.tsx b/front/components/SongCardGrid.tsx index 6a3d6eb..6408fff 100644 --- a/front/components/SongCardGrid.tsx +++ b/front/components/SongCardGrid.tsx @@ -2,16 +2,18 @@ import React from 'react'; import SongCard from './SongCard'; import { FlatGrid } from 'react-native-super-grid'; import { Heading, VStack } from 'native-base'; +import { RequireExactlyOne } from 'type-fest'; type SongCardGrid = { songs: Parameters[0][]; - maxItemsPerRow?: number, - itemDimension?: number, heading?: JSX.Element, -} +} & RequireExactlyOne<{ + maxItemsPerRow: number, + itemDimension: number, +}> const SongCardGrid = (props: SongCardGrid) => { - return + return {props.heading} { const navigation = useNavigation(); const screenSize = useBreakpointValue({ base: 'small', md: "big"}); - const flexDirection = useBreakpointValue({ base: 'column', xl: "row"}); const userQuery = useQuery(['user'], () => API.getUserInfo()); const playHistoryQuery = useQuery(['history', 'play'], () => API.getUserPlayHistory()); const searchHistoryQuery = useQuery(['history', 'search'], () => API.getSearchHistory()); @@ -22,28 +21,82 @@ const HomeView = () => { const artistsQueries = useQueries((playHistoryQuery.data?.concat(searchHistoryQuery.data ?? []).concat(nextStepQuery.data ?? []) ?? []).map((song) => ( { queryKey: ['artist', song.id], queryFn: () => API.getArtist(song.id) } ))); + if (!userQuery.data || !skillsQuery.data || !searchHistoryQuery.data || !playHistoryQuery.data) { - return + return
- +
} - return - - - - `${welcome} ${userQuery.data.name}!`}/> - + return + + + `${welcome} ${userQuery.data.name}!`} + /> - - - - + + + + + } + itemDimension={screenSize == 'small' ? 200 : 170} + songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) + .map((song) => ({ + albumCover: song.cover, + songTitle: song.name, + songId: song.id, + artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name + })) ?? [] + } + /> + + + + + + + + + } + itemDimension={screenSize == 'small' ? 200 : 170} + songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) + .map((song) => ({ + albumCover: song.cover, + songTitle: song.name, + songId: song.id, + artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name + })) ?? [] + } + /> + + + + + + navigation.navigate('Search')} + /> + navigation.navigate('Settings')} + /> + + } - itemDimension={screenSize == 'small' ? 250 : 200} - songs={nextStepQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) + itemDimension={screenSize == 'small' ? 200 : 170} + heading={} + songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) .map((song) => ({ albumCover: song.cover, songTitle: song.name, @@ -52,65 +105,10 @@ const HomeView = () => { })) ?? [] } /> - - - - - - - - - - - } - itemDimension={screenSize == 'small' ? 200 : 170} - songs={playHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) - .map((song) => ({ - albumCover: song.cover, - songTitle: song.name, - songId: song.id, - artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name - })) ?? [] - } - /> - - + + - - - - - - navigation.navigate('Search')} - /> - - } - songs={searchHistoryQuery.data?.filter((song) => artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)) - .map((song) => ({ - albumCover: song.cover, - songTitle: song.name, - songId: song.id, - artistName: artistsQueries.find((artistQuery) => artistQuery.data?.id === song.artistId)!.data!.name - })) ?? [] - } - /> - - - - navigation.navigate('Settings')} - /> - - - - }