[PE-6020] Add submissions section to remix contest container on mobile (#11939)

Author: Kyle-Shanks

packages/mobile/src/screens/track-screen/RemixContestSubmissionsTab.tsx

@@ -1,24 +1,155 @@
-import { useRemixContest } from '@audius/common/api'
+import type { LineupData } from '@audius/common/api'
+import { useRemixes, useTrack, useUser } from '@audius/common/api'
 import type { ID } from '@audius/common/models'
 
-import { Flex, Text } from '@audius/harmony-native'
+import {
+  Artwork,
+  Box,
+  Flex,
+  IconArrowRight,
+  PlainButton,
+  Skeleton,
+  Text
+} from '@audius/harmony-native'
+import { TrackLink } from 'app/components/track/TrackLink'
+import { TrackFlair, Size } from 'app/components/track-flair'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
 
-type Props = {
+const artworkSize = 120
+const userAvatarSize = 40
+
+const messages = {
+  noSubmissions: 'No submissions yet',
+  beFirst: 'Be the first to upload a remix!',
+  viewAll: 'View All'
+}
+
+type RemixContestSubmissionsTabProps = {
   trackId: ID
 }
 
 /**
  * Tab content displaying submissions for a remix contest
  */
-export const RemixContestSubmissionsTab = ({ trackId }: Props) => {
-  const { data: remixContest } = useRemixContest(trackId)
+export const RemixContestSubmissionsTab = ({
+  trackId
+}: RemixContestSubmissionsTabProps) => {
+  const { data: remixes } = useRemixes({ trackId, isContestEntry: true })
+  const submissions = remixes?.slice(0, 6)
 
-  if (!remixContest) return null
+  // If there are no submissions, show the empty state
+  if (submissions.length === 0) {
+    return <EmptyRemixContestSubmissions />
+  }
+
+  return <RemixContestSubmissions trackId={trackId} submissions={submissions} />
+}
+
+const SubmissionCard = ({ submission }: { submission: LineupData }) => {
+  const { data: track, isLoading: trackLoading } = useTrack(submission.id)
+  const { data: user, isLoading: userLoading } = useUser(track?.owner_id)
+  const isLoading = trackLoading || userLoading
+  const displaySkeleton = isLoading || !track || !user
+
+  return (
+    <Flex column gap='s'>
+      <Flex h={artworkSize} w={artworkSize}>
+        {displaySkeleton ? (
+          <Skeleton />
+        ) : (
+          <>
+            <TrackFlair
+              style={{
+                height: '100%',
+                width: '100%',
+                borderRadius: 4,
+                overflow: 'hidden'
+              }}
+              trackId={track.track_id}
+              size={Size.SMALL}
+            >
+              <Artwork source={{ uri: track.artwork['150x150'] }} />
+            </TrackFlair>
+            <Box
+              h={userAvatarSize}
+              w={userAvatarSize}
+              borderRadius='circle'
+              style={{
+                position: 'absolute',
+                top: -8,
+                right: -8,
+                overflow: 'hidden'
+              }}
+            >
+              <Artwork source={{ uri: user.profile_picture['150x150'] }} />
+            </Box>
+          </>
+        )}
+      </Flex>
+      <Flex column gap='xs' alignItems='center'>
+        {displaySkeleton ? (
+          <>
+            <Box h={20} w={100}>
+              <Skeleton />
+            </Box>
+            <Box h={20} w={64}>
+              <Skeleton />
+            </Box>
+          </>
+        ) : (
+          <>
+            <TrackLink textVariant='title' size='s' trackId={track.track_id} />
+            <UserLink userId={user.user_id} size='s' />
+          </>
+        )}
+      </Flex>
+    </Flex>
+  )
+}
+const RemixContestSubmissions = ({
+  trackId,
+  submissions
+}: {
+  trackId: ID
+  submissions: LineupData[]
+}) => {
+  const navigation = useNavigation()
+
+  return (
+    <Flex w='100%' column gap='2xl' pv='xl' ph='l' borderTop='default'>
+      <Flex gap='2xl' wrap='wrap'>
+        {submissions.map((submission) => (
+          <SubmissionCard key={submission.id} submission={submission} />
+        ))}
+      </Flex>
+      <Flex justifyContent='center'>
+        <PlainButton
+          iconRight={IconArrowRight}
+          onPress={() => {
+            navigation.navigate('TrackRemixes', { trackId })
+          }}
+        >
+          {messages.viewAll}
+        </PlainButton>
+      </Flex>
+    </Flex>
+  )
+}
 
+const EmptyRemixContestSubmissions = () => {
   return (
-    <Flex p='xl' borderTop='default'>
-      <Text variant='body' size='l'>
-        {/* TODO: Implement submissions content */}
+    <Flex
+      column
+      w='100%'
+      pv='2xl'
+      gap='s'
+      justifyContent='center'
+      alignItems='center'
+    >
+      <Text variant='title'>{messages.noSubmissions}</Text>
+      <Text variant='body' color='subdued'>
+        {messages.beFirst}
       </Text>
     </Flex>
   )

packages/mobile/src/screens/track-screen/TrackScreenLineup.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { useTrackPageLineup } from '@audius/common/api'
+import { useRemixContest, useTrackPageLineup } from '@audius/common/api'
 import { trackPageMessages as messages } from '@audius/common/messages'
 import type { ID, User } from '@audius/common/models'
 import { useFocusEffect } from '@react-navigation/native'
@@ -50,6 +50,8 @@ export const TrackScreenLineup = ({
     data,
     loadCachedDataIntoLineup
   } = useTrackPageLineup({ trackId, disableAutomaticCacheHandling: true })
+  const { data: remixContest } = useRemixContest(trackId)
+  const isRemixContest = !!remixContest
 
   useFocusEffect(
     useCallback(() => {
@@ -166,8 +168,8 @@ export const TrackScreenLineup = ({
 
   return (
     <Flex direction='column' gap='2xl'>
-      {renderRemixParentSection()}
-      {renderRemixesSection()}
+      {!isRemixContest ? renderRemixParentSection() : null}
+      {!isRemixContest ? renderRemixesSection() : null}
       {renderMoreBySection()}
       {renderRecommendedSection()}
     </Flex>