diff --git a/packages/common/src/api/index.ts b/packages/common/src/api/index.ts index 4eeda79a36c..dab8b42938c 100644 --- a/packages/common/src/api/index.ts +++ b/packages/common/src/api/index.ts @@ -30,7 +30,6 @@ export * from './tan-query/events' // Explore export * from './tan-query/collection/useExploreContent' -export * from './tan-query/explore/useBestSelling' // Lineups export * from './tan-query/lineups/useFeed' @@ -99,12 +98,10 @@ export * from './tan-query/tracks/useTrackFileInfo' export * from './tan-query/tracks/useUpdateTrack' export * from './tan-query/tracks/useRemixedTracks' export * from './tan-query/tracks/useRecommendedTracks' -export * from './tan-query/tracks/useRecentPremiumTracks' export * from './tan-query/tracks/useSuggestedPlaylistTracks' export * from './tan-query/tracks/useFeelingLuckyTrack' export * from './tan-query/tracks/useRecentlyPlayedTracks' export * from './tan-query/tracks/useRecentlyCommentedTracks' -export * from './tan-query/tracks/useMostSharedTracks' // Users export * from './tan-query/users/useUpdateProfile' diff --git a/packages/common/src/api/tan-query/explore/useBestSelling.ts b/packages/common/src/api/tan-query/explore/useBestSelling.ts deleted file mode 100644 index 39489998ff7..00000000000 --- a/packages/common/src/api/tan-query/explore/useBestSelling.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { HashId, BestSellingItem, full, OptionalId } from '@audius/sdk' -import { - InfiniteData, - useInfiniteQuery, - useQueryClient -} from '@tanstack/react-query' - -import { userCollectionMetadataFromSDK } from '~/adapters' -import { userTrackMetadataFromSDK } from '~/adapters/track' -import { transformAndCleanList } from '~/adapters/utils' -import { - primeCollectionData, - primeTrackData, - useQueryContext -} from '~/api/tan-query/utils' -import { SDKInfiniteQueryArgs } from '~/api/types' -import { ID } from '~/models' - -import { QUERY_KEYS } from '../queryKeys' -import { QueryKey, QueryOptions } from '../types' -import { useCurrentUserId } from '../users/account/useCurrentUserId' - -const DEFAULT_PAGE_SIZE = 10 - -export type UseBestSellingArgs = - SDKInfiniteQueryArgs - -export type BestSellingItemWithId = BestSellingItem & { id: ID } - -export const getBestSellingQueryKey = ( - userId: ID | null | undefined, - args: UseBestSellingArgs -) => { - return [QUERY_KEYS.bestSellingItems, userId, args] as unknown as QueryKey< - InfiniteData - > -} - -export const useBestSelling = ( - { - pageSize = DEFAULT_PAGE_SIZE, - type = 'all', - ...args - }: UseBestSellingArgs = {}, - options?: QueryOptions -) => { - const { audiusSdk } = useQueryContext() - const { data: currentUserId } = useCurrentUserId() - const queryClient = useQueryClient() - - return useInfiniteQuery({ - queryKey: getBestSellingQueryKey(currentUserId, { - pageSize, - type, - ...args - }), - initialPageParam: 0, - getNextPageParam: (lastPage: BestSellingItemWithId[], allPages) => { - if (lastPage.length < pageSize) return undefined - return allPages.length * pageSize - }, - queryFn: async ({ pageParam }) => { - const sdk = await audiusSdk() - const { data = [], related = {} } = - await sdk.full.explore.getFullBestSelling({ - ...args, - userId: OptionalId.parse(currentUserId), - type, - limit: pageSize, - offset: pageParam - }) - - const tracks = transformAndCleanList( - related?.tracks, - userTrackMetadataFromSDK - ) - - primeTrackData({ - tracks, - queryClient - }) - - const playlists = transformAndCleanList( - related?.playlists, - userCollectionMetadataFromSDK - ) - - primeCollectionData({ - collections: playlists, - queryClient - }) - - return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) })) - }, - select: (data) => data.pages.flat(), - ...options, - enabled: options?.enabled !== false - }) -} diff --git a/packages/common/src/api/tan-query/queryKeys.ts b/packages/common/src/api/tan-query/queryKeys.ts index 922efa5cde2..bd541fd6b4b 100644 --- a/packages/common/src/api/tan-query/queryKeys.ts +++ b/packages/common/src/api/tan-query/queryKeys.ts @@ -29,7 +29,6 @@ export const QUERY_KEYS = { userTracksByHandle: 'userTracksByHandle', userPlaylists: 'userPlaylists', userAlbums: 'userAlbums', - bestSellingItems: 'bestSellingItems', collection: 'collection', collections: 'collections', collectionByPermalink: 'collectionByPermalink', @@ -70,8 +69,6 @@ export const QUERY_KEYS = { purchasersCount: 'purchasersCount', remixedTracks: 'remixedTracks', recommendedTracks: 'recommendedTracks', - mostSharedTracks: 'mostSharedTracks', - recentPremiumTracks: 'recentPremiumTracks', mutedUsers: 'mutedUsers', salesAggregate: 'salesAggregate', usdcTransactionsCount: 'usdcTransactionsCount', diff --git a/packages/common/src/api/tan-query/tracks/useMostSharedTracks.ts b/packages/common/src/api/tan-query/tracks/useMostSharedTracks.ts deleted file mode 100644 index 9e4645685da..00000000000 --- a/packages/common/src/api/tan-query/tracks/useMostSharedTracks.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { OptionalId, full } from '@audius/sdk' -import { - InfiniteData, - useInfiniteQuery, - useQueryClient -} from '@tanstack/react-query' - -import { userTrackMetadataFromSDK } from '~/adapters/track' -import { transformAndCleanList } from '~/adapters/utils' -import { primeTrackData, useQueryContext } from '~/api/tan-query/utils' -import { SDKInfiniteQueryArgs } from '~/api/types' -import { ID } from '~/models' - -import { QUERY_KEYS } from '../queryKeys' -import { QueryKey, QueryOptions } from '../types' -import { useCurrentUserId } from '../users/account/useCurrentUserId' - -const DEFAULT_PAGE_SIZE = 10 - -export type UseMostSharedTracksArgs = - SDKInfiniteQueryArgs - -export const getMostSharedTracksQueryKey = ( - userId: ID | null | undefined, - args: UseMostSharedTracksArgs -) => { - return [QUERY_KEYS.mostSharedTracks, userId, args] as unknown as QueryKey< - InfiniteData - > -} - -export const useMostSharedTracks = ( - { pageSize = DEFAULT_PAGE_SIZE, ...args }: UseMostSharedTracksArgs = {}, - options?: QueryOptions -) => { - const { audiusSdk } = useQueryContext() - const { data: currentUserId } = useCurrentUserId() - const queryClient = useQueryClient() - - return useInfiniteQuery({ - queryKey: getMostSharedTracksQueryKey(currentUserId, { - pageSize, - timeRange: full.GetMostSharedTracksTimeRangeEnum.Week, - ...args - }), - initialPageParam: 0, - getNextPageParam: (lastPage: ID[], allPages) => { - if (lastPage.length < pageSize) return undefined - return allPages.length * pageSize - }, - queryFn: async ({ pageParam }) => { - if (!currentUserId) return [] - const sdk = await audiusSdk() - const { data = [] } = await sdk.full.tracks.getMostSharedTracks({ - ...args, - userId: OptionalId.parse(currentUserId), - limit: pageSize, - offset: pageParam - }) - const tracks = primeTrackData({ - tracks: transformAndCleanList(data, userTrackMetadataFromSDK), - queryClient - }) - - return tracks.map(({ track_id }) => track_id) - }, - select: (data) => data.pages.flat(), - ...options, - enabled: options?.enabled !== false - }) -} diff --git a/packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts b/packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts deleted file mode 100644 index e2e665c50b8..00000000000 --- a/packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { HashId, OptionalId, full } from '@audius/sdk' -import { - InfiniteData, - useInfiniteQuery, - useQueryClient -} from '@tanstack/react-query' - -import { userTrackMetadataFromSDK } from '~/adapters/track' -import { transformAndCleanList } from '~/adapters/utils' -import { primeTrackData, useQueryContext } from '~/api/tan-query/utils' -import { SDKInfiniteQueryArgs } from '~/api/types' -import { ID } from '~/models' - -import { QUERY_KEYS } from '../queryKeys' -import { QueryKey, QueryOptions } from '../types' -import { useCurrentUserId } from '../users/account/useCurrentUserId' - -const DEFAULT_PAGE_SIZE = 10 - -export type UseRecentPremiumTracksArgs = - SDKInfiniteQueryArgs - -export const getRecentPremiumTracksQueryKey = ( - userId: ID | null | undefined, - args: UseRecentPremiumTracksArgs -) => { - return [QUERY_KEYS.recentPremiumTracks, userId, args] as unknown as QueryKey< - InfiniteData - > -} - -export const useRecentPremiumTracks = ( - { pageSize = DEFAULT_PAGE_SIZE, ...args }: UseRecentPremiumTracksArgs = {}, - options?: QueryOptions -) => { - const { audiusSdk } = useQueryContext() - const { data: currentUserId } = useCurrentUserId() - const queryClient = useQueryClient() - - return useInfiniteQuery({ - queryKey: getRecentPremiumTracksQueryKey(currentUserId, { - pageSize, - ...args - }), - initialPageParam: 0, - getNextPageParam: (lastPage: ID[], allPages) => { - if (lastPage.length < pageSize) return undefined - return allPages.length * pageSize - }, - queryFn: async ({ pageParam }) => { - const sdk = await audiusSdk() - const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({ - ...args, - userId: OptionalId.parse(currentUserId), - limit: pageSize, - offset: pageParam - }) - - const tracks = transformAndCleanList(data, userTrackMetadataFromSDK) - - primeTrackData({ - tracks, - queryClient - }) - return data.map((item) => HashId.parse(item.id)) - }, - select: (data) => data.pages.flat(), - ...options, - enabled: options?.enabled !== false - }) -} diff --git a/packages/common/src/messages/explore.ts b/packages/common/src/messages/explore.ts index a6dce1e1c3f..5a5e112a23d 100644 --- a/packages/common/src/messages/explore.ts +++ b/packages/common/src/messages/explore.ts @@ -7,23 +7,15 @@ export const exploreMessages = { featuredPlaylists: 'Community Playlists', featuredRemixContests: 'Featured Remix Contests', forYou: 'For You', - recentlyListedForSale: 'Recently Listed for Sale', - bestSelling: 'Best Selling', artistSpotlight: 'Artist Spotlight', labelSpotlight: 'Label Spotlight', - exploreByMood: (category?: string) => - `Explore${category ? ` ${category}` : ''} by Mood`, bestOfAudius: 'Best of Audius', viewAll: 'View All', layoutOptionsLabel: 'View As', feelingLucky: 'Feeling Lucky?', imFeelingLucky: "I'm Feeling Lucky", recentlyPlayed: 'Recently Played', - activeDiscussions: 'Active Discussions', - mostShared: 'Most Shared Tracks This Week', undergroundTrending: 'Underground Trending', trendingPlaylists: 'Trending Playlists', - verified: 'Verified', - quickSearch: 'Quick Search', - downloadsAvailable: 'Downloads Available' + verified: 'Verified' } diff --git a/packages/mobile/src/screens/explore-screen/collections.ts b/packages/mobile/src/screens/explore-screen/collections.ts index 78d8583d193..3b13ee84ea5 100644 --- a/packages/mobile/src/screens/explore-screen/collections.ts +++ b/packages/mobile/src/screens/explore-screen/collections.ts @@ -3,7 +3,7 @@ import type { ComponentType } from 'react' import type { ImageSourcePropType } from 'react-native' import type { SvgProps } from 'react-native-svg' -import { IconCart, IconPlaylists, IconRemix } from '@audius/harmony-native' +import { IconCart, IconPlaylists } from '@audius/harmony-native' import IconCassette from 'app/assets/images/iconCassette.svg' export type ExploreCollection = { @@ -33,15 +33,6 @@ export const PREMIUM_TRACKS: ExploreCollection = { icon: IconCart } -export const DOWNLOADS_AVAILABLE: ExploreCollection = { - title: 'Downloads Available', - description: 'Popular tracks with downloads you can use in your own tracks.', - gradientColors: ['#FF00F5', '#00D1FF'], - gradientAngle: 135, - shadowColor: 'rgba(196,81,193)', - shadowOpacity: 0.25, - icon: IconRemix -} export const TRENDING_PLAYLISTS: ExploreCollection = { title: 'Trending Playlists', diff --git a/packages/mobile/src/screens/explore-screen/components/ActiveDiscussions.tsx b/packages/mobile/src/screens/explore-screen/components/ActiveDiscussions.tsx deleted file mode 100644 index 88a7c9b085b..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/ActiveDiscussions.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' - -import { useRecentlyCommentedTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { QueueSource } from '@audius/common/store' - -import { useDeferredElement } from '../../../hooks/useDeferredElement' - -import { ExploreSection } from './ExploreSection' -import { TrackTileCarousel } from './TrackTileCarousel' - -export const ActiveDiscussions = () => { - const { inView, InViewWrapper } = useDeferredElement() - const { data: recentlyCommentedTracks, isPending } = - useRecentlyCommentedTracks({ pageSize: 10 }, { enabled: inView }) - - return ( - - - - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/BestSelling.tsx b/packages/mobile/src/screens/explore-screen/components/BestSelling.tsx deleted file mode 100644 index 784ba72fcb5..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/BestSelling.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react' - -import { useBestSelling } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' - -import { useTheme } from '@audius/harmony-native' -import { CollectionCard } from 'app/components/collection-list/CollectionCard' -import { CardList } from 'app/components/core' -import { TrackCard } from 'app/components/track/TrackCard' -import { TrackCardSkeleton } from 'app/components/track/TrackCardSkeleton' -import { useDeferredElement } from 'app/hooks/useDeferredElement' -import { useSearchCategory } from 'app/screens/search-screen/searchState' - -import { ExploreSection } from './ExploreSection' - -export const BestSelling = () => { - const { spacing } = useTheme() - const [category] = useSearchCategory() - const { inView, InViewWrapper } = useDeferredElement() - - const type = - category === 'albums' ? 'album' : category === 'tracks' ? 'track' : 'all' - - const { data, isPending } = useBestSelling( - { pageSize: 10, type }, - { enabled: inView } - ) - - return ( - - - - item.contentType === 'album' ? ( - - ) : ( - - ) - } - horizontal - carouselSpacing={spacing.m} - LoadingCardComponent={TrackCardSkeleton} - /> - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/DownloadsAvailable.tsx b/packages/mobile/src/screens/explore-screen/components/DownloadsAvailable.tsx deleted file mode 100644 index 4ff9da27ed8..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/DownloadsAvailable.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useMemo } from 'react' - -import { useSearchTrackResults, SEARCH_PAGE_SIZE } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { QueueSource } from '@audius/common/store' - -import { useDeferredElement } from '../../../hooks/useDeferredElement' - -import { ExploreSection } from './ExploreSection' -import { TrackTileCarousel } from './TrackTileCarousel' - -export const DownloadsAvailable = () => { - const { inView, InViewWrapper } = useDeferredElement() - const { data, isPending, isError } = useSearchTrackResults( - { hasDownloads: true, pageSize: SEARCH_PAGE_SIZE }, - { enabled: inView } - ) - - const tracks = useMemo(() => data?.map((item) => item.id), [data]) - - if (isError || (!isPending && !tracks?.length)) { - return null - } - - return ( - - - - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx index d358a326d87..5cc4f698d9e 100644 --- a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx +++ b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx @@ -6,20 +6,13 @@ import { Flex } from '@audius/harmony-native' import { RecentSearches } from 'app/screens/search-screen/RecentSearches' import { useSearchCategory } from 'app/screens/search-screen/searchState' -import { ActiveDiscussions } from './ActiveDiscussions' import { ArtistSpotlight } from './ArtistSpotlight' -import { BestSelling } from './BestSelling' -import { DownloadsAvailable } from './DownloadsAvailable' import { FeaturedArtistCoinTracks } from './FeaturedArtistCoinTracks' import { FeaturedPlaylists } from './FeaturedPlaylists' import { FeaturedRemixContests } from './FeaturedRemixContests' import { FeelingLucky } from './FeelingLucky' import { ForYouTracks } from './ForYouTracks' import { LabelSpotlight } from './LabelSpotlight' -import { MoodsGrid } from './MoodsGrid' -import { MostSharedTracks } from './MostSharedTracks' -import { QuickSearchGrid } from './QuickSearchGrid' -import { RecentPremiumTracks } from './RecentPremiumTracks' import { RecentlyPlayedTracks } from './RecentlyPlayed' import { TrendingPlaylists } from './TrendingPlaylists' import { UndergroundTrendingTracks } from './UndergroundTrendingTracks' @@ -42,25 +35,12 @@ export const ExploreContent = () => { {showTrackContent && showUserContextualContent && ( )} - {showTrackContent && } {showPlaylistContent && } {showTrackContent && } {showTrackContent && } {showUserContent && } {showUserContent && } - {showTrackContent && ( - <> - - - - )} - {(showTrackContent || showAlbumContent || showPlaylistContent) && ( - - )} {showPlaylistContent && } - {showTrackContent && } - {(showAlbumContent || showTrackContent) && } - {showTrackContent && } {showTrackContent && showUserContextualContent && } {showUserContextualContent && } diff --git a/packages/mobile/src/screens/explore-screen/components/MoodsGrid.tsx b/packages/mobile/src/screens/explore-screen/components/MoodsGrid.tsx deleted file mode 100644 index f72bfb3c8d6..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/MoodsGrid.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useMemo, useCallback } from 'react' - -import { labelByCategory } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import type { Mood } from '@audius/sdk' -import { MOODS } from 'pages/search-page/moods' -import type { MoodInfo } from 'pages/search-page/types' -import { Image } from 'react-native' - -import { Flex, Paper, Text, useTheme } from '@audius/harmony-native' -import { moodMap } from 'app/utils/moods' - -import { - useSearchCategory, - useSearchFilters -} from '../../search-screen/searchState.tsx' - -import { ExploreSection } from './ExploreSection.tsx' - -interface MoodsGridProps { - isLoading?: boolean -} - -export const MoodsGrid = ({ isLoading: externalLoading }: MoodsGridProps) => { - const { spacing } = useTheme() - const [category, setCategory] = useSearchCategory() - const [, setFilters] = useSearchFilters() - - const moodEntries = useMemo( - () => Object.entries(MOODS) as [string, MoodInfo][], - [] - ) - - const handleMoodPress = useCallback( - (moodLabel: Mood) => { - if (category === 'all') { - setCategory('tracks') - } - setFilters({ mood: moodLabel }) - }, - [setFilters, setCategory, category] - ) - - if (externalLoading) { - return null - } - return ( - - - {moodEntries.sort().map(([_, moodInfo]) => ( - { - handleMoodPress(moodInfo.label) - }} - > - - - {moodInfo.label} - - - ))} - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/MostSharedTracks.tsx b/packages/mobile/src/screens/explore-screen/components/MostSharedTracks.tsx deleted file mode 100644 index 60bd8102003..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/MostSharedTracks.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' - -import { useMostSharedTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { QueueSource } from '@audius/common/store' -import { full } from '@audius/sdk' - -import { useDeferredElement } from '../../../hooks/useDeferredElement' - -import { ExploreSection } from './ExploreSection' -import { TrackTileCarousel } from './TrackTileCarousel' - -export const MostSharedTracks = () => { - const { inView, InViewWrapper } = useDeferredElement() - const { data: mostSharedTracks, isPending } = useMostSharedTracks( - { - pageSize: 10, - timeRange: full.GetMostSharedTracksTimeRangeEnum.Week - }, - { enabled: inView } - ) - - return ( - - - - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/QuickSearchGrid.tsx b/packages/mobile/src/screens/explore-screen/components/QuickSearchGrid.tsx deleted file mode 100644 index 5b487eebb08..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/QuickSearchGrid.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import React, { useCallback, useMemo } from 'react' - -import { exploreMessages as messages } from '@audius/common/messages' -import { - QUICK_SEARCH_PRESETS, - type QuickSearchPreset -} from '@audius/common/utils' -import { getCanonicalName } from '@audius/common/utils' -import { Image } from 'react-native' - -import { Box, Flex, Paper, Text, useTheme } from '@audius/harmony-native' -import { moodMap } from 'app/utils/moods' - -import { - useSearchCategory, - useSearchFilters -} from '../../search-screen/searchState.tsx' - -import { ExploreSection } from './ExploreSection.tsx' - -const QuickSearchPresetButton = ({ - preset, - onPress -}: { - preset: QuickSearchPreset - onPress: () => void -}) => { - const { spacing } = useTheme() - - const parts = useMemo(() => { - const parts: React.ReactNode[] = [] - if (preset.genre) { - parts.push( - - {getCanonicalName(preset.genre)} - - ) - } - if (preset.mood) { - parts.push( - <> - - - - {preset.mood} - - - ) - } - if (preset.key) { - parts.push( - - {preset.key} - - ) - } - if (preset.isVerified) { - parts.push( - - {messages.verified} - - ) - } - if (preset.bpm) { - parts.push( - - {preset.bpm.description} - - ) - } - return parts - }, [preset, spacing]) - - return ( - - {parts.map((part, idx) => ( - - {part} - {idx < parts.length - 1 ? ( - - {' + '} - - ) : null} - - ))} - - ) -} - -export const QuickSearchGrid = () => { - const [, setCategory] = useSearchCategory() - const [, setFilters] = useSearchFilters() - - const handlePressPreset = useCallback( - (preset: QuickSearchPreset) => { - // TODO: Support tabs - setCategory('tracks') - setFilters({ - mood: preset.mood, - genre: preset.genre, - bpm: preset.bpm?.value, - isVerified: preset.isVerified ? true : undefined, - key: preset.key - }) - }, - [setCategory, setFilters] - ) - - return ( - - - {QUICK_SEARCH_PRESETS.map((preset, idx) => ( - { - handlePressPreset(preset) - }} - /> - ))} - - - ) -} diff --git a/packages/mobile/src/screens/explore-screen/components/RecentPremiumTracks.tsx b/packages/mobile/src/screens/explore-screen/components/RecentPremiumTracks.tsx deleted file mode 100644 index ff3d2b25424..00000000000 --- a/packages/mobile/src/screens/explore-screen/components/RecentPremiumTracks.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' - -import { useRecentPremiumTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { QueueSource } from '@audius/common/store' - -import { useDeferredElement } from '../../../hooks/useDeferredElement' - -import { ExploreSection } from './ExploreSection' -import { TrackTileCarousel } from './TrackTileCarousel' - -export const RecentPremiumTracks = () => { - const { inView, InViewWrapper } = useDeferredElement() - const { data: recentPremiumTracks, isPending } = useRecentPremiumTracks( - { pageSize: 10 }, - { enabled: inView } - ) - - return ( - - - - - - ) -} diff --git a/packages/web/src/components/best-selling-card/BestSellingCard.tsx b/packages/web/src/components/best-selling-card/BestSellingCard.tsx deleted file mode 100644 index 036f116bffd..00000000000 --- a/packages/web/src/components/best-selling-card/BestSellingCard.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react' - -import { BestSellingItemWithId } from '@audius/common/api' -import { BestSellingItemContentTypeEnum } from '@audius/sdk' - -import { CollectionCard } from 'components/collection/CollectionCard' -import { TrackCard } from 'components/track/TrackCard' - -type BestSellingCardProps = { - item: BestSellingItemWithId - size?: 'xs' | 's' | 'm' | 'l' - loading?: boolean - noNavigation?: boolean - onClick?: React.MouseEventHandler -} - -export const BestSellingCard = ({ - item, - size = 'm', - loading, - noNavigation, - onClick -}: BestSellingCardProps) => { - const isTrack = item.contentType === BestSellingItemContentTypeEnum.Track - - if (isTrack) { - return ( - - ) - } - - return ( - - ) -} diff --git a/packages/web/src/components/best-selling-card/index.ts b/packages/web/src/components/best-selling-card/index.ts deleted file mode 100644 index 750fc2127c9..00000000000 --- a/packages/web/src/components/best-selling-card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { BestSellingCard } from './BestSellingCard' diff --git a/packages/web/src/pages/search-explore-page/collections.ts b/packages/web/src/pages/search-explore-page/collections.ts index 06aaa183240..cee74992473 100644 --- a/packages/web/src/pages/search-explore-page/collections.ts +++ b/packages/web/src/pages/search-explore-page/collections.ts @@ -3,8 +3,7 @@ import { ComponentType, SVGProps } from 'react' import { route } from '@audius/common/utils' import { IconPlaylists as IconExploreTopPlaylists, - IconCart, - IconRemix + IconCart } from '@audius/harmony' import IconCassette from 'assets/img/iconCassette.svg' @@ -12,8 +11,7 @@ import IconCassette from 'assets/img/iconCassette.svg' const { TRENDING_PLAYLISTS_PAGE, TRENDING_UNDERGROUND_PAGE, - SEARCH_PREMIUM_TRACKS, - SEARCH_DOWNLOADS_AVAILABLE + SEARCH_PREMIUM_TRACKS } = route export type ExploreCollection = { @@ -41,14 +39,6 @@ export const PREMIUM_TRACKS: ExploreCollection = { link: SEARCH_PREMIUM_TRACKS } -export const DOWNLOADS_AVAILABLE: ExploreCollection = { - title: 'Downloads Available', - subtitle: 'Popular tracks with downloads you can use in your own tracks.', - gradient: 'linear-gradient(138deg, #FF00F5 -5.01%, #00D1FF 110.47%)', - shadow: 'rgba(9, 175, 233, 0.35)', - icon: IconRemix, - link: SEARCH_DOWNLOADS_AVAILABLE -} export const TRENDING_PLAYLISTS: ExploreCollection = { title: 'Trending Playlists', diff --git a/packages/web/src/pages/search-explore-page/components/desktop/ActiveDiscussionsSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/ActiveDiscussionsSection.tsx deleted file mode 100644 index ba57b96ca0d..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/ActiveDiscussionsSection.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useRecentlyCommentedTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' - -import { Carousel } from './Carousel' -import { TilePairs, TileSkeletons } from './TileHelpers' -import { useDeferredElement } from './useDeferredElement' - -export const ActiveDiscussionsSection = () => { - const { ref, inView } = useDeferredElement() - - const { data, isLoading, isError, isSuccess } = useRecentlyCommentedTracks( - { pageSize: 10 }, - { enabled: inView } - ) - - if (isError || (isSuccess && !data?.length)) { - return null - } - - return ( - - {!inView || isLoading || !data ? ( - - ) : ( - - )} - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/BestSellingSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/BestSellingSection.tsx deleted file mode 100644 index c8b95e18ad7..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/BestSellingSection.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { useMemo } from 'react' - -import { useBestSelling } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' - -import { BestSellingCard } from 'components/best-selling-card' -import { TrackCardSkeleton } from 'components/track/TrackCard' -import { useSearchCategory } from 'pages/search-page/hooks' - -import { Carousel } from './Carousel' -import { useDeferredElement } from './useDeferredElement' - -export const BestSellingSection = () => { - const { ref, inView } = useDeferredElement() - - const [category] = useSearchCategory() - - const { data, isLoading, isError, isSuccess } = useBestSelling( - { - pageSize: 10, - type: - category === 'albums' - ? 'album' - : category === 'tracks' - ? 'track' - : 'all' - }, - { enabled: inView } - ) - - // Deduplicate data by ID to avoid duplicate keys - const uniqueItems = useMemo(() => { - return data?.filter( - (item, index, self) => self.findIndex((t) => t.id === item.id) === index - ) - }, [data]) - - if (isError || (isSuccess && !uniqueItems?.length)) { - return null - } - - return ( - - {!inView || !uniqueItems || isLoading - ? Array.from({ length: 6 }).map((_, i) => ( - - )) - : uniqueItems?.map((item) => ( - - ))} - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/DownloadsAvailableSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/DownloadsAvailableSection.tsx deleted file mode 100644 index 55c7169d37a..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/DownloadsAvailableSection.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useMemo } from 'react' - -import { useSearchTrackResults, SEARCH_PAGE_SIZE } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { QueueSource } from '@audius/common/store' - -import { Carousel } from './Carousel' -import { TilePairs, TileSkeletons } from './TileHelpers' -import { useDeferredElement } from './useDeferredElement' - -export const DownloadsAvailableSection = () => { - const { ref, inView } = useDeferredElement() - const { - data: lineupData, - isLoading, - isError, - isSuccess - } = useSearchTrackResults( - // Use the same page size as search so that we cache hit when user clicks View All - { hasDownloads: true, pageSize: SEARCH_PAGE_SIZE }, - { - enabled: inView - } - ) - - const data = useMemo(() => { - return lineupData?.map((item) => item.id) - }, [lineupData]) - - if (isError || (isSuccess && !data?.length)) { - return null - } - - return ( - - {!inView || isLoading || !data ? ( - - ) : ( - - )} - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/MoodGrid.tsx b/packages/web/src/pages/search-explore-page/components/desktop/MoodGrid.tsx deleted file mode 100644 index 0d24b55f6cb..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/MoodGrid.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { useCallback } from 'react' - -import { exploreMessages as messages } from '@audius/common/messages' -import { Flex, Paper, Text, useTheme } from '@audius/harmony' -import { Mood } from '@audius/sdk' - -import { useIsMobile } from 'hooks/useIsMobile' -import { useSearchCategory } from 'pages/search-page/hooks' -import { labelByCategoryView } from 'pages/search-page/types' -import { MOODS } from 'utils/Moods' - -export const MoodGrid = () => { - const [category, setCategory] = useSearchCategory() - const { color } = useTheme() - - const isMobile = useIsMobile() - - const handleMoodPress = useCallback( - (mood: Mood) => { - if (category === 'all') { - setCategory('tracks', { mood }) - } else { - setCategory(category, { mood }) - } - }, - [category, setCategory] - ) - - return ( - - - {messages.exploreByMood( - category === 'all' ? undefined : labelByCategoryView[category] - )} - - - {Object.entries(MOODS) - .sort() - .map(([mood, moodInfo]) => ( - handleMoodPress(moodInfo.value)} - css={{ - ':hover': { - background: color.neutral.n25, - border: `1px solid ${color.neutral.n150}` - } - }} - > - {moodInfo.icon} - - {moodInfo.label} - - - ))} - - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/MostSharedSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/MostSharedSection.tsx deleted file mode 100644 index 3018d94061b..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/MostSharedSection.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useMostSharedTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' -import { full } from '@audius/sdk' - -import { TrackCard, TrackCardSkeleton } from 'components/track/TrackCard' -import { useIsMobile } from 'hooks/useIsMobile' - -import { Carousel } from './Carousel' -import { useDeferredElement } from './useDeferredElement' - -export const MostSharedSection = () => { - const { ref, inView } = useDeferredElement() - const { data, isLoading, isError, isSuccess } = useMostSharedTracks( - { - pageSize: 10, - timeRange: full.GetMostSharedTracksTimeRangeEnum.Week - }, - { enabled: inView } - ) - const isMobile = useIsMobile() - - if (isError || (isSuccess && !data?.length)) { - return null - } - - return ( - - {!inView || !data || isLoading - ? Array.from({ length: 6 }).map((_, i) => ( - - )) - : data?.map((id) => )} - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/QuickSearchGrid.tsx b/packages/web/src/pages/search-explore-page/components/desktop/QuickSearchGrid.tsx deleted file mode 100644 index bbce30b8817..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/QuickSearchGrid.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React, { useCallback, useMemo } from 'react' - -import { exploreMessages as messages } from '@audius/common/messages' -import { - QUICK_SEARCH_PRESETS, - QuickSearchPreset, - getCanonicalName -} from '@audius/common/utils' -import { Flex, Paper, Text, useTheme } from '@audius/harmony' - -import { useIsMobile } from 'hooks/useIsMobile' -import { useSearchCategory } from 'pages/search-page/hooks' -import { MOODS } from 'utils/Moods' - -const QuickSearchPresetButton = ({ - preset, - onClick -}: { - preset: QuickSearchPreset - onClick: () => void -}) => { - const { color } = useTheme() - - const parts = useMemo(() => { - const parts: React.ReactNode[] = [] - if (preset.genre) { - parts.push( - - {getCanonicalName(preset.genre)} - - ) - } - if (preset.mood) { - parts.push( - - {MOODS[preset.mood].icon} - - {preset.mood} - - - ) - } - if (preset.key) { - parts.push( - - {preset.key} - - ) - } - if (preset.isVerified) { - parts.push( - - {messages.verified} - - ) - } - if (preset.bpm) { - parts.push( - - {preset.bpm.description} - - ) - } - return parts - }, [preset]) - - return ( - - {parts.map((part, idx) => ( - - {part} - {idx < parts.length - 1 ? ( - - {'+'} - - ) : null} - - ))} - - ) -} - -export const QuickSearchGrid = () => { - const isMobile = useIsMobile() - const [, setCategory] = useSearchCategory() - - const handleClickPreset = useCallback( - (preset: QuickSearchPreset) => { - setCategory('tracks', { - mood: preset.mood, - genre: preset.genre, - bpm: preset.bpm?.value, - isVerified: preset.isVerified ? true : undefined, - key: preset.key - }) - }, - [setCategory] - ) - - return ( - - - {messages.quickSearch} - - - {QUICK_SEARCH_PRESETS.map((preset, idx) => ( - handleClickPreset(preset)} - preset={preset} - /> - ))} - - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/RecentPremiumTracksSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/RecentPremiumTracksSection.tsx deleted file mode 100644 index fabe0ffa751..00000000000 --- a/packages/web/src/pages/search-explore-page/components/desktop/RecentPremiumTracksSection.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useRecentPremiumTracks } from '@audius/common/api' -import { exploreMessages as messages } from '@audius/common/messages' - -import { Carousel } from './Carousel' -import { TilePairs, TileSkeletons } from './TileHelpers' -import { useDeferredElement } from './useDeferredElement' - -export const RecentPremiumTracksSection = () => { - const { ref, inView } = useDeferredElement() - const { data, isLoading, isError, isSuccess } = useRecentPremiumTracks( - { pageSize: 10 }, - { enabled: inView } - ) - - if (isError || (isSuccess && !data?.length)) { - return null - } - - return ( - - {!inView || isLoading || !data ? ( - - ) : ( - - )} - - ) -} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx index 26835a4fcee..f79083db9ad 100644 --- a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx +++ b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx @@ -39,19 +39,12 @@ import { viewLayoutOptions } from 'pages/search-page/types' -import { ActiveDiscussionsSection } from './ActiveDiscussionsSection' import { ArtistCoinTracksSection } from './ArtistCoinTracksSection' import { ArtistSpotlightSection } from './ArtistSpotlightSection' -import { BestSellingSection } from './BestSellingSection' -import { DownloadsAvailableSection } from './DownloadsAvailableSection' import { FeaturedPlaylistsSection } from './FeaturedPlaylistsSection' import { FeaturedRemixContestsSection } from './FeaturedRemixContestsSection' import { FeelingLuckySection } from './FeelingLuckySection' import { LabelSpotlightSection } from './LabelSpotlightSection' -import { MoodGrid } from './MoodGrid' -import { MostSharedSection } from './MostSharedSection' -import { QuickSearchGrid } from './QuickSearchGrid' -import { RecentPremiumTracksSection } from './RecentPremiumTracksSection' import { RecentSearchesSection } from './RecentSearchesSection' import { RecentlyPlayedSection } from './RecentlyPlayedSection' import { RecommendedTracksSection } from './RecommendedTracksSection' @@ -204,7 +197,6 @@ const SearchExplorePage = ({ const showPlaylistContent = categoryKey === 'playlists' || categoryKey === 'all' const showUserContent = categoryKey === 'profiles' || categoryKey === 'all' - const showAlbumContent = categoryKey === 'albums' || categoryKey === 'all' return ( )} - {showTrackContent && } {showPlaylistContent && } {showTrackContent && } {showTrackContent && } {showUserContent && } {showUserContent && } - {showTrackContent && ( - <> - - - - )} - {(showTrackContent || showAlbumContent || showPlaylistContent) && ( - - )} {showPlaylistContent && } - {showTrackContent && } - {(showTrackContent || showAlbumContent) && } - {showTrackContent && } {showTrackContent && showUserContextualContent && ( )} diff --git a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx index 5fd90499043..b46727560fe 100644 --- a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx +++ b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx @@ -38,18 +38,11 @@ import { ViewLayout } from 'pages/search-page/types' -import { ActiveDiscussionsSection } from '../desktop/ActiveDiscussionsSection' import { ArtistSpotlightSection } from '../desktop/ArtistSpotlightSection' -import { BestSellingSection } from '../desktop/BestSellingSection' -import { DownloadsAvailableSection } from '../desktop/DownloadsAvailableSection' import { FeaturedPlaylistsSection } from '../desktop/FeaturedPlaylistsSection' import { FeaturedRemixContestsSection } from '../desktop/FeaturedRemixContestsSection' import { FeelingLuckySection } from '../desktop/FeelingLuckySection' import { LabelSpotlightSection } from '../desktop/LabelSpotlightSection' -import { MoodGrid } from '../desktop/MoodGrid' -import { MostSharedSection } from '../desktop/MostSharedSection' -import { QuickSearchGrid } from '../desktop/QuickSearchGrid' -import { RecentPremiumTracksSection } from '../desktop/RecentPremiumTracksSection' import { RecentSearchesSection } from '../desktop/RecentSearchesSection' import { RecentlyPlayedSection } from '../desktop/RecentlyPlayedSection' import { RecommendedTracksSection } from '../desktop/RecommendedTracksSection' @@ -183,7 +176,6 @@ const SearchExplorePage = ({ const showPlaylistContent = categoryKey === 'playlists' || categoryKey === 'all' const showUserContent = categoryKey === 'profiles' || categoryKey === 'all' - const showAlbumContent = categoryKey === 'albums' || categoryKey === 'all' return ( )} - {showPlaylistContent && } {showTrackContent && } {showTrackContent && } {showUserContent && } {showUserContent && } - {showTrackContent && ( - <> - - - - )} - {(showTrackContent || showAlbumContent || showPlaylistContent) && ( - - )} {showPlaylistContent && } - {showTrackContent && } - {(showAlbumContent || showTrackContent) && } - {showTrackContent && } {showTrackContent && showUserContextualContent && ( )}