[Explore] Base (#8053)
* migrate to #/screens * rm unneeded import * block drawer gesture on recent profiles * rm recommendations (#8056) * [Explore] Disable Trending videos (#8054) * remove giant header * disable * [Explore] Dynamic module ordering (#8066) * Dynamic module ordering * [Explore] New headers, metrics (#8067) * new sticky headers * improve spacing between modules * view metric on modules * update metrics names * [Explore] Suggested accounts module (#8072) * use modern profile card, update load more * add tab bar * tabbed suggested accounts * [Explore] Discover feeds module (#8073) * cap number of feeds to 3 * change feed pin button * Apply suggestions from code review Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * restore statsig to log events * filter out followed profiles, make suer enough are loaded (#8090) * [Explore] Trending topics (#8055) * redesigned trending topics * rm borders on web * get post count / age / ranking from api * spacing tweaks * fetch more topics then slice * use api data for avis/category * rm top border * Integrate new SDK, part out components * Clean up * Use status field * Bump SDK * Send up interests and langs --------- Co-authored-by: Eric Bailey <git@esb.lol> * Clean up module spacing and borders (cherry picked from commit 63d19b6c2d67e226e0e14709b1047a1f88b3ce1c) (cherry picked from commit 62d7d394ab1dc31b40b9c2cf59075adbf94737a1) * Switch back border ordering (cherry picked from commit 34e3789f8b410132c1390df3c2bb8257630ebdd9) * [Explore] Starter Packs (#8095) * Temp WIP (cherry picked from commit 43b5d7b1e64b3adb1ed162262d0310e0bf026c18) * New SP card * Load state * Revert change * Cleanup * Interests and caching * Count total * Format * Caching * [Explore] Feed previews module (#8075) * wip new hook * get fetching working, maybe * get feed previews rendering! * fix header height * working pin button * extract out FeedLink * add loader * only make preview:header sticky * Fix headers * Header tweaks * Fix moderation filter * Fix threading --------- Co-authored-by: Eric Bailey <git@esb.lol> * Space it out * Fix query key * Mock new endpoint, filter saved feeds * Make sure we're pinning, lower cache time * add news category * Remove log * Improve suggested accounts load state * Integrate new app view endpoint * fragment * Update src/screens/Search/modules/ExploreTrendingTopics.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update src/screens/Search/modules/ExploreTrendingTopics.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * lint * maybe fix this --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Samuel Newman
@@ -0,0 +1,170 @@
|
||||
import {useMemo} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {type AppBskyFeedDefs, AtUri} from '@atproto/api'
|
||||
|
||||
import {PressableScale} from '#/lib/custom-animations/PressableScale'
|
||||
import {makeCustomFeedLink} from '#/lib/routes/links'
|
||||
import {logger} from '#/logger'
|
||||
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
||||
import {
|
||||
atoms as a,
|
||||
native,
|
||||
useGutters,
|
||||
useTheme,
|
||||
type ViewStyleProp,
|
||||
web,
|
||||
} from '#/alf'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import * as FeedCard from '#/components/FeedCard'
|
||||
import {sizes as iconSizes} from '#/components/icons/common'
|
||||
import {MagnifyingGlass2_Stroke2_Corner0_Rounded as SearchIcon} from '#/components/icons/MagnifyingGlass2'
|
||||
import {Link} from '#/components/Link'
|
||||
import {Text, type TextProps} from '#/components/Typography'
|
||||
|
||||
export function Container({
|
||||
style,
|
||||
children,
|
||||
headerHeight,
|
||||
}: {children: React.ReactNode; headerHeight?: number} & ViewStyleProp) {
|
||||
const t = useTheme()
|
||||
const gutters = useGutters([0, 'base'])
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
gutters,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
a.pt_2xl,
|
||||
a.pb_md,
|
||||
a.gap_sm,
|
||||
t.atoms.bg,
|
||||
headerHeight && web({position: 'sticky', top: headerHeight}),
|
||||
style,
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function FeedLink({
|
||||
feed,
|
||||
children,
|
||||
}: {
|
||||
feed: AppBskyFeedDefs.GeneratorView
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const {host: did, rkey} = useMemo(() => new AtUri(feed.uri), [feed.uri])
|
||||
return (
|
||||
<Link
|
||||
to={makeCustomFeedLink(did, rkey)}
|
||||
label={feed.displayName}
|
||||
style={[a.flex_1]}>
|
||||
{({focused, hovered, pressed}) => (
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.flex_row,
|
||||
a.align_center,
|
||||
{gap: 10},
|
||||
a.rounded_md,
|
||||
a.p_xs,
|
||||
{marginLeft: -6},
|
||||
(focused || hovered || pressed) && t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
{children}
|
||||
</View>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export function FeedAvatar({feed}: {feed: AppBskyFeedDefs.GeneratorView}) {
|
||||
return <UserAvatar type="algo" size={38} avatar={feed.avatar} />
|
||||
}
|
||||
|
||||
export function Icon({
|
||||
icon: Comp,
|
||||
size = 'lg',
|
||||
}: Pick<React.ComponentProps<typeof ButtonIcon>, 'icon' | 'size'>) {
|
||||
const iconSize = iconSizes[size]
|
||||
|
||||
return (
|
||||
<View style={[a.z_20, {width: iconSize, height: iconSize, marginLeft: -2}]}>
|
||||
<Comp width={iconSize} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function TitleText({style, ...props}: TextProps) {
|
||||
return (
|
||||
<Text style={[a.font_bold, a.flex_1, a.text_xl, style]} emoji {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export function SubtitleText({style, ...props}: TextProps) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<Text
|
||||
style={[
|
||||
t.atoms.text_contrast_medium,
|
||||
a.leading_tight,
|
||||
a.flex_1,
|
||||
a.text_sm,
|
||||
style,
|
||||
]}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function SearchButton({
|
||||
label,
|
||||
metricsTag,
|
||||
onPress,
|
||||
}: {
|
||||
label: string
|
||||
metricsTag: 'suggestedAccounts' | 'suggestedFeeds'
|
||||
onPress?: () => void
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
label={label}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="round"
|
||||
PressableComponent={native(PressableScale)}
|
||||
onPress={() => {
|
||||
logger.metric(
|
||||
'explore:module:searchButtonPress',
|
||||
{module: metricsTag},
|
||||
{statsig: true},
|
||||
)
|
||||
onPress?.()
|
||||
}}
|
||||
style={[
|
||||
{
|
||||
right: -4,
|
||||
},
|
||||
]}>
|
||||
<ButtonIcon icon={SearchIcon} size="lg" />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function PinButton({feed}: {feed: AppBskyFeedDefs.GeneratorView}) {
|
||||
return (
|
||||
<View style={[a.z_20, {marginRight: -6}]}>
|
||||
<FeedCard.SaveButton
|
||||
pin
|
||||
view={feed}
|
||||
size="large"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
shape="square"
|
||||
text={false}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user