mirror of
https://github.com/anultravioletaurora/Jellify.git
synced 2026-01-06 13:50:58 -06:00
c421c20d35
Refactors the client.ts file and moves it's functionality into the JellifyContext for use in other componentry. Lots of touching in the api folder to refactor this. I also found an issue when adding items to a playlist, so I bumped the axios package - which fixed the issue. Adds "Most Played" and "On Repeat" sections to CarPlay. Most Played will allow users to view their most played artists, while On Repeat will give users access to their top tracks, of which they can select and start playback Fixes an issue where on startup, if the user was logged in and had a persisted queue, it wouldn't playback. Users should be able to directly start up the queue upon relaunching the app if they are authenticated
60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { FlatList, RefreshControl } from 'react-native-gesture-handler'
|
|
import { useSafeAreaFrame } from 'react-native-safe-area-context'
|
|
import { ItemCard } from '../Global/components/item-card'
|
|
import { FavoritePlaylistsProps } from '../types'
|
|
import Icon from '../Global/helpers/icon'
|
|
import { getToken } from 'tamagui'
|
|
import { fetchFavoritePlaylists } from '../../api/queries/favorites'
|
|
import { QueryKeys } from '../../enums/query-keys'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useJellifyContext } from '../provider'
|
|
export default function FavoritePlaylists({
|
|
navigation,
|
|
}: FavoritePlaylistsProps): React.JSX.Element {
|
|
const { api, user, library } = useJellifyContext()
|
|
navigation.setOptions({
|
|
headerRight: () => {
|
|
return (
|
|
<Icon
|
|
name='plus-circle-outline'
|
|
color={getToken('$color.telemagenta')}
|
|
onPress={() => navigation.navigate('AddPlaylist')}
|
|
/>
|
|
)
|
|
},
|
|
})
|
|
|
|
const {
|
|
data: playlists,
|
|
isPending,
|
|
refetch,
|
|
} = useQuery({
|
|
queryKey: [QueryKeys.UserPlaylists],
|
|
queryFn: () => fetchFavoritePlaylists(api, user, library),
|
|
})
|
|
|
|
return (
|
|
<FlatList
|
|
contentContainerStyle={{
|
|
flexGrow: 1,
|
|
alignItems: 'center',
|
|
}}
|
|
contentInsetAdjustmentBehavior='automatic'
|
|
numColumns={2}
|
|
data={playlists}
|
|
refreshControl={<RefreshControl refreshing={isPending} onRefresh={refetch} />}
|
|
renderItem={({ index, item: playlist }) => (
|
|
<ItemCard
|
|
item={playlist}
|
|
caption={playlist.Name ?? 'Untitled Playlist'}
|
|
onPress={() => {
|
|
navigation.navigate('Playlist', { playlist })
|
|
}}
|
|
size={'$14'}
|
|
squared
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
}
|