Discover Refactor (#752)

* Discover Refactor

tear down discover context provider

add animations to rows in discover screen

tidy up home screen refresh

* handle case where teh discover screen is empty on initial load

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "jellify",

src/api/mutations/discover/index.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query'
+import { useRecentlyAddedAlbums } from '../../queries/album'
+import { usePublicPlaylists } from '../../queries/playlist'
+import { useDiscoverArtists } from '../../queries/suggestions'
+
+const useDiscoverQueries = () => {
+	const { refetch: refetchRecentlyAdded } = useRecentlyAddedAlbums()
+
+	const { refetch: refetchPublicPlaylists } = usePublicPlaylists()
+
+	const { refetch: refetchArtistSuggestions } = useDiscoverArtists()
+
+	return useMutation({
+		mutationFn: async () =>
+			await Promise.allSettled([
+				refetchRecentlyAdded(),
+				refetchPublicPlaylists(),
+				refetchArtistSuggestions(),
+			]),
+	})
+}
+
+export default useDiscoverQueries

src/api/mutations/home/index.ts

@@ -16,12 +16,12 @@ const useHomeQueries = () => {
 
 	return useMutation({
 		mutationFn: async () => {
-			await Promise.all([
+			await Promise.allSettled([
 				refetchRecentlyPlayed(),
 				refetchFrequentlyPlayed(),
 				refetchUserPlaylists(),
 			])
-			await Promise.all([refetchFrequentArtists(), refetchRecentArtists()])
+			await Promise.allSettled([refetchFrequentArtists(), refetchRecentArtists()])
 			return true
 		},
 	})

src/api/queries/playlist/index.ts

@@ -39,3 +39,17 @@ export const usePlaylistTracks = (playlist: BaseItemDto) => {
 		},
 	})
 }
+
+export const usePublicPlaylists = () => {
+	const api = useApi()
+	const [library] = useJellifyLibrary()
+
+	return useInfiniteQuery({
+		queryKey: [QueryKeys.PublicPlaylists, library?.playlistLibraryId],
+		queryFn: ({ pageParam }) => fetchPublicPlaylists(api, library, pageParam),
+		select: (data) => data.pages.flatMap((page) => page),
+		getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
+			lastPage.length > 0 ? lastPageParam + 1 : undefined,
+		initialPageParam: 0,
+	})
+}

src/api/queries/suggestions/index.ts

@@ -0,0 +1,42 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { SuggestionQueryKeys } from './keys'
+import { fetchArtistSuggestions, fetchSearchSuggestions } from './utils/suggestions'
+import { useApi, useJellifyLibrary, useJellifyUser } from '../../../stores'
+import { isUndefined } from 'lodash'
+
+export const useSearchSuggestions = () => {
+	const api = useApi()
+
+	const [library] = useJellifyLibrary()
+
+	const [user] = useJellifyUser()
+
+	return useQuery({
+		queryKey: [SuggestionQueryKeys.SearchSuggestions, library?.musicLibraryId],
+		queryFn: () => fetchSearchSuggestions(api, user, library?.musicLibraryId),
+		enabled: !isUndefined(library),
+	})
+}
+
+export const useDiscoverArtists = () => {
+	const api = useApi()
+
+	const [library] = useJellifyLibrary()
+
+	const [user] = useJellifyUser()
+
+	return useInfiniteQuery({
+		queryKey: [
+			SuggestionQueryKeys.InfiniteArtistSuggestions,
+			user?.id,
+			library?.musicLibraryId,
+		],
+		queryFn: ({ pageParam }) =>
+			fetchArtistSuggestions(api, user, library?.musicLibraryId, pageParam),
+		getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
+			lastPage.length > 0 ? lastPageParam + 1 : undefined,
+		select: (data) => data.pages.flatMap((page) => page),
+		initialPageParam: 0,
+		maxPages: 2,
+	})
+}

src/api/queries/suggestions/keys.ts

@@ -0,0 +1,4 @@
+export enum SuggestionQueryKeys {
+	InfiniteArtistSuggestions,
+	SearchSuggestions,
+}

src/api/queries/suggestions/utils/suggestions.ts

@@ -2,7 +2,7 @@ import { getArtistsApi, getItemsApi } from '@jellyfin/sdk/lib/utils/api'
 import { BaseItemDto, BaseItemKind, ItemFields } from '@jellyfin/sdk/lib/generated-client/models'
 import { Api } from '@jellyfin/sdk'
 import { isUndefined } from 'lodash'
-import { JellifyUser } from '../../types/JellifyUser'
+import { JellifyUser } from '../../../../types/JellifyUser'
 
 /**
  * Fetches search suggestions from the Jellyfin server

src/components/Discover/component.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
-import { getToken, ScrollView, useTheme, View, YStack } from 'tamagui'
+import { getToken, ScrollView, useTheme, YStack } from 'tamagui'
 import RecentlyAdded from './helpers/just-added'
-import { useDiscoverContext } from '../../providers/Discover'
 import { RefreshControl } from 'react-native'
 import PublicPlaylists from './helpers/public-playlists'
 import SuggestedArtists from './helpers/suggested-artists'
+import useDiscoverQueries from '../../api/mutations/discover'
+import { useIsRestoring } from '@tanstack/react-query'
+import { useRecentlyAddedAlbums } from '../../api/queries/album'
 
 export default function Index(): React.JSX.Element {
 	const theme = useTheme()
 
-	const { refreshing, refresh, publicPlaylists, suggestedArtistsInfiniteQuery } =
+	const { mutateAsync: refreshAsync, isPending: refreshing } = useDiscoverQueries()
-		useDiscoverContext()
 
-	const publicPlaylistsLength = (publicPlaylists ?? []).length
+	const isRestoring = useIsRestoring()
+
+	const { isPending: loadingInitialData } = useRecentlyAddedAlbums()
 
 	return (
 		<ScrollView
@@ -25,29 +28,25 @@ export default function Index(): React.JSX.Element {
 			removeClippedSubviews
 			refreshControl={
 				<RefreshControl
-					refreshing={refreshing}
+					refreshing={refreshing || isRestoring || loadingInitialData}
-					onRefresh={refresh}
+					onRefresh={refreshAsync}
 					tintColor={theme.primary.val}
 				/>
 			}
 		>
-			<YStack gap={'$3'}>
+			<DiscoverContent />
-				<View testID='discover-recently-added'>
-					<RecentlyAdded />
-				</View>
-
-				{publicPlaylistsLength > 0 && (
-					<View testID='discover-public-playlists'>
-						<PublicPlaylists />
-					</View>
-				)}
-
-				{suggestedArtistsInfiniteQuery.data && (
-					<View testID='discover-suggested-artists'>
-						<SuggestedArtists />
-					</View>
-				)}
-			</YStack>
 		</ScrollView>
 	)
 }
+
+function DiscoverContent() {
+	return (
+		<YStack gap={'$3'}>
+			<RecentlyAdded />
+
+			<PublicPlaylists />
+
+			<SuggestedArtists />
+		</YStack>
+	)
+}

src/components/Discover/helpers/just-added.tsx

@@ -1,22 +1,27 @@
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import HorizontalCardList from '../../../components/Global/components/horizontal-list'
 import { ItemCard } from '../../../components/Global/components/item-card'
-import { useDiscoverContext } from '../../../providers/Discover'
 import { H5, View, XStack } from 'tamagui'
-import { H4 } from '../../../components/Global/helpers/text'
 import Icon from '../../Global/components/icon'
 import { useNavigation } from '@react-navigation/native'
 import DiscoverStackParamList from '../../../screens/Discover/types'
 import navigationRef from '../../../../navigation'
 import { useRecentlyAddedAlbums } from '../../../api/queries/album'
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated'
 
-export default function RecentlyAdded(): React.JSX.Element {
+export default function RecentlyAdded(): React.JSX.Element | undefined {
 	const recentlyAddedAlbumsInfinityQuery = useRecentlyAddedAlbums()
 
 	const navigation = useNavigation<NativeStackNavigationProp<DiscoverStackParamList>>()
 
 	return (
-		<View>
+		recentlyAddedAlbumsInfinityQuery.data && (
+			<Animated.View
+				entering={FadeIn.springify()}
+				exiting={FadeOut.springify()}
+				layout={LinearTransition.springify()}
+				testID='discover-recently-added'
+			>
 				<XStack
 					alignItems='center'
 					onPress={() => {
@@ -54,6 +59,7 @@ export default function RecentlyAdded(): React.JSX.Element {
 						/>
 					)}
 				/>
-		</View>
+			</Animated.View>
+		)
 	)
 }

src/components/Discover/helpers/public-playlists.tsx

@@ -1,5 +1,4 @@
-import { H5, View, XStack } from 'tamagui'
+import { H5, XStack } from 'tamagui'
-import { useDiscoverContext } from '../../../providers/Discover'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import Icon from '../../Global/components/icon'
 import HorizontalCardList from '../../Global/components/horizontal-list'
@@ -9,34 +8,42 @@ import { useNavigation } from '@react-navigation/native'
 import DiscoverStackParamList from '../../../screens/Discover/types'
 import navigationRef from '../../../../navigation'
 import { useJellifyServer } from '../../../stores'
+import { usePublicPlaylists } from '../../../api/queries/playlist'
+import Animated, { FadeIn, LinearTransition } from 'react-native-reanimated'
 
 export default function PublicPlaylists() {
 	const {
-		publicPlaylists,
+		data: playlists,
-		fetchNextPublicPlaylists,
+		fetchNextPage,
-		hasNextPublicPlaylists,
+		hasNextPage,
-		isFetchingNextPublicPlaylists,
+		isPending,
-		isPendingPublicPlaylists,
+		isFetchingNextPage,
-		refetchPublicPlaylists,
+		refetch,
-	} = useDiscoverContext()
+	} = usePublicPlaylists()
 
 	const navigation = useNavigation<NativeStackNavigationProp<DiscoverStackParamList>>()
 
 	const [server] = useJellifyServer()
 	const { width } = useSafeAreaFrame()
 	return (
-		<View>
+		playlists && (
+			<Animated.View
+				entering={FadeIn.springify()}
+				exiting={FadeIn.springify()}
+				layout={LinearTransition.springify()}
+				testID='discover-public-playlists'
+			>
 				<XStack
 					alignItems='center'
 					onPress={() => {
 						navigation.navigate('PublicPlaylists', {
-						playlists: publicPlaylists,
+							playlists,
 							navigation: navigation,
-						fetchNextPage: fetchNextPublicPlaylists,
+							fetchNextPage,
-						hasNextPage: hasNextPublicPlaylists,
+							hasNextPage,
-						isPending: isPendingPublicPlaylists,
+							isPending,
-						isFetchingNextPage: isFetchingNextPublicPlaylists,
+							isFetchingNextPage,
-						refetch: refetchPublicPlaylists,
+							refetch,
 						})
 					}}
 				>
@@ -46,7 +53,7 @@ export default function PublicPlaylists() {
 					<Icon name='arrow-right' />
 				</XStack>
 				<HorizontalCardList
-				data={publicPlaylists?.slice(0, 10) ?? []}
+					data={playlists?.slice(0, 10) ?? []}
 					renderItem={({ item }) => (
 						<ItemCard
 							caption={item.Name}
@@ -68,6 +75,7 @@ export default function PublicPlaylists() {
 						/>
 					)}
 				/>
-		</View>
+			</Animated.View>
+		)
 	)
 }

src/components/Discover/helpers/suggested-artists.tsx

@@ -3,19 +3,26 @@ import Icon from '../../Global/components/icon'
 import HorizontalCardList from '../../Global/components/horizontal-list'
 import { ItemCard } from '../../Global/components/item-card'
 import { NativeStackNavigationProp } from '@react-navigation/native-stack'
-import { useDiscoverContext } from '../../../providers/Discover'
 import { useNavigation } from '@react-navigation/native'
 import DiscoverStackParamList from '../../../screens/Discover/types'
 import navigationRef from '../../../../navigation'
 import { pickFirstGenre } from '../../../utils/genre-formatting'
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated'
+import { useDiscoverArtists } from '../../../api/queries/suggestions'
 
-export default function SuggestedArtists(): React.JSX.Element {
+export default function SuggestedArtists(): React.JSX.Element | undefined {
-	const { suggestedArtistsInfiniteQuery } = useDiscoverContext()
+	const suggestedArtistsInfiniteQuery = useDiscoverArtists()
 
 	const navigation = useNavigation<NativeStackNavigationProp<DiscoverStackParamList>>()
 
 	return (
-		<View>
+		suggestedArtistsInfiniteQuery.data && (
+			<Animated.View
+				entering={FadeIn.springify()}
+				exiting={FadeOut.springify()}
+				layout={LinearTransition.springify()}
+				testID='discover-suggested-artists'
+			>
 				<XStack
 					alignItems='center'
 					onPress={() => {
@@ -51,6 +58,7 @@ export default function SuggestedArtists(): React.JSX.Element {
 						/>
 					)}
 				/>
-		</View>
+			</Animated.View>
+		)
 	)
 }

src/components/Search/index.tsx

@@ -6,7 +6,7 @@ import { QueryKeys } from '../../enums/query-keys'
 import { fetchSearchResults } from '../../api/queries/search'
 import { useQuery } from '@tanstack/react-query'
 import { FlatList } from 'react-native'
-import { fetchSearchSuggestions } from '../../api/queries/suggestions'
+import { fetchSearchSuggestions } from '../../api/queries/suggestions/utils/suggestions'
 import { getToken, H3, Separator, Spinner, YStack } from 'tamagui'
 import Suggestions from './suggestions'
 import { isEmpty } from 'lodash'
@@ -15,6 +15,7 @@ import { ItemCard } from '../Global/components/item-card'
 import SearchParamList from '../../screens/Search/types'
 import { closeAllSwipeableRows } from '../Global/components/swipeable-row-registry'
 import { useApi, useJellifyLibrary, useJellifyUser } from '../../stores'
+import { useSearchSuggestions } from '../../api/queries/suggestions'
 
 export default function Search({
 	navigation,
@@ -40,10 +41,7 @@ export default function Search({
 		data: suggestions,
 		isFetching: fetchingSuggestions,
 		refetch: refetchSuggestions,
-	} = useQuery({
+	} = useSearchSuggestions()
-		queryKey: [QueryKeys.SearchSuggestions, library?.musicLibraryId],
-		queryFn: () => fetchSearchSuggestions(api, user, library?.musicLibraryId),
-	})
 
 	const search = () => {
 		let timeout: ReturnType<typeof setTimeout>

src/providers/Discover/index.tsx

@@ -1,145 +0,0 @@
-import {
-	InfiniteQueryObserverResult,
-	useInfiniteQuery,
-	UseInfiniteQueryResult,
-} from '@tanstack/react-query'
-import { QueryKeys } from '../../enums/query-keys'
-import { createContext, ReactNode, useContext, useState } from 'react'
-import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client/models'
-import { fetchPublicPlaylists } from '../../api/queries/playlist/utils'
-import { fetchArtistSuggestions } from '../../api/queries/suggestions'
-import { useRefetchRecentlyAdded } from '../../api/queries/album'
-import { useApi, useJellifyUser, useJellifyLibrary } from '../../stores'
-
-interface DiscoverContext {
-	refreshing: boolean
-	refresh: () => void
-	publicPlaylists: BaseItemDto[] | undefined
-	fetchNextPublicPlaylists: () => void
-	hasNextPublicPlaylists: boolean
-	isPendingPublicPlaylists: boolean
-	isFetchingNextPublicPlaylists: boolean
-	refetchPublicPlaylists: () => void
-	suggestedArtistsInfiniteQuery: UseInfiniteQueryResult<BaseItemDto[], Error>
-}
-
-const DiscoverContextInitializer = () => {
-	const api = useApi()
-	const [user] = useJellifyUser()
-	const [library] = useJellifyLibrary()
-	const [refreshing, setRefreshing] = useState<boolean>(false)
-
-	const refetchRecentlyAdded = useRefetchRecentlyAdded()
-
-	const {
-		data: publicPlaylists,
-		refetch: refetchPublicPlaylists,
-		fetchNextPage: fetchNextPublicPlaylists,
-		hasNextPage: hasNextPublicPlaylists,
-		isPending: isPendingPublicPlaylists,
-		isFetchingNextPage: isFetchingNextPublicPlaylists,
-	} = useInfiniteQuery({
-		queryKey: [QueryKeys.PublicPlaylists, library?.playlistLibraryId],
-		queryFn: ({ pageParam }) => fetchPublicPlaylists(api, library, pageParam),
-		select: (data) => data.pages.flatMap((page) => page),
-		getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
-			lastPage.length > 0 ? lastPageParam + 1 : undefined,
-		initialPageParam: 0,
-	})
-
-	const suggestedArtistsInfiniteQuery = useInfiniteQuery({
-		queryKey: [QueryKeys.InfiniteSuggestedArtists, user?.id, library?.musicLibraryId],
-		queryFn: ({ pageParam }) =>
-			fetchArtistSuggestions(api, user, library?.musicLibraryId, pageParam),
-		getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
-			lastPage.length > 0 ? lastPageParam + 1 : undefined,
-		select: (data) => data.pages.flatMap((page) => page),
-		initialPageParam: 0,
-		maxPages: 2,
-	})
-
-	const refresh = async () => {
-		setRefreshing(true)
-
-		await Promise.all([
-			refetchRecentlyAdded(),
-			refetchPublicPlaylists(),
-			suggestedArtistsInfiniteQuery.refetch(),
-		])
-		setRefreshing(false)
-	}
-
-	return {
-		refreshing,
-		refresh,
-		publicPlaylists,
-		fetchNextPublicPlaylists,
-		hasNextPublicPlaylists,
-		isPendingPublicPlaylists,
-		isFetchingNextPublicPlaylists,
-		refetchPublicPlaylists,
-		suggestedArtistsInfiniteQuery,
-	}
-}
-
-const DiscoverContext = createContext<DiscoverContext>({
-	refreshing: false,
-	refresh: () => {},
-	publicPlaylists: undefined,
-	fetchNextPublicPlaylists: () => {},
-	hasNextPublicPlaylists: false,
-	isPendingPublicPlaylists: false,
-	isFetchingNextPublicPlaylists: false,
-	refetchPublicPlaylists: () => {},
-	suggestedArtistsInfiniteQuery: {
-		data: undefined,
-		error: null,
-		isEnabled: true,
-		isStale: false,
-		isRefetching: false,
-		isError: false,
-		isLoading: true,
-		isPending: true,
-		isFetching: true,
-		isSuccess: false,
-		isFetched: false,
-		hasPreviousPage: false,
-		refetch: async () =>
-			Promise.resolve({} as InfiniteQueryObserverResult<BaseItemDto[], Error>),
-		fetchNextPage: async () =>
-			Promise.resolve({} as InfiniteQueryObserverResult<BaseItemDto[], Error>),
-		hasNextPage: false,
-		isFetchingNextPage: false,
-		isFetchPreviousPageError: false,
-		isFetchNextPageError: false,
-		isFetchingPreviousPage: false,
-		isLoadingError: false,
-		isRefetchError: false,
-		isPlaceholderData: false,
-		status: 'pending',
-		fetchStatus: 'idle',
-		dataUpdatedAt: 0,
-		errorUpdatedAt: 0,
-		failureCount: 0,
-		failureReason: null,
-		errorUpdateCount: 0,
-		isFetchedAfterMount: false,
-		isInitialLoading: false,
-		isPaused: false,
-		fetchPreviousPage: async () =>
-			Promise.resolve({} as InfiniteQueryObserverResult<BaseItemDto[], Error>),
-		promise: Promise.resolve([]),
-	},
-})
-
-export const DiscoverProvider: ({ children }: { children: ReactNode }) => React.JSX.Element = ({
-	children,
-}: {
-	children: ReactNode
-}) => {
-	const context = DiscoverContextInitializer()
-
-	return <DiscoverContext.Provider value={context}>{children}</DiscoverContext.Provider>
-}
-
-export const useDiscoverContext = () => useContext(DiscoverContext)

src/screens/Discover/index.tsx

@@ -2,7 +2,6 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import Index from '../../components/Discover/component'
 import AlbumScreen from '../Album'
 import { ArtistScreen } from '../Artist'
-import { DiscoverProvider } from '../../providers/Discover'
 import { useTheme } from 'tamagui'
 import RecentlyAdded from './albums'
 import PublicPlaylists from './playlists'
@@ -18,7 +17,6 @@ export function Discover(): React.JSX.Element {
 	const theme = useTheme()
 
 	return (
-		<DiscoverProvider>
 		<DiscoverStack.Navigator initialRouteName='Discover'>
 			<DiscoverStack.Screen
 				name='Discover'
@@ -99,6 +97,5 @@ export function Discover(): React.JSX.Element {
 				})}
 			/>
 		</DiscoverStack.Navigator>
-		</DiscoverProvider>
 	)
 }