From 5e070091bd5ae51130b817378f08503436965ac9 Mon Sep 17 00:00:00 2001 From: isaac Date: Wed, 7 May 2025 16:34:13 -0700 Subject: [PATCH 1/4] Wip --- .../remix-contest-card/RemixContestCard.tsx | 140 ++++++++++++++++++ .../components/remix-contest-card/index.ts | 3 + .../components/desktop/NewExplorePage.tsx | 25 +++- 3 files changed, 166 insertions(+), 2 deletions(-) create mode 100644 packages/web/src/components/remix-contest-card/RemixContestCard.tsx create mode 100644 packages/web/src/components/remix-contest-card/index.ts diff --git a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx new file mode 100644 index 00000000000..957089cab6b --- /dev/null +++ b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx @@ -0,0 +1,140 @@ +import { MouseEvent, Ref, forwardRef, useCallback } from 'react' + +import { + useCollection, + useCurrentUserId, + useRemixContest, + useTrack, + useUser +} from '@audius/common/api' +import { + ID, + SquareSizes, + isContentUSDCPurchaseGated +} from '@audius/common/models' +import { + formatCount, + formatDate, + formatReleaseDate +} from '@audius/common/utils' +import { Flex, Skeleton, Text } from '@audius/harmony' +import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg' +import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg' +import { pick } from 'lodash' +import { useLinkClickHandler } from 'react-router-dom-v5-compat' + +import { Card, CardProps, CardFooter, CardContent } from 'components/card' +import { TextLink, UserLink } from 'components/link' +import { LockedStatusBadge } from 'components/locked-status-badge' +import { TrackArtwork } from 'components/track/TrackArtwork' + +// import { CollectionDogEar } from './CollectionDogEar' +// import { CollectionImage } from './CollectionImage' + +const messages = { + repost: 'Reposts', + favorites: 'Favorites', + hidden: 'Hidden', + deadline: (releaseDate?: string) => + `Deadline ${releaseDate ? (new Date(releaseDate) < new Date() ? formatDate(releaseDate) : 'Ended') : releaseDate}` +} + +type RemixContestCardProps = Omit & { + id: ID + loading?: boolean + noNavigation?: boolean + onCollectionLinkClick?: (e: MouseEvent) => void +} + +const cardSizeToCoverArtSizeMap = { + xs: SquareSizes.SIZE_150_BY_150, + s: SquareSizes.SIZE_480_BY_480, + m: SquareSizes.SIZE_480_BY_480, + l: SquareSizes.SIZE_480_BY_480 +} + +export const RemixContestCard = forwardRef( + (props: RemixContestCardProps, ref: Ref) => { + const { + id, + loading, + size, + onClick, + onCollectionLinkClick, + noNavigation, + ...other + } = props + console.log('asdf props: ', props) + const { data: currentUserId } = useCurrentUserId() + const { data: remixContest, isPending: isRemixContestPending } = + useRemixContest(id) + const { data: track, isPending: isTrackPending } = useTrack( + remixContest?.entityId + ) + const { data: user, isPending: isUserPending } = useUser(track?.owner_id) + + const isPending = + isRemixContestPending || isTrackPending || isUserPending || !track + console.log('asdf remixContest: ', remixContest) + console.log('asdf track: ', track) + const permalink = track?.permalink + + const handleNavigate = useLinkClickHandler(permalink ?? '') + + const handleClick = useCallback( + (e: MouseEvent) => { + onClick?.(e) + if (noNavigation) return + handleNavigate(e) + }, + [noNavigation, handleNavigate, onClick] + ) + + if (isPending || loading) { + return ( + + + + + + + + + + + + + ) + } + + return ( + + {/* */} + + + + + {track?.title} + + + + + + + + {messages.deadline(remixContest?.endDate)} + + + ) + } +) diff --git a/packages/web/src/components/remix-contest-card/index.ts b/packages/web/src/components/remix-contest-card/index.ts new file mode 100644 index 00000000000..bd42eee5bf3 --- /dev/null +++ b/packages/web/src/components/remix-contest-card/index.ts @@ -0,0 +1,3 @@ +export { RemixContestCard } from './RemixContestCard' + +export type { RemixContestCardProps } from './RemixContestCard' diff --git a/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx b/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx index a17be93e036..5ecb7f02ba7 100644 --- a/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx +++ b/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx @@ -1,6 +1,10 @@ import { useCallback, useEffect, useState } from 'react' -import { useFeaturedPlaylists, useFeaturedProfiles } from '@audius/common/api' +import { + useExploreContent, + useFeaturedPlaylists, + useFeaturedProfiles +} from '@audius/common/api' import { User } from '@audius/common/models' import { TQCollection } from '@audius/common/src/api/tan-query/models' import { ExploreCollectionsVariant } from '@audius/common/store' @@ -26,6 +30,7 @@ import { CollectionCard } from 'components/collection' import PerspectiveCard, { TextInterior } from 'components/perspective-card/PerspectiveCard' +import { RemixContestCard } from 'components/remix-contest-card' import { UserCard } from 'components/user-card' import { useIsUSDCEnabled } from 'hooks/useIsUSDCEnabled' import useTabs from 'hooks/useTabs/useTabs' @@ -66,7 +71,7 @@ const messages = { description: 'Discover the hottest and trendiest tracks on Audius right now', searchPlaceholder: 'What do you want to listen to?', featuredPlaylists: 'Featured Playlists', - remixContests: 'Remix Contests', + featuredRemixContests: 'Featured Remix Contests', artistSpotlight: 'Artist Spotlight', bestOfAudius: 'Best of Audius', viewAll: 'View All' @@ -126,6 +131,8 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => { const { data: featuredProfiles } = useFeaturedProfiles({ limit: FEATURED_LIMIT }) + const { data: exploreContent, isLoading } = useExploreContent() + const featuredRemixContests = exploreContent?.featuredRemixContests ?? [] const handleTabClick = useCallback( (newTab: string) => { @@ -286,6 +293,20 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => { ))} + + + {messages.featuredRemixContests} + + {featuredRemixContests?.map((featuredRemixContest) => ( + + ))} + + + {/* Artist Spotlight */} From 03bd2b96985788134d6ec8d18274e34751d85c54 Mon Sep 17 00:00:00 2001 From: isaac Date: Thu, 8 May 2025 11:45:33 -0700 Subject: [PATCH 2/4] Add remix contest and skeleton to new explore --- .../remix-contest-card/RemixContestCard.tsx | 48 ++----------------- .../components/remix-contest-card/index.ts | 2 - .../components/desktop/NewExplorePage.tsx | 38 +++++---------- 3 files changed, 18 insertions(+), 70 deletions(-) diff --git a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx index 957089cab6b..f8ed69b63e8 100644 --- a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx +++ b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx @@ -1,40 +1,21 @@ import { MouseEvent, Ref, forwardRef, useCallback } from 'react' import { - useCollection, useCurrentUserId, useRemixContest, useTrack, useUser } from '@audius/common/api' -import { - ID, - SquareSizes, - isContentUSDCPurchaseGated -} from '@audius/common/models' -import { - formatCount, - formatDate, - formatReleaseDate -} from '@audius/common/utils' +import { ID, SquareSizes } from '@audius/common/models' +import { formatDate } from '@audius/common/utils' import { Flex, Skeleton, Text } from '@audius/harmony' -import IconHeart from '@audius/harmony/src/assets/icons/Heart.svg' -import IconRepost from '@audius/harmony/src/assets/icons/Repost.svg' -import { pick } from 'lodash' import { useLinkClickHandler } from 'react-router-dom-v5-compat' import { Card, CardProps, CardFooter, CardContent } from 'components/card' import { TextLink, UserLink } from 'components/link' -import { LockedStatusBadge } from 'components/locked-status-badge' import { TrackArtwork } from 'components/track/TrackArtwork' -// import { CollectionDogEar } from './CollectionDogEar' -// import { CollectionImage } from './CollectionImage' - const messages = { - repost: 'Reposts', - favorites: 'Favorites', - hidden: 'Hidden', deadline: (releaseDate?: string) => `Deadline ${releaseDate ? (new Date(releaseDate) < new Date() ? formatDate(releaseDate) : 'Ended') : releaseDate}` } @@ -46,26 +27,10 @@ type RemixContestCardProps = Omit & { onCollectionLinkClick?: (e: MouseEvent) => void } -const cardSizeToCoverArtSizeMap = { - xs: SquareSizes.SIZE_150_BY_150, - s: SquareSizes.SIZE_480_BY_480, - m: SquareSizes.SIZE_480_BY_480, - l: SquareSizes.SIZE_480_BY_480 -} - export const RemixContestCard = forwardRef( (props: RemixContestCardProps, ref: Ref) => { - const { - id, - loading, - size, - onClick, - onCollectionLinkClick, - noNavigation, - ...other - } = props - console.log('asdf props: ', props) - const { data: currentUserId } = useCurrentUserId() + const { id, loading, size, onClick, noNavigation, ...other } = props + const { data: remixContest, isPending: isRemixContestPending } = useRemixContest(id) const { data: track, isPending: isTrackPending } = useTrack( @@ -75,8 +40,7 @@ export const RemixContestCard = forwardRef( const isPending = isRemixContestPending || isTrackPending || isUserPending || !track - console.log('asdf remixContest: ', remixContest) - console.log('asdf track: ', track) + const permalink = track?.permalink const handleNavigate = useLinkClickHandler(permalink ?? '') @@ -109,7 +73,6 @@ export const RemixContestCard = forwardRef( return ( - {/* */} {track?.title} diff --git a/packages/web/src/components/remix-contest-card/index.ts b/packages/web/src/components/remix-contest-card/index.ts index bd42eee5bf3..4a34a704291 100644 --- a/packages/web/src/components/remix-contest-card/index.ts +++ b/packages/web/src/components/remix-contest-card/index.ts @@ -1,3 +1 @@ export { RemixContestCard } from './RemixContestCard' - -export type { RemixContestCardProps } from './RemixContestCard' diff --git a/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx b/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx index 5ecb7f02ba7..14cf4dffbaf 100644 --- a/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx +++ b/packages/web/src/pages/explore-page/components/desktop/NewExplorePage.tsx @@ -1,12 +1,6 @@ import { useCallback, useEffect, useState } from 'react' -import { - useExploreContent, - useFeaturedPlaylists, - useFeaturedProfiles -} from '@audius/common/api' -import { User } from '@audius/common/models' -import { TQCollection } from '@audius/common/src/api/tan-query/models' +import { useExploreContent } from '@audius/common/api' import { ExploreCollectionsVariant } from '@audius/common/store' import { Paper, @@ -124,15 +118,13 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => { const navigate = useNavigate() const showSearchResults = useShowSearchResults() - const { data: featuredPlaylists } = useFeaturedPlaylists( - { limit: FEATURED_LIMIT }, - { placeholderData: (prev: TQCollection[]) => prev } - ) - const { data: featuredProfiles } = useFeaturedProfiles({ - limit: FEATURED_LIMIT - }) - const { data: exploreContent, isLoading } = useExploreContent() - const featuredRemixContests = exploreContent?.featuredRemixContests ?? [] + const { data: exploreContent } = useExploreContent() + const featuredPlaylists = + exploreContent?.featuredPlaylists.slice(0, FEATURED_LIMIT) ?? [] + const featuredProfiles = + exploreContent?.featuredProfiles.slice(0, FEATURED_LIMIT) ?? [] + const featuredRemixContests = + exploreContent?.featuredRemixContests.slice(0, FEATURED_LIMIT) ?? [] const handleTabClick = useCallback( (newTab: string) => { @@ -284,10 +276,10 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => { - {featuredPlaylists?.map((playlist) => ( + {featuredPlaylists?.map((playlist_id) => ( ))} @@ -322,12 +314,8 @@ const ExplorePage = ({ title, pageTitle, description }: ExplorePageProps) => { - {featuredProfiles?.map((featuredProfile: User) => ( - + {featuredProfiles?.map((user_id) => ( + ))} From a765aa87e81df7747f8e6b8d280ea54e2d03162c Mon Sep 17 00:00:00 2001 From: isaac Date: Thu, 8 May 2025 11:48:30 -0700 Subject: [PATCH 3/4] clean --- .../web/src/components/remix-contest-card/RemixContestCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx index f8ed69b63e8..2859e8602ce 100644 --- a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx +++ b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx @@ -24,7 +24,6 @@ type RemixContestCardProps = Omit & { id: ID loading?: boolean noNavigation?: boolean - onCollectionLinkClick?: (e: MouseEvent) => void } export const RemixContestCard = forwardRef( From 5149151c3c9ad4d88101c5e4a161a62ee85d0b27 Mon Sep 17 00:00:00 2001 From: isaac Date: Thu, 8 May 2025 11:48:59 -0700 Subject: [PATCH 4/4] clean --- .../src/components/remix-contest-card/RemixContestCard.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx index 2859e8602ce..e245b88e395 100644 --- a/packages/web/src/components/remix-contest-card/RemixContestCard.tsx +++ b/packages/web/src/components/remix-contest-card/RemixContestCard.tsx @@ -1,11 +1,6 @@ import { MouseEvent, Ref, forwardRef, useCallback } from 'react' -import { - useCurrentUserId, - useRemixContest, - useTrack, - useUser -} from '@audius/common/api' +import { useRemixContest, useTrack, useUser } from '@audius/common/api' import { ID, SquareSizes } from '@audius/common/models' import { formatDate } from '@audius/common/utils' import { Flex, Skeleton, Text } from '@audius/harmony'