feat(mobile): replace good luck with trending feed

DIYgod · DIYgod · commit fc7b37d14cd7 · 2025-05-15T17:57:15.000+08:00
diff --git a/apps/mobile/src/modules/discover/DiscoverContent.tsx b/apps/mobile/src/modules/discover/DiscoverContent.tsx
@@ -7,18 +7,18 @@ import { Pressable, StyleSheet, Text, View } from "react-native"
 
 import { Grid } from "@/src/components/ui/grid"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { GoodLuck } from "@/src/modules/discover/GoodLuck"
 import { Recommendations } from "@/src/modules/discover/Recommendations"
+import { Trending } from "@/src/modules/discover/Trending"
 import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendation/RecommendationCategoryScreen"
 
 export function DiscoverContent() {
   return (
     <View>
       <View className="flex-row items-center gap-1 px-6 pb-1 pt-4">
-        <Text className="text-label text-2xl font-bold leading-[1.1]">Good Luck</Text>
+        <Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
       </View>
 
-      <GoodLuck />
+      <Trending />
 
       <View className="mt-4 flex-row items-center gap-1 px-6 pb-1 pt-4">
         <Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
diff --git a/apps/mobile/src/modules/discover/FeedSummary.tsx b/apps/mobile/src/modules/discover/FeedSummary.tsx
@@ -19,10 +19,12 @@ export const FeedSummary = ({
   item,
   children,
   className,
+  simple,
 }: {
   item: SearchResultItem
   children?: React.ReactNode
   className?: string
+  simple?: boolean
 }) => {
   const navigation = useNavigation()
 
@@ -75,22 +77,24 @@ export const FeedSummary = ({
           <Text className="text-text text-sm leading-tight opacity-60">{item.feed?.url}</Text>
         </View>
       </View>
-      {!!item.feed?.description && (
+      {!simple && !!item.feed?.description && (
         <Text className="mt-3 pl-[39] pr-2 text-sm" ellipsizeMode="tail" numberOfLines={2}>
           {item.feed?.description}
         </Text>
       )}
-
-      {/* Preview */}
-      <View className="mt-4">
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerClassName="flex flex-row gap-4"
-        >
-          {item.entries?.map((entry) => <PreviewItem entry={entry} key={entry.id || entry.guid} />)}
-        </ScrollView>
-      </View>
+      {!simple && !!item.entries && (
+        <View className="mt-4">
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerClassName="flex flex-row gap-4"
+          >
+            {item.entries?.map((entry) => (
+              <PreviewItem entry={entry} key={entry.id || entry.guid} />
+            ))}
+          </ScrollView>
+        </View>
+      )}
       {children}
     </ItemPressable>
   )
diff --git a/apps/mobile/src/modules/discover/GoodLuck.tsx b/apps/mobile/src/modules/discover/GoodLuck.tsx
diff --git a/apps/mobile/src/modules/discover/Trending.tsx b/apps/mobile/src/modules/discover/Trending.tsx
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query"
+import { View } from "react-native"
+
+import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
+
+import { fetchFeedTrending } from "./api"
+import { TrendingFeedCard } from "./TrendingFeedCard"
+
+export const Trending = () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ["trending", "feeds"],
+    queryFn: () =>
+      fetchFeedTrending({
+        limit: 20,
+      }).then((res) => res.data),
+  })
+
+  return (
+    <View className="mt-4">
+      {isLoading ? (
+        <View className="mt-5 flex h-12 items-center justify-center">
+          <PlatformActivityIndicator />
+        </View>
+      ) : (
+        data?.map((item) => <TrendingFeedCard key={item.feed?.id} item={item} />)
+      )}
+    </View>
+  )
+}
diff --git a/apps/mobile/src/modules/discover/TrendingFeedCard.tsx b/apps/mobile/src/modules/discover/TrendingFeedCard.tsx
@@ -0,0 +1,37 @@
+import { Text, View } from "react-native"
+
+import { User3CuteReIcon } from "@/src/icons/user_3_cute_re"
+import type { apiClient } from "@/src/lib/api-fetch"
+import { useSubscriptionByFeedId } from "@/src/store/subscription/hooks"
+import { useColor } from "@/src/theme/colors"
+
+import { FeedSummary } from "./FeedSummary"
+
+type SearchResultItem = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"][number]
+
+export const TrendingFeedCard = ({ item }: { item: SearchResultItem }) => {
+  const isSubscribed = useSubscriptionByFeedId(item.feed?.id ?? "")
+  const iconColor = useColor("text")
+
+  return (
+    <FeedSummary item={item} className="px-4 py-3" simple>
+      <View className="flex-row items-center justify-between pl-[39]">
+        <View className="flex-row items-center gap-1.5 opacity-60">
+          <User3CuteReIcon width={14} height={14} color={iconColor} />
+          <Text className="text-text text-sm">{item.analytics?.subscriptionCount} followers</Text>
+        </View>
+        <View>
+          {isSubscribed ? (
+            <View className="rounded-lg px-3 py-2">
+              <Text className="text-gray-2 text-sm font-bold">Followed</Text>
+            </View>
+          ) : (
+            <View className="rounded-lg px-3 py-2">
+              <Text className="text-accent text-sm font-bold">Follow</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </FeedSummary>
+  )
+}
diff --git a/apps/mobile/src/modules/discover/api.ts b/apps/mobile/src/modules/discover/api.ts
@@ -11,3 +11,21 @@ export const fetchRsshubPopular = (category: DiscoverCategories, lang: Language)
     },
   })
 }
+
+export const fetchFeedTrending = ({
+  lang,
+  view,
+  limit,
+}: {
+  lang?: "eng" | "cmn"
+  view?: number
+  limit: number
+}) => {
+  return apiClient.trending.feeds.$get({
+    query: {
+      language: lang,
+      view,
+      limit,
+    },
+  })
+}
diff --git a/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx b/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx
@@ -17,52 +17,46 @@ export const SearchFeedCard = ({ item }: { item: SearchResultItem }) => {
   const iconColor = useColor("text")
 
   return (
-    <View>
-      <FeedSummary item={item} className="py-8 pl-4">
-        <>
-          <View className="mt-4 flex-row items-center gap-6 opacity-60">
-            <View className="flex-row items-center gap-1.5">
-              <User3CuteReIcon width={14} height={14} color={iconColor} />
-              <Text className="text-text text-sm">
-                {item.analytics?.subscriptionCount} followers
-              </Text>
-            </View>
-            <View className="flex-row items-center gap-1.5">
-              {item.analytics?.updatesPerWeek ? (
-                <>
-                  <SafetyCertificateCuteReIcon width={14} height={14} color={iconColor} />
-                  <Text className="text-text text-sm">
-                    {item.analytics.updatesPerWeek} entries/week
-                  </Text>
-                </>
-              ) : item.analytics?.latestEntryPublishedAt ? (
-                <>
-                  <SafeAlertCuteReIcon width={14} height={14} color={iconColor} />
-                  <Text className="text-text text-sm">Updated</Text>
-                  <RelativeDateTime
-                    className="text-text text-sm"
-                    date={new Date(item.analytics.latestEntryPublishedAt)}
-                  />
-                </>
-              ) : null}
-            </View>
+    <FeedSummary item={item} className="py-8 pl-4">
+      <>
+        <View className="mt-4 flex-row items-center gap-6 opacity-60">
+          <View className="flex-row items-center gap-1.5">
+            <User3CuteReIcon width={14} height={14} color={iconColor} />
+            <Text className="text-text text-sm">{item.analytics?.subscriptionCount} followers</Text>
+          </View>
+          <View className="flex-row items-center gap-1.5">
+            {item.analytics?.updatesPerWeek ? (
+              <>
+                <SafetyCertificateCuteReIcon width={14} height={14} color={iconColor} />
+                <Text className="text-text text-sm">
+                  {item.analytics.updatesPerWeek} entries/week
+                </Text>
+              </>
+            ) : item.analytics?.latestEntryPublishedAt ? (
+              <>
+                <SafeAlertCuteReIcon width={14} height={14} color={iconColor} />
+                <Text className="text-text text-sm">Updated</Text>
+                <RelativeDateTime
+                  className="text-text text-sm"
+                  date={new Date(item.analytics.latestEntryPublishedAt)}
+                />
+              </>
+            ) : null}
           </View>
-          {/* Subscribe */}
+        </View>
+        {/* Subscribe */}
+        <View className="ml-auto mr-4 mt-1">
           {isSubscribed ? (
-            <View className="ml-auto mr-4 mt-1">
-              <View className="bg-gray-5/60 rounded-lg px-3 py-2">
-                <Text className="text-gray-2 text-sm font-bold">Followed</Text>
-              </View>
+            <View className="bg-gray-5/60 rounded-lg px-3 py-2">
+              <Text className="text-gray-2 text-sm font-bold">Followed</Text>
             </View>
           ) : (
-            <View className="ml-auto mr-4 mt-1">
-              <View className="bg-accent rounded-lg px-3 py-2">
-                <Text className="text-sm font-bold text-white">Follow</Text>
-              </View>
+            <View className="bg-accent rounded-lg px-3 py-2">
+              <Text className="text-sm font-bold text-white">Follow</Text>
             </View>
           )}
-        </>
-      </FeedSummary>
-    </View>
+        </View>
+      </>
+    </FeedSummary>
   )
 }
