Merge pull request #8876 from internet-development/caidanw/app-1399-trending-videos-icon-missing

[APP-1399] trending videos icon missing

src/components/interstitials/TrendingVideos.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useCallback, useEffect, useMemo} from 'react'
 import {ScrollView, View} from 'react-native'
 import {AppBskyEmbedVideo, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -55,7 +55,7 @@ export function TrendingVideos() {
   const {setTrendingVideoDisabled} = useTrendingSettingsApi()
   const trendingPrompt = Prompt.usePromptControl()
 
-  const onConfirmHide = React.useCallback(() => {
+  const onConfirmHide = useCallback(() => {
     setTrendingVideoDisabled(true)
     logEvent('trendingVideos:hide', {context: 'interstitial:discover'})
   }, [setTrendingVideoDisabled])
@@ -147,9 +147,7 @@ function VideoCards({
 }: {
   data: Exclude<ReturnType<typeof usePostFeedQuery>['data'], undefined>
 }) {
-  const t = useTheme()
+  const items = useMemo(() => {
-  const {_} = useLingui()
-  const items = React.useMemo(() => {
     return data.pages
       .flatMap(page => page.slices)
       .map(slice => slice.items[0])
@@ -157,10 +155,6 @@ function VideoCards({
       .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
       .slice(0, 8)
   }, [data])
-  const href = React.useMemo(() => {
-    const urip = new AtUri(VIDEO_FEED_URI)
-    return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
-  }, [])
 
   return (
     <>
@@ -183,6 +177,21 @@ function VideoCards({
         </View>
       ))}
 
+      <ViewMoreCard />
+    </>
+  )
+}
+
+function ViewMoreCard() {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const href = useMemo(() => {
+    const urip = new AtUri(VIDEO_FEED_URI)
+    return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
+  }, [])
+
+  return (
     <View style={[{width: CARD_WIDTH * 2}]}>
       <Link
         to={href}
@@ -210,23 +219,16 @@ function VideoCards({
             <Text style={[a.text_md]}>
               <Trans>View more</Trans>
             </Text>
-              <View
+            <Button
-                style={[
+              color="primary"
-                  a.align_center,
+              size="small"
-                  a.justify_center,
+              shape="round"
-                  a.rounded_full,
+              label={_(msg`View more trending videos`)}>
-                  {
-                    width: 34,
-                    height: 34,
-                    backgroundColor: t.palette.primary_500,
-                  },
-                ]}>
               <ButtonIcon icon={ChevronRight} />
-              </View>
+            </Button>
           </View>
         )}
       </Link>
     </View>
-    </>
   )
 }