diff options
| -rw-r--r-- | src/state/models/ui/my-feeds.ts | 8 | ||||
| -rw-r--r-- | src/view/screens/CustomFeed.tsx | 33 | ||||
| -rw-r--r-- | src/view/screens/Feeds.tsx | 41 | ||||
| -rw-r--r-- | src/view/screens/Profile.tsx | 4 |
4 files changed, 74 insertions, 12 deletions
diff --git a/src/state/models/ui/my-feeds.ts b/src/state/models/ui/my-feeds.ts index f9ad06f77..6b017709e 100644 --- a/src/state/models/ui/my-feeds.ts +++ b/src/state/models/ui/my-feeds.ts @@ -10,6 +10,11 @@ export type MyFeedsItem = } | { _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({ diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx index eaa21f292..f8ceda940 100644 --- a/src/view/screens/CustomFeed.tsx +++ b/src/view/screens/CustomFeed.tsx @@ -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, diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index d2c4a6d2d..6ca24bae9 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -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, diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 241bae1ed..efcb588f6 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -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 { |