An ATproto social media client -- with an independent Appview.
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>
authored by
Eric Bailey
Paul Frazee
and committed by
GitHub
35e54e24
11065174
+23
-12
+3
src/alf/atoms.ts
+3
src/alf/atoms.ts
+1
src/alf/tokens.ts
+1
src/alf/tokens.ts
+19
-12
src/view/screens/Search/Explore.tsx
+19
-12
src/view/screens/Search/Explore.tsx
···
64
64
fill={t.palette.primary_500}
65
65
style={{marginLeft: -2}}
66
66
/>
67
-
<Text style={[a.text_2xl, a.font_bold, t.atoms.text]}>{title}</Text>
67
+
<Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>{title}</Text>
68
68
</View>
69
69
<Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
70
70
{description}
···
119
119
})
120
120
.filter(Boolean) as LoadMoreItems[]
121
121
}, [item.items, moderationOpts])
122
+
123
+
if (items.length === 0) return null
124
+
122
125
const type = items[0].type
123
126
124
127
return (
···
142
145
a.relative,
143
146
{
144
147
height: 32,
145
-
width: 32 + 15 * 3,
148
+
width: 32 + 15 * items.length,
146
149
},
147
150
]}>
148
151
<View
149
152
style={[
150
153
a.align_center,
151
154
a.justify_center,
152
-
a.border,
153
155
t.atoms.bg_contrast_25,
154
156
a.absolute,
155
157
{
156
158
width: 30,
157
159
height: 30,
158
160
left: 0,
161
+
borderWidth: 1,
159
162
backgroundColor: t.palette.primary_500,
160
163
borderColor: t.atoms.bg.backgroundColor,
161
164
borderRadius: type === 'profile' ? 999 : 4,
···
169
172
<View
170
173
key={_item.key}
171
174
style={[
172
-
a.border,
173
175
t.atoms.bg_contrast_25,
174
176
a.absolute,
175
177
{
176
178
width: 30,
177
179
height: 30,
178
180
left: (i + 1) * 15,
181
+
borderWidth: 1,
179
182
borderColor: t.atoms.bg.backgroundColor,
180
183
borderRadius: _item.type === 'profile' ? 999 : 4,
181
184
zIndex: 3 - i,
···
350
353
}
351
354
}
352
355
353
-
i.push({
354
-
type: 'loadMore',
355
-
key: 'loadMoreProfiles',
356
-
isLoadingMore: isLoadingMoreProfiles,
357
-
onLoadMore: onLoadMoreProfiles,
358
-
items: i.filter(item => item.type === 'profile').slice(-3),
359
-
})
356
+
if (hasNextProfilesPage) {
357
+
i.push({
358
+
type: 'loadMore',
359
+
key: 'loadMoreProfiles',
360
+
isLoadingMore: isLoadingMoreProfiles,
361
+
onLoadMore: onLoadMoreProfiles,
362
+
items: i.filter(item => item.type === 'profile').slice(-3),
363
+
})
364
+
}
360
365
} else {
361
366
if (profilesError) {
362
367
i.push({
···
412
417
message: _(msg`Failed to load feeds preferences`),
413
418
error: cleanError(preferencesError),
414
419
})
415
-
} else {
420
+
} else if (hasNextFeedsPage) {
416
421
i.push({
417
422
type: 'loadMore',
418
423
key: 'loadMoreFeeds',
···
454
459
profilesError,
455
460
feedsError,
456
461
preferencesError,
462
+
hasNextProfilesPage,
463
+
hasNextFeedsPage,
457
464
])
458
465
459
466
const renderItem = React.useCallback(