From ad9b47eeedf6311e6445f87f553c802ec097f86d Mon Sep 17 00:00:00 2001 From: DIYgod Date: Fri, 16 May 2025 13:18:51 +0800 Subject: [PATCH] feat(mobile): trending language, add trending into onboarding --- .../src/components/common/NoLoginInfo.tsx | 6 +- apps/mobile/src/lib/dialog.tsx | 4 +- .../src/modules/discover/DiscoverContent.tsx | 14 +-- .../src/modules/discover/FeedSummary.tsx | 5 +- apps/mobile/src/modules/discover/Trending.tsx | 52 +++++---- .../src/modules/onboarding/step-interests.tsx | 104 +----------------- .../modules/onboarding/step-preferences.tsx | 34 +++--- 7 files changed, 67 insertions(+), 152 deletions(-) diff --git a/apps/mobile/src/components/common/NoLoginInfo.tsx b/apps/mobile/src/components/common/NoLoginInfo.tsx index 9f4400f78..4c1ec70d8 100644 --- a/apps/mobile/src/components/common/NoLoginInfo.tsx +++ b/apps/mobile/src/components/common/NoLoginInfo.tsx @@ -1,19 +1,17 @@ import { Pressable, Text } from "react-native" -import { useColor } from "react-native-uikit-colors" import { destination } from "@/src/lib/navigation/biz/Destination" +import { accentColor } from "@/src/theme/colors" import { Logo } from "../ui/logo" export function NoLoginInfo({ target }: { target: "timeline" | "subscriptions" }) { - const color = useColor("secondaryLabel") - return ( destination.Login()} > - + {`Sign in to see your ${target}`} ) diff --git a/apps/mobile/src/lib/dialog.tsx b/apps/mobile/src/lib/dialog.tsx index ffa485c03..8c3ed94be 100644 --- a/apps/mobile/src/lib/dialog.tsx +++ b/apps/mobile/src/lib/dialog.tsx @@ -50,7 +50,7 @@ interface ShowDialogOptions { } } -const entering = SlideInUp.springify().damping(16.5).stiffness(100) +const entering = SlideInUp.duration(200) const exiting = SlideOutUp.duration(200) type DialogContextType = { @@ -200,7 +200,7 @@ class DialogStatic { diff --git a/apps/mobile/src/modules/discover/DiscoverContent.tsx b/apps/mobile/src/modules/discover/DiscoverContent.tsx index 11db26327..b9d227bae 100644 --- a/apps/mobile/src/modules/discover/DiscoverContent.tsx +++ b/apps/mobile/src/modules/discover/DiscoverContent.tsx @@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next" import { Pressable, StyleSheet, Text, View } from "react-native" import { Grid } from "@/src/components/ui/grid" -import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable" -import { FilterCuteReIcon } from "@/src/icons/filter_cute_re" +// import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable" +// import { FilterCuteReIcon } from "@/src/icons/filter_cute_re" import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re" import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re" import { useNavigation } from "@/src/lib/navigation/hooks" @@ -23,21 +23,21 @@ export function DiscoverContent() { Trending - + {/* - + */} - + Categories - + {/* - + */} diff --git a/apps/mobile/src/modules/discover/FeedSummary.tsx b/apps/mobile/src/modules/discover/FeedSummary.tsx index 3e98b363f..19435be16 100644 --- a/apps/mobile/src/modules/discover/FeedSummary.tsx +++ b/apps/mobile/src/modules/discover/FeedSummary.tsx @@ -18,11 +18,13 @@ type SearchResultItem = Awaited>["da export const FeedSummary = ({ item, children, + preChildren, className, simple, }: { item: SearchResultItem children?: React.ReactNode + preChildren?: React.ReactNode className?: string simple?: boolean }) => { @@ -30,7 +32,7 @@ export const FeedSummary = ({ return ( { if (item.feed?.id) { navigation.presentControllerView(FollowScreen, { @@ -46,6 +48,7 @@ export const FeedSummary = ({ }} className={className} > + {preChildren} {/* Headline */} diff --git a/apps/mobile/src/modules/discover/Trending.tsx b/apps/mobile/src/modules/discover/Trending.tsx index cc7701585..8f3968e55 100644 --- a/apps/mobile/src/modules/discover/Trending.tsx +++ b/apps/mobile/src/modules/discover/Trending.tsx @@ -1,5 +1,6 @@ import { cn } from "@follow/utils" import { useQuery } from "@tanstack/react-query" +import { useTranslation } from "react-i18next" import { Text, View } from "react-native" import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator" @@ -7,43 +8,50 @@ import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformA import { fetchFeedTrending } from "./api" import { FeedSummary } from "./FeedSummary" -export const Trending = () => { +export const Trending = ({ className }: { className?: string }) => { + const { i18n } = useTranslation() const { data, isLoading } = useQuery({ queryKey: ["trending", "feeds"], queryFn: () => fetchFeedTrending({ + lang: i18n.language.startsWith("zh") ? undefined : "eng", limit: 20, }).then((res) => res.data), }) return ( - + {isLoading ? ( ) : ( data?.map((item, index) => ( - - - - {index + 1} - - - - + + + {index + 1} + + + } + /> )) )} diff --git a/apps/mobile/src/modules/onboarding/step-interests.tsx b/apps/mobile/src/modules/onboarding/step-interests.tsx index df31ea226..4088b3fc7 100644 --- a/apps/mobile/src/modules/onboarding/step-interests.tsx +++ b/apps/mobile/src/modules/onboarding/step-interests.tsx @@ -1,35 +1,18 @@ -import { cn } from "@follow/utils" -import { useCallback, useState } from "react" import { useTranslation } from "react-i18next" -import { Text, TouchableOpacity, View } from "react-native" -import Animated, { FadeIn, FadeOut } from "react-native-reanimated" +import { Text, View } from "react-native" import { Search3CuteReIcon } from "@/src/icons/search_3_cute_re" -import { Shuffle2CuteReIcon } from "@/src/icons/shuffle_2_cute_re" -import { useSubscription } from "@/src/store/subscription/hooks" -import { subscriptionSyncService } from "@/src/store/subscription/store" import { accentColor } from "@/src/theme/colors" -import type { PresetFeedConfig } from "./preset" -import { getPresetFeeds } from "./preset" +import { Trending } from "../discover/Trending" import { OnboardingSectionScreenContainer } from "./shared" export const StepInterests = () => { - const { t, i18n } = useTranslation() - const isEnglishUser = i18n.language === "en" - const [displayFeeds, setDisplayFeeds] = useState( - getPresetFeeds(isEnglishUser).slice(0, 7), - ) - - const shuffleFeeds = useCallback(() => { - const presetFeeds = getPresetFeeds(isEnglishUser) - const shuffled = [...presetFeeds].sort(() => Math.random() - 0.5).slice(0, 7) - setDisplayFeeds(shuffled) - }, [isEnglishUser]) + const { t } = useTranslation() return ( - + {t("onboarding.interests_title")} @@ -37,84 +20,7 @@ export const StepInterests = () => { - - - {t("onboarding.suggestions_feed")} - - - {t("onboarding.shuffle")} - - - - - {displayFeeds.map((feed) => ( - - ))} - - + ) } - -const FeedChip = ({ feed }: { feed: PresetFeedConfig }) => { - const subscription = useSubscription(feed.feedId) - const [loading, setLoading] = useState(false) - const [isSubscribed, setIsSubscribed] = useState(!!subscription) - - const handleSubscribe = useCallback( - async (feed: PresetFeedConfig) => { - if (loading) return - setLoading(true) - if (isSubscribed) { - try { - setIsSubscribed(false) - await subscriptionSyncService.unsubscribe(feed.feedId) - } catch { - setIsSubscribed(true) - } finally { - setLoading(false) - } - return - } - try { - setIsSubscribed(true) - await subscriptionSyncService.subscribe({ - feedId: feed.feedId, - title: feed.title, - url: feed.url, - view: feed.view, - category: "", - isPrivate: false, - }) - } catch { - setIsSubscribed(false) - } finally { - setLoading(false) - } - }, - [isSubscribed, loading], - ) - - return ( - - handleSubscribe(feed)} - className={cn( - "flex rounded-full px-4 py-2", - isSubscribed ? "bg-accent" : "bg-secondary-system-fill", - )} - > - - {feed.title} - - - - ) -} diff --git a/apps/mobile/src/modules/onboarding/step-preferences.tsx b/apps/mobile/src/modules/onboarding/step-preferences.tsx index eba5537ef..7a5d19621 100644 --- a/apps/mobile/src/modules/onboarding/step-preferences.tsx +++ b/apps/mobile/src/modules/onboarding/step-preferences.tsx @@ -59,6 +59,23 @@ export const StepPreferences = () => { + {/* Import Card */} + + + + } + onPress={importOpml} + > + + + {t("onboarding.import_description")} + + + + { )} - - {/* Import Card */} - - - - } - onPress={importOpml} - > - - - {t("onboarding.import_description")} - - - )