Explore fixes (#4540)

* Use safe check, check for next page, handle varied lengths

* Fix border width

* Move safe check

* Add font_heavy and use it on the explore page headers

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
zio/stable
Eric Bailey 2024-06-18 13:37:14 -05:00 committed by GitHub
parent 1106517481
commit 35e54e24a0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 12 deletions

View File

@ -267,6 +267,9 @@ export const atoms = {
font_bold: {
fontWeight: tokens.fontWeight.bold,
},
font_heavy: {
fontWeight: tokens.fontWeight.heavy,
},
italic: {
fontStyle: 'italic',
},

View File

@ -118,6 +118,7 @@ export const fontWeight = {
normal: '400',
semibold: '500',
bold: '600',
heavy: '700',
} as const
export const gradients = {

View File

@ -64,7 +64,7 @@ function SuggestedItemsHeader({
fill={t.palette.primary_500}
style={{marginLeft: -2}}
/>
<Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>{title}</Text>
<Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>{title}</Text>
</View>
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
{description}
@ -119,6 +119,9 @@ function LoadMore({
})
.filter(Boolean) as LoadMoreItems[]
}, [item.items, moderationOpts])
if (items.length === 0) return null
const type = items[0].type
return (
@ -142,20 +145,20 @@ function LoadMore({
a.relative,
{
height: 32,
width: 32 + 15 * 3,
width: 32 + 15 * items.length,
},
]}>
<View
style={[
a.align_center,
a.justify_center,
a.border,
t.atoms.bg_contrast_25,
a.absolute,
{
width: 30,
height: 30,
left: 0,
borderWidth: 1,
backgroundColor: t.palette.primary_500,
borderColor: t.atoms.bg.backgroundColor,
borderRadius: type === 'profile' ? 999 : 4,
@ -169,13 +172,13 @@ function LoadMore({
<View
key={_item.key}
style={[
a.border,
t.atoms.bg_contrast_25,
a.absolute,
{
width: 30,
height: 30,
left: (i + 1) * 15,
borderWidth: 1,
borderColor: t.atoms.bg.backgroundColor,
borderRadius: _item.type === 'profile' ? 999 : 4,
zIndex: 3 - i,
@ -350,13 +353,15 @@ export function Explore() {
}
}
i.push({
type: 'loadMore',
key: 'loadMoreProfiles',
isLoadingMore: isLoadingMoreProfiles,
onLoadMore: onLoadMoreProfiles,
items: i.filter(item => item.type === 'profile').slice(-3),
})
if (hasNextProfilesPage) {
i.push({
type: 'loadMore',
key: 'loadMoreProfiles',
isLoadingMore: isLoadingMoreProfiles,
onLoadMore: onLoadMoreProfiles,
items: i.filter(item => item.type === 'profile').slice(-3),
})
}
} else {
if (profilesError) {
i.push({
@ -412,7 +417,7 @@ export function Explore() {
message: _(msg`Failed to load feeds preferences`),
error: cleanError(preferencesError),
})
} else {
} else if (hasNextFeedsPage) {
i.push({
type: 'loadMore',
key: 'loadMoreFeeds',
@ -454,6 +459,8 @@ export function Explore() {
profilesError,
feedsError,
preferencesError,
hasNextProfilesPage,
hasNextFeedsPage,
])
const renderItem = React.useCallback(