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
parent
1106517481
commit
35e54e24a0
|
@ -267,6 +267,9 @@ export const atoms = {
|
|||
font_bold: {
|
||||
fontWeight: tokens.fontWeight.bold,
|
||||
},
|
||||
font_heavy: {
|
||||
fontWeight: tokens.fontWeight.heavy,
|
||||
},
|
||||
italic: {
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
|
|
|
@ -118,6 +118,7 @@ export const fontWeight = {
|
|||
normal: '400',
|
||||
semibold: '500',
|
||||
bold: '600',
|
||||
heavy: '700',
|
||||
} as const
|
||||
|
||||
export const gradients = {
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue