App/components/Tracks/screen.tsx

import { TracksProps } from '../types'
import React from 'react'
import Track from '../Global/components/track'
import { FlatList, RefreshControl } from 'react-native'
import { QueryKeys } from '../../enums/query-keys'
import { fetchRecentlyPlayed } from '../../api/queries/functions/recents'
import { fetchFavoriteTracks } from '../../api/queries/functions/favorites'
import { useQuery } from '@tanstack/react-query'
import { Separator } from 'tamagui'
import { QueryConfig } from '../../api/queries/query.config'

export default function TracksScreen({ route, navigation }: TracksProps): React.JSX.Element {
	const queryKey: any[] = [route.params.query]

	if (route.params.query === QueryKeys.RecentlyPlayed)
		queryKey.push([QueryConfig.limits.recents * 4, QueryConfig.limits.recents])

	const {
		data: tracks,
		refetch,
		isPending,
	} = useQuery({
		queryKey,
		queryFn: () =>
			route.params.query === QueryKeys.RecentlyPlayed
				? fetchRecentlyPlayed(QueryConfig.limits.recents * 4, QueryConfig.limits.recents)
				: fetchFavoriteTracks(),
	})

	return (
		<FlatList
			contentInsetAdjustmentBehavior='automatic'
			ItemSeparatorComponent={() => <Separator />}
			numColumns={1}
			data={tracks}
			refreshControl={<RefreshControl refreshing={isPending} onRefresh={refetch} />}
			renderItem={({ index, item: track }) => (
				<Track
					navigation={navigation}
					showArtwork
					track={track}
					tracklist={tracks?.slice(index, index + 50) ?? []}
					queue={
						route.params.query === QueryKeys.RecentlyPlayed
							? 'Recently Played'
							: 'Favorite Tracks'
					}
				/>
			)}
		/>
	)
}