Feeds tab fixes (#1486)

* Bold the saved feeds on mobile

* Improve the saved feeds loading state

* Add soft reset handler to feeds page

* Show feed descriptions in profile listing

* Add an 'about this feed' modal

* Fix type assertion
zio/stable
Paul Frazee 2023-09-19 21:44:23 -07:00 committed by GitHub
parent 753fb8bfbc
commit 971c8025e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 12 deletions

View File

@ -8,6 +8,11 @@ export type MyFeedsItem =
_reactKey: string
type: 'spinner'
}
| {
_reactKey: string
type: 'saved-feeds-loading'
numItems: number
}
| {
_reactKey: string
type: 'discover-feeds-loading'
@ -91,7 +96,8 @@ export class MyFeedsUIModel {
if (this.saved.isLoading) {
items.push({
_reactKey: '__saved_feeds_loading__',
type: 'spinner',
type: 'saved-feeds-loading',
numItems: this.rootStore.preferences.savedFeeds.length || 3,
})
} else if (this.saved.hasError) {
items.push({

View File

@ -185,6 +185,17 @@ export const CustomFeedScreenInner = observer(
})
}, [store, currentFeed])
const onPressAbout = React.useCallback(() => {
store.shell.openModal({
name: 'confirm',
title: currentFeed?.displayName || '',
message:
currentFeed?.data.description || 'This feed has no description.',
confirmBtnText: 'Close',
onPressConfirm() {},
})
}, [store, currentFeed])
const onPressViewAuthor = React.useCallback(() => {
navigation.navigate('Profile', {name: handleOrDid})
}, [handleOrDid, navigation])
@ -233,7 +244,21 @@ export const CustomFeedScreenInner = observer(
}, [store, onSoftReset, isScreenFocused])
const dropdownItems: DropdownItem[] = React.useMemo(() => {
let items: DropdownItem[] = [
return [
currentFeed
? {
testID: 'feedHeaderDropdownAboutBtn',
label: 'About this feed',
onPress: onPressAbout,
icon: {
ios: {
name: 'info.circle',
},
android: '',
web: 'info',
},
}
: undefined,
{
testID: 'feedHeaderDropdownViewAuthorBtn',
label: 'View author',
@ -292,10 +317,10 @@ export const CustomFeedScreenInner = observer(
web: 'share',
},
},
]
return items
].filter(Boolean) as DropdownItem[]
}, [
currentFeed?.isSaved,
currentFeed,
onPressAbout,
onToggleSaved,
onPressReport,
onPressShare,

View File

@ -16,7 +16,10 @@ import {ComposeIcon2, CogIcon} from 'lib/icons'
import {s} from 'lib/styles'
import {SearchInput} from 'view/com/util/forms/SearchInput'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {FeedFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {
LoadingPlaceholder,
FeedFeedLoadingPlaceholder,
} from 'view/com/util/LoadingPlaceholder'
import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
import debounce from 'lodash.debounce'
import {Text} from 'view/com/util/text/Text'
@ -42,7 +45,12 @@ export const FeedsScreen = withAuthRequired(
React.useCallback(() => {
store.shell.setMinimalShellMode(false)
myFeeds.setup()
}, [store.shell, myFeeds]),
const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh())
return () => {
softResetSub.remove()
}
}, [store, myFeeds]),
)
const onPressCompose = React.useCallback(() => {
@ -119,6 +127,14 @@ export const FeedsScreen = withAuthRequired(
)
}
return <View />
} else if (item.type === 'saved-feeds-loading') {
return (
<>
{Array.from(Array(item.numItems)).map((_, i) => (
<SavedFeedLoadingPlaceholder key={`placeholder-${i}`} />
))}
</>
)
} else if (item.type === 'saved-feed') {
return (
<SavedFeed
@ -262,10 +278,7 @@ function SavedFeed({
asAnchor
anchorNoUnderline>
<UserAvatar type="algo" size={28} avatar={avatar} />
<Text
type={isMobile ? 'lg' : 'lg-medium'}
style={[pal.text, s.flex1]}
numberOfLines={1}>
<Text type="lg-medium" style={[pal.text, s.flex1]} numberOfLines={1}>
{displayName}
</Text>
{isMobile && (
@ -279,6 +292,22 @@ function SavedFeed({
)
}
function SavedFeedLoadingPlaceholder() {
const pal = usePalette('default')
const {isMobile} = useWebMediaQueries()
return (
<View
style={[
pal.border,
styles.savedFeed,
isMobile && styles.savedFeedMobile,
]}>
<LoadingPlaceholder width={28} height={28} style={{borderRadius: 4}} />
<LoadingPlaceholder width={140} height={12} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,

View File

@ -187,7 +187,9 @@ export const ProfileScreen = withAuthRequired(
/>
)
} else if (item instanceof CustomFeedModel) {
return <CustomFeed item={item} showSaveBtn showLikes />
return (
<CustomFeed item={item} showSaveBtn showLikes showDescription />
)
}
// if section is posts or posts & replies
} else {