Fix remix contest submissions (#13821)

Fixes remix contest page, adding filters back for web, mobile-web, and
mobile

Author: dylanjeffers

packages/mobile/src/harmony-native/components/Button/FilterButton/FilterButton.tsx

@@ -30,7 +30,8 @@ export const FilterButton = <Value extends string>(
     onChange,
     filterScreen = 'FilterButton',
     options,
-    screen
+    screen,
+    disableSearch
   } = props
 
   const selectedOption = options?.find((option) => option.value === value)
@@ -113,11 +114,22 @@ export const FilterButton = <Value extends string>(
           title: label,
           onChange,
           value,
-          screen
+          screen,
+          disableSearch
         })
       }
     },
-    [onPress, options, screen, navigation, filterScreen, label, onChange, value]
+    [
+      onPress,
+      options,
+      screen,
+      navigation,
+      filterScreen,
+      label,
+      onChange,
+      value,
+      disableSearch
+    ]
   )
 
   const Icon = useMemo(() => {

packages/mobile/src/harmony-native/components/Button/FilterButton/FilterButtonScreen.tsx

@@ -15,6 +15,7 @@ export type FilterButtonScreenParams = {
   onChange: (value: Maybe<string>) => void
   value: string
   screen?: ComponentType<ScreenProps<string>>
+  disableSearch?: boolean
 }
 
 export const FilterButtonScreen = () => {
@@ -24,7 +25,8 @@ export const FilterButtonScreen = () => {
     title,
     onChange: onSubmit,
     value: initialValue,
-    screen: Screen
+    screen: Screen,
+    disableSearch = false
   } = params ?? {}
 
   const [value, setValue] = useState<Maybe<string>>(initialValue)
@@ -47,6 +49,7 @@ export const FilterButtonScreen = () => {
           value={value ?? ''}
           onSubmit={handleSubmit}
           searchText={`Search ${title}`}
+          disableSearch={disableSearch}
           clearable={Boolean(value)}
           onClear={() => setValue(undefined)}
         />

packages/mobile/src/harmony-native/components/Button/FilterButton/types.ts

@@ -129,4 +129,9 @@ export type FilterButtonProps<Value extends string = string> = {
    */
   screen?: ComponentType<ScreenProps<Value>>
   renderLabel?: (label: string) => ReactNode
+
+  /**
+   * When true, the list selection screen will not show a search field (e.g. for short option lists)
+   */
+  disableSearch?: boolean
 }

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

@@ -1,3 +1,5 @@
+import { useCallback, useState } from 'react'
+
 import {
   useCurrentUserId,
   useRemixContest,
@@ -12,6 +14,7 @@ import { Text as RNText, View } from 'react-native'
 
 import {
   Button,
+  FilterButton,
   Flex,
   IconRemix,
   IconTrophy,
@@ -56,17 +59,37 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   }
 }))
 
+const SORT_OPTIONS = [
+  { label: 'Most Recent', value: 'recent' as const },
+  { label: 'Most Plays', value: 'plays' as const },
+  { label: 'Most Favorites', value: 'likes' as const }
+]
+
 export const TrackRemixesScreen = () => {
   const { onOpen: openPickWinnersDrawer } = useDrawer('PickWinners')
   const { data: currentUserId } = useCurrentUserId()
   const { params } = useRoute<'TrackRemixes'>()
   const { data: track } = useTrackByParams(params)
   const trackId = track?.track_id
+
+  const [sortMethod, setSortMethod] = useState<'recent' | 'plays' | 'likes'>(
+    'recent'
+  )
+  const [isCosign, setIsCosign] = useState(false)
+  const [isContestEntry, setIsContestEntry] = useState(false)
+
+  const handleSortChange = useCallback((value: string | undefined) => {
+    setSortMethod((value as 'recent' | 'plays' | 'likes') ?? 'recent')
+  }, [])
+
   const { data, count, isFetching, isPending, loadNextPage, lineup, pageSize } =
     useRemixesLineup({
       trackId: track?.track_id,
       includeOriginal: true,
-      includeWinners: true
+      includeWinners: true,
+      sortMethod,
+      isCosign,
+      isContestEntry
     })
   const { data: contest } = useRemixContest(trackId)
   const isRemixContest = !!contest
@@ -94,13 +117,40 @@ export const TrackRemixesScreen = () => {
   )
 
   const remixesDelineator = (
-    <Flex justifyContent='space-between' ph='l' pt='xl'>
+    <Flex ph='l' pt='xl' gap='m'>
       {count ? (
         <Text variant='title'>
           {messages.remixesTitle}
           {count !== undefined ? ` (${count})` : ''}
         </Text>
       ) : null}
+      <Flex row gap='s' wrap='wrap'>
+        <FilterButton
+          label={messages.coSigned}
+          value={isCosign ? 'true' : undefined}
+          onPress={() => setIsCosign((prev) => !prev)}
+          onChange={(v) => setIsCosign(v === 'true')}
+          size='small'
+        />
+        {isRemixContest ? (
+          <FilterButton
+            label={messages.contestEntries}
+            value={isContestEntry ? 'true' : undefined}
+            onPress={() => setIsContestEntry((prev) => !prev)}
+            onChange={(v) => setIsContestEntry(v === 'true')}
+            size='small'
+          />
+        ) : null}
+        <FilterButton
+          label='Sort'
+          value={sortMethod}
+          variant='replaceLabel'
+          onChange={handleSortChange}
+          options={SORT_OPTIONS}
+          disableSearch
+          size='small'
+        />
+      </Flex>
     </Flex>
   )