Skip to content

Commit

Permalink
Add explore page recommendations
Browse files Browse the repository at this point in the history
  • Loading branch information
pfrazee committed Dec 18, 2024
1 parent ad2ab91 commit 56f086a
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 1 deletion.
95 changes: 95 additions & 0 deletions src/screens/Search/components/ExploreRecommendations.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import {View} from 'react-native'
import {Trans} from '@lingui/macro'

import {isWeb} from '#/platform/detection'
import {useTrendingSettings} from '#/state/preferences/trending'
import {
DEFAULT_LIMIT as RECOMMENDATIONS_COUNT,
useTrendingTopics,
} from '#/state/queries/trending/useTrendingTopics'
import {useTrendingConfig} from '#/state/trending-config'
import {atoms as a, useGutters, useTheme} from '#/alf'
import {Hashtag_Stroke2_Corner0_Rounded} from '#/components/icons/Hashtag'
import {
TrendingTopic,
TrendingTopicLink,
TrendingTopicSkeleton,
} from '#/components/TrendingTopics'
import {Text} from '#/components/Typography'

export function ExploreRecommendations() {
const {enabled} = useTrendingConfig()
const {trendingDisabled} = useTrendingSettings()
return enabled && !trendingDisabled ? <Inner /> : null
}

function Inner() {
const t = useTheme()
const gutters = useGutters([0, 'compact'])
const {data: trending, error, isLoading} = useTrendingTopics()
const noRecs = !isLoading && !error && !trending?.suggested?.length

return error || noRecs ? null : (
<>
<View
style={[
isWeb
? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
: [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
a.border_b,
t.atoms.border_contrast_low,
]}>
<View style={[a.flex_1, a.gap_sm]}>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Hashtag_Stroke2_Corner0_Rounded
size="lg"
fill={t.palette.primary_500}
style={{marginLeft: -2}}
/>
<Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
<Trans>Recommended</Trans>
</Text>
</View>
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
<Trans>Feeds we think you might like.</Trans>
</Text>
</View>
</View>

<View style={[a.pt_md, a.pb_lg]}>
<View
style={[
a.flex_row,
a.justify_start,
a.flex_wrap,
{rowGap: 8, columnGap: 6},
gutters,
]}>
{isLoading ? (
Array(RECOMMENDATIONS_COUNT)
.fill(0)
.map((_, i) => <TrendingTopicSkeleton key={i} index={i} />)
) : !trending?.suggested ? null : (
<>
{trending.suggested.map(topic => (
<TrendingTopicLink key={topic.link} topic={topic}>
{({hovered}) => (
<TrendingTopic
topic={topic}
style={[
hovered && [
t.atoms.border_contrast_high,
t.atoms.bg_contrast_25,
],
]}
/>
)}
</TrendingTopicLink>
))}
</>
)}
</View>
</View>
</>
)
}
2 changes: 1 addition & 1 deletion src/screens/Search/components/ExploreTrendingTopics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function Inner() {
</View>
</View>
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
<Trans>What people are posting about now</Trans>
<Trans>What people are posting about.</Trans>
</Text>
</View>
</View>
Expand Down
13 changes: 13 additions & 0 deletions src/view/screens/Search/Explore.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
ProfileCardFeedLoadingPlaceholder,
} from '#/view/com/util/LoadingPlaceholder'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {ExploreRecommendations} from '#/screens/Search/components/ExploreRecommendations'
import {ExploreTrendingTopics} from '#/screens/Search/components/ExploreTrendingTopics'
import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
import {Button} from '#/components/Button'
Expand Down Expand Up @@ -244,6 +245,10 @@ type ExploreScreenItems =
type: 'trendingTopics'
key: string
}
| {
type: 'recommendations'
key: string
}
| {
type: 'profile'
key: string
Expand Down Expand Up @@ -337,6 +342,11 @@ export function Explore() {
key: `trending-topics`,
})

i.push({
type: 'recommendations',
key: `recommendations`,
})

i.push({
type: 'header',
key: 'suggested-follows-header',
Expand Down Expand Up @@ -503,6 +513,9 @@ export function Explore() {
case 'trendingTopics': {
return <ExploreTrendingTopics />
}
case 'recommendations': {
return <ExploreRecommendations />
}
case 'profile': {
return (
<View style={[a.border_b, t.atoms.border_contrast_low]}>
Expand Down

0 comments on commit 56f086a

Please sign in to comment.