Add 'my feeds' tab

zio/stable
Paul Frazee 2023-05-17 20:33:58 -05:00
parent c55ce6de02
commit f0003d1931
5 changed files with 198 additions and 24 deletions

View File

@ -139,8 +139,8 @@ export class SavedFeedsModel {
// public api
// =
async refresh() {
return this.loadMore(true)
async refresh(quietRefresh = false) {
return this.loadMore(true, quietRefresh)
}
clear() {
@ -153,26 +153,28 @@ export class SavedFeedsModel {
this.feeds = []
}
loadMore = bundleAsync(async (replace: boolean = false) => {
if (!replace && !this.hasMore) {
return
}
this._xLoading(replace)
try {
const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
limit: PAGE_SIZE,
cursor: replace ? undefined : this.loadMoreCursor,
})
if (replace) {
this._replaceAll(res)
} else {
this._appendAll(res)
loadMore = bundleAsync(
async (replace: boolean = false, quietRefresh = false) => {
if (!replace && !this.hasMore) {
return
}
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
})
this._xLoading(replace && !quietRefresh)
try {
const res = await this.rootStore.agent.app.bsky.feed.getSavedFeeds({
limit: PAGE_SIZE,
cursor: replace ? undefined : this.loadMoreCursor,
})
if (replace) {
this._replaceAll(res)
} else {
this._appendAll(res)
}
this._xIdle()
} catch (e: any) {
this._xIdle(e)
}
},
)
removeFeed(uri: string) {
this.feeds = this.feeds.filter(f => f.data.uri !== uri)

View File

@ -24,11 +24,13 @@ export const CustomFeed = observer(
item,
style,
showSaveBtn = false,
showDescription = false,
showLikes = false,
}: {
item: CustomFeedModel
style?: StyleProp<ViewStyle>
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
}) => {
const store = useStores()
@ -75,7 +77,7 @@ export const CustomFeed = observer(
)}
</View>
{item.data.description ? (
{showDescription && item.data.description ? (
<Text style={[pal.textLight, styles.description]} numberOfLines={3}>
{item.data.description}
</Text>

View File

@ -0,0 +1,163 @@
import React, {useEffect, useCallback} from 'react'
import {
ActivityIndicator,
FlatList,
RefreshControl,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {usePalette} from 'lib/hooks/usePalette'
import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
import {CenteredView} from 'view/com/util/Views'
import {Text} from 'view/com/util/text/Text'
import {isDesktopWeb} from 'platform/detection'
import {s, colors} from 'lib/styles'
import {Link} from 'view/com/util/Link'
import {CustomFeed} from 'view/com/feeds/CustomFeed'
export const SavedFeeds = observer(
({
headerOffset = 0,
isPageFocused,
}: {
headerOffset?: number
isPageFocused: boolean
}) => {
const pal = usePalette('default')
const store = useStores()
useEffect(() => {
if (isPageFocused) {
store.shell.setMinimalShellMode(false)
store.me.savedFeeds.refresh(true)
}
}, [store, isPageFocused])
const renderListEmptyComponent = useCallback(() => {
return (
<View
style={[
pal.border,
!isDesktopWeb && s.flex1,
pal.viewLight,
styles.empty,
]}>
<Text type="lg" style={[pal.text]}>
You don't have any saved feeds. You can find feeds by searching on
Bluesky.
</Text>
</View>
)
}, [pal])
const renderListFooterComponent = useCallback(() => {
return (
<Link
style={[styles.footerLink, pal.border]}
href="/settings/pinned-feeds">
<FontAwesomeIcon icon="cog" size={18} color={pal.colors.icon} />
<Text type="lg-medium" style={pal.textLight}>
Settings
</Text>
</Link>
)
}, [pal])
const renderItem = useCallback(
({item}) => (
<SavedFeedItem
key={item.data.uri}
item={item}
savedFeeds={store.me.savedFeeds}
/>
),
[store.me.savedFeeds],
)
return (
<CenteredView style={[s.flex1]}>
<FlatList
style={[!isDesktopWeb && s.flex1, {paddingTop: headerOffset}]}
data={store.me.savedFeeds.feeds}
keyExtractor={item => item.data.uri}
refreshing={store.me.savedFeeds.isRefreshing}
refreshControl={
<RefreshControl
refreshing={store.me.savedFeeds.isRefreshing}
onRefresh={() => store.me.savedFeeds.refresh()}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
renderItem={renderItem}
initialNumToRender={10}
ListFooterComponent={renderListFooterComponent}
ListEmptyComponent={renderListEmptyComponent}
extraData={store.me.savedFeeds.isLoading}
contentOffset={{x: 0, y: headerOffset * -1}}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
</CenteredView>
)
},
)
const SavedFeedItem = observer(
({
item,
savedFeeds,
}: {
item: CustomFeedModel
savedFeeds: SavedFeedsModel
}) => {
const isPinned = savedFeeds.isPinned(item)
const onTogglePinned = useCallback(
() => savedFeeds.togglePinnedFeed(item),
[savedFeeds, item],
)
return (
<View style={styles.itemContainer}>
<CustomFeed key={item.data.uri} item={item} />
<TouchableOpacity accessibilityRole="button" onPress={onTogglePinned}>
<FontAwesomeIcon
icon="thumb-tack"
size={20}
color={isPinned ? colors.blue3 : colors.gray3}
/>
</TouchableOpacity>
</View>
)
},
)
const styles = StyleSheet.create({
footerLink: {
flexDirection: 'row',
borderTopWidth: 1,
borderBottomWidth: 1,
paddingHorizontal: 26,
paddingVertical: 18,
gap: 18,
},
empty: {
paddingHorizontal: 18,
paddingVertical: 16,
borderRadius: 8,
marginHorizontal: 18,
marginTop: 10,
},
itemContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginRight: 18,
},
})

View File

@ -37,6 +37,7 @@ export const FeedsTabBar = observer(
'Following',
"What's hot",
...store.me.savedFeeds.listOfPinnedFeedNames,
'My feeds',
],
[store.me.savedFeeds.listOfPinnedFeedNames],
)

View File

@ -14,6 +14,7 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/fab/FAB'
import {SavedFeeds} from 'view/com/feeds/SavedFeeds'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
@ -115,14 +116,19 @@ export const HomeScreen = withAuthRequired(
{store.me.savedFeeds.pinned.map((f, index) => {
return (
<FeedPage
key={String(2 + index + 1)}
testID="customFeed"
key={String(3 + index)}
testID="customFeedPage"
isPageFocused={selectedPage === 2 + index}
feed={new PostsFeedModel(store, 'custom', {feed: f.uri})}
renderEmptyState={renderFollowingEmptyState}
/>
)
})}
<SavedFeeds
key={String(3 + store.me.savedFeeds.pinned.length)}
headerOffset={HEADER_OFFSET}
isPageFocused={selectedPage === 2 + store.me.savedFeeds.pinned.length}
/>
</Pager>
)
}),