Skip to content

Commit 7702d8a

Browse files
DIYgodDIYgod
committed
feat(mobile): discoverLanguage ui setting
1 parent ebfdda7 commit 7702d8a

File tree

5 files changed

+149
-125
lines changed

5 files changed

+149
-125
lines changed

‎apps/mobile/src/atoms/settings/ui.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { defaultUISettings } from "@follow/shared/src/settings/defaults"
22
import type { UISettings } from "@follow/shared/src/settings/interface"
33

4+
import { getDeviceLanguage } from "@/src/lib/i18n"
5+
46
import { createSettingAtom } from "./internal/helper"
57

6-
export const createDefaultSettings = (): UISettings => defaultUISettings
8+
export const createDefaultSettings = (): UISettings => ({
9+
...defaultUISettings,
10+
discoverLanguage: getDeviceLanguage().startsWith("zh") ? "all" : "eng",
11+
})
712

813
export const {
914
useSettingKey: useUISettingKey,

‎apps/mobile/src/modules/discover/Category.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import type { RSSHubCategory } from "@follow/constants"
2+
import { CategoryMap, RSSHubCategories } from "@follow/constants"
3+
import { LinearGradient } from "expo-linear-gradient"
4+
import { memo } from "react"
5+
import { useTranslation } from "react-i18next"
6+
import { Pressable, StyleSheet, Text, View } from "react-native"
7+
8+
import { Grid } from "@/src/components/ui/grid"
9+
import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
10+
import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
11+
import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re"
12+
import { useNavigation } from "@/src/lib/navigation/hooks"
13+
import { Recommendations } from "@/src/modules/discover/Recommendations"
14+
import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendation/RecommendationCategoryScreen"
15+
16+
export const Category = () => {
17+
return (
18+
<>
19+
<View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
20+
<View className="flex-row items-center gap-2">
21+
<Grid2CuteReIcon width={24} height={24} />
22+
<Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
23+
</View>
24+
<ItemPressable className="rounded-lg p-1">
25+
<FilterCuteReIcon width={20} height={20} />
26+
</ItemPressable>
27+
</View>
28+
29+
<Grid columns={2} gap={12} className="p-4">
30+
{RSSHubCategories.map((category) => (
31+
<CategoryItem key={category} category={category} />
32+
))}
33+
</Grid>
34+
</>
35+
)
36+
}
37+
38+
const CategoryItem = memo(({ category }: { category: RSSHubCategory }) => {
39+
const { t } = useTranslation("common")
40+
const name = t(`discover.category.${category}`)
41+
const navigation = useNavigation()
42+
43+
return (
44+
<Pressable
45+
className="overflow-hidden rounded-2xl"
46+
key={category}
47+
onPress={() => {
48+
if (category === "all") {
49+
navigation.pushControllerView(Recommendations)
50+
} else {
51+
navigation.pushControllerView(RecommendationCategoryScreen, {
52+
category,
53+
})
54+
}
55+
}}
56+
>
57+
<LinearGradient
58+
colors={[`${CategoryMap[category].color}80`, CategoryMap[category].color]}
59+
start={{ x: 0, y: 0 }}
60+
end={{ x: 0, y: 1 }}
61+
className="rounded-2xl p-4"
62+
style={styles.cardItem}
63+
>
64+
<View className="flex-1">
65+
<Text className="absolute right-2 top-2 text-4xl">{CategoryMap[category].emoji}</Text>
66+
<Text className="absolute bottom-0 left-2 text-xl font-bold text-white">{name}</Text>
67+
</View>
68+
</LinearGradient>
69+
</Pressable>
70+
)
71+
})
72+
73+
const styles = StyleSheet.create({
74+
cardItem: {
75+
aspectRatio: 16 / 9,
76+
},
77+
})

‎apps/mobile/src/modules/discover/DiscoverContent.tsx

Lines changed: 4 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,13 @@
1-
import type { RSSHubCategory } from "@follow/constants"
2-
import { CategoryMap, RSSHubCategories } from "@follow/constants"
3-
import { LinearGradient } from "expo-linear-gradient"
4-
import { memo } from "react"
5-
import { useTranslation } from "react-i18next"
6-
import { Pressable, StyleSheet, Text, View } from "react-native"
1+
import { View } from "react-native"
72

8-
import { Grid } from "@/src/components/ui/grid"
9-
// import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
10-
// import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
11-
import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re"
12-
import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re"
13-
import { useNavigation } from "@/src/lib/navigation/hooks"
14-
import { Recommendations } from "@/src/modules/discover/Recommendations"
3+
import { Category } from "@/src/modules/discover/Category"
154
import { Trending } from "@/src/modules/discover/Trending"
16-
import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendation/RecommendationCategoryScreen"
175

186
export function DiscoverContent() {
197
return (
208
<View>
21-
<View className="flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
22-
<View className="flex-row items-center gap-2">
23-
<TrendingUpCuteReIcon width={24} height={24} />
24-
<Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
25-
</View>
26-
{/* <ItemPressable className="rounded-lg p-1">
27-
<FilterCuteReIcon width={20} height={20} />
28-
</ItemPressable> */}
29-
</View>
30-
31-
<Trending className="mt-4" itemClassName="px-6" />
32-
33-
<View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
34-
<View className="flex-row items-center gap-2">
35-
<Grid2CuteReIcon width={24} height={24} />
36-
<Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
37-
</View>
38-
{/* <ItemPressable className="rounded-lg p-1">
39-
<FilterCuteReIcon width={20} height={20} />
40-
</ItemPressable> */}
41-
</View>
42-
43-
<DiscoverGrid />
9+
<Trending itemClassName="px-6" />
10+
<Category />
4411
</View>
4512
)
4613
}
47-
48-
const DiscoverGrid = () => {
49-
return (
50-
<Grid columns={2} gap={12} className="p-4">
51-
{RSSHubCategories.map((category) => (
52-
<CategoryItem key={category} category={category} />
53-
))}
54-
</Grid>
55-
)
56-
}
57-
58-
const CategoryItem = memo(({ category }: { category: RSSHubCategory }) => {
59-
const { t } = useTranslation("common")
60-
const name = t(`discover.category.${category}`)
61-
const navigation = useNavigation()
62-
63-
return (
64-
<Pressable
65-
className="overflow-hidden rounded-2xl"
66-
key={category}
67-
onPress={() => {
68-
if (category === "all") {
69-
navigation.pushControllerView(Recommendations)
70-
} else {
71-
navigation.pushControllerView(RecommendationCategoryScreen, {
72-
category,
73-
})
74-
}
75-
}}
76-
>
77-
<LinearGradient
78-
colors={[`${CategoryMap[category].color}80`, CategoryMap[category].color]}
79-
start={{ x: 0, y: 0 }}
80-
end={{ x: 0, y: 1 }}
81-
className="rounded-2xl p-4"
82-
style={styles.cardItem}
83-
>
84-
<View className="flex-1">
85-
<Text className="absolute right-2 top-2 text-4xl">{CategoryMap[category].emoji}</Text>
86-
<Text className="absolute bottom-0 left-2 text-xl font-bold text-white">{name}</Text>
87-
</View>
88-
</LinearGradient>
89-
</Pressable>
90-
)
91-
})
92-
93-
const styles = StyleSheet.create({
94-
cardItem: {
95-
aspectRatio: 16 / 9,
96-
},
97-
})

‎apps/mobile/src/modules/discover/Recommendations.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import type { SharedValue } from "react-native-reanimated"
2222
import { useSharedValue } from "react-native-reanimated"
2323
import { useSafeAreaInsets } from "react-native-safe-area-context"
2424

25+
import { useUISettingKey } from "@/src/atoms/settings/ui"
2526
import { AnimatedScrollView } from "@/src/components/common/AnimatedComponents"
2627
import { BlurEffect } from "@/src/components/common/BlurEffect"
2728
import { UINavigationHeaderActionButton } from "@/src/components/layouts/header/NavigationHeader"
@@ -117,6 +118,12 @@ export const Recommendations = () => {
117118
)
118119
}
119120

121+
const LanguageMap = {
122+
all: "all",
123+
eng: "en",
124+
cmn: "zh-CN",
125+
} as const
126+
120127
export const RecommendationTab: TabComponent<{
121128
contentContainerStyle?: ContentStyle
122129
insets?: { top?: number; bottom?: number }
@@ -129,9 +136,12 @@ export const RecommendationTab: TabComponent<{
129136
insets: customInsets,
130137
...rest
131138
}) => {
139+
const discoverLanguage = useUISettingKey("discoverLanguage")
140+
132141
const { data, isLoading } = useQuery({
133142
queryKey: ["rsshub-popular", "cache", tab.value],
134-
queryFn: () => fetchRsshubPopular(tab.value, "all").then((res) => res.data),
143+
queryFn: () =>
144+
fetchRsshubPopular(tab.value, LanguageMap[discoverLanguage]).then((res) => res.data),
135145
})
136146
const keys = useMemo(() => {
137147
if (!data) {

‎apps/mobile/src/modules/discover/Trending.tsx

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { cn } from "@follow/utils"
22
import { useQuery } from "@tanstack/react-query"
3-
import { useTranslation } from "react-i18next"
43
import { Text, View } from "react-native"
54

5+
import { useUISettingKey } from "@/src/atoms/settings/ui"
66
import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
7+
import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
8+
import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
9+
import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
10+
import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re"
711

812
import { fetchFeedTrending } from "./api"
913
import { FeedSummary } from "./FeedSummary"
@@ -15,51 +19,63 @@ export const Trending = ({
1519
className?: string
1620
itemClassName?: string
1721
}) => {
18-
const { i18n } = useTranslation()
22+
const discoverLanguage = useUISettingKey("discoverLanguage")
1923
const { data, isLoading } = useQuery({
2024
queryKey: ["trending", "feeds"],
2125
queryFn: () =>
2226
fetchFeedTrending({
23-
lang: i18n.language.startsWith("zh") ? undefined : "eng",
27+
lang: discoverLanguage === "all" ? undefined : discoverLanguage,
2428
limit: 20,
2529
}).then((res) => res.data),
2630
})
2731

2832
return (
2933
<View className={className}>
30-
{isLoading ? (
31-
<View className="mt-5 flex h-12 items-center justify-center">
32-
<PlatformActivityIndicator />
34+
<View className={cn("flex-row items-center justify-between pb-1 pt-4", itemClassName)}>
35+
<View className="flex-row items-center gap-2">
36+
<TrendingUpCuteReIcon width={24} height={24} />
37+
<Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
3338
</View>
34-
) : (
35-
data?.map((item, index) => (
36-
<FeedSummary
37-
key={item.feed?.id}
38-
item={item}
39-
className={cn("flex flex-1 flex-row items-center bg-none py-3", itemClassName)}
40-
simple
41-
preChildren={
42-
<View
43-
className={cn(
44-
"mr-4 flex size-6 items-center justify-center rounded-full",
45-
index < 3
46-
? cn(
47-
"bg-accent text-white",
48-
index === 0 && "bg-accent",
49-
index === 1 && "bg-accent/90",
50-
index === 2 && "bg-accent/80",
51-
)
52-
: "bg-gray-5/60",
53-
)}
54-
>
55-
<Text className={cn("text-xs font-medium", index < 3 && "text-white")}>
56-
{index + 1}
57-
</Text>
58-
</View>
59-
}
60-
/>
61-
))
62-
)}
39+
<ItemPressable className="rounded-lg p-1" itemStyle={ItemPressableStyle.UnStyled}>
40+
<FilterCuteReIcon width={20} height={20} />
41+
</ItemPressable>
42+
</View>
43+
44+
<View className="mt-4">
45+
{isLoading ? (
46+
<View className="mt-5 flex h-12 items-center justify-center">
47+
<PlatformActivityIndicator />
48+
</View>
49+
) : (
50+
data?.map((item, index) => (
51+
<FeedSummary
52+
key={item.feed?.id}
53+
item={item}
54+
className={cn("flex flex-1 flex-row items-center bg-none py-3", itemClassName)}
55+
simple
56+
preChildren={
57+
<View
58+
className={cn(
59+
"mr-4 flex size-6 items-center justify-center rounded-full",
60+
index < 3
61+
? cn(
62+
"bg-accent text-white",
63+
index === 0 && "bg-accent",
64+
index === 1 && "bg-accent/90",
65+
index === 2 && "bg-accent/80",
66+
)
67+
: "bg-gray-5/60",
68+
)}
69+
>
70+
<Text className={cn("text-xs font-medium", index < 3 && "text-white")}>
71+
{index + 1}
72+
</Text>
73+
</View>
74+
}
75+
/>
76+
))
77+
)}
78+
</View>
6379
</View>
6480
)
6581
}

0 commit comments

Comments
 (0)