From 257686f3603e800e355850a23b3a4011e5558aeb Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Thu, 25 May 2023 20:02:37 -0500 Subject: [PATCH] Add feeds tab --- bskyweb/cmd/bskyweb/server.go | 1 + src/Navigation.tsx | 28 ++- src/lib/hooks/useNavigationTabState.ts | 4 +- src/lib/routes/types.ts | 7 + src/routes.ts | 1 + src/state/models/feeds/multi-feed.ts | 216 ++++++++++++++++++ src/state/models/feeds/post.ts | 265 ++++++++++++++++++++++ src/state/models/feeds/posts.ts | 270 +---------------------- src/view/com/pager/FeedsTabBarMobile.tsx | 8 +- src/view/com/pager/TabBar.tsx | 2 +- src/view/com/posts/Feed.tsx | 2 - src/view/com/posts/MultiFeed.tsx | 230 +++++++++++++++++++ src/view/screens/Feeds.tsx | 125 +++++++++++ src/view/screens/SavedFeeds.tsx | 6 +- src/view/shell/Drawer.tsx | 30 ++- src/view/shell/bottom-bar/BottomBar.tsx | 30 ++- src/view/shell/desktop/LeftNav.tsx | 2 +- 17 files changed, 937 insertions(+), 290 deletions(-) create mode 100644 src/state/models/feeds/multi-feed.ts create mode 100644 src/state/models/feeds/post.ts create mode 100644 src/view/com/posts/MultiFeed.tsx create mode 100644 src/view/screens/Feeds.tsx diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go index 462740f5..85fffd4b 100644 --- a/bskyweb/cmd/bskyweb/server.go +++ b/bskyweb/cmd/bskyweb/server.go @@ -106,6 +106,7 @@ func serve(cctx *cli.Context) error { // generic routes e.GET("/search", server.WebGeneric) e.GET("/search/feeds", server.WebGeneric) + e.GET("/feeds", server.WebGeneric) e.GET("/notifications", server.WebGeneric) e.GET("/moderation", server.WebGeneric) e.GET("/moderation/mute-lists", server.WebGeneric) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 0664ac52..7da77b87 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -14,6 +14,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs' import { HomeTabNavigatorParams, SearchTabNavigatorParams, + FeedsTabNavigatorParams, NotificationsTabNavigatorParams, FlatNavigatorParams, AllNavigatorParams, @@ -32,6 +33,7 @@ import {useStores} from './state' import {HomeScreen} from './view/screens/Home' import {SearchScreen} from './view/screens/Search' +import {FeedsScreen} from './view/screens/Feeds' import {NotificationsScreen} from './view/screens/Notifications' import {ModerationScreen} from './view/screens/Moderation' import {ModerationMuteListsScreen} from './view/screens/ModerationMuteLists' @@ -65,6 +67,7 @@ const navigationRef = createNavigationContainerRef() const HomeTab = createNativeStackNavigator() const SearchTab = createNativeStackNavigator() +const FeedsTab = createNativeStackNavigator() const NotificationsTab = createNativeStackNavigator() const MyProfileTab = createNativeStackNavigator() @@ -225,11 +228,12 @@ function TabsNavigator() { screenOptions={{headerShown: false}} tabBar={tabBar}> + + - ) @@ -269,6 +273,23 @@ function SearchTabNavigator() { ) } +function FeedsTabNavigator() { + const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark) + return ( + + + {commonScreens(FeedsTab as typeof HomeTab)} + + ) +} + function NotificationsTabNavigator() { const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark) return ( @@ -342,6 +363,11 @@ const FlatNavigator = observer(() => { component={SearchScreen} options={{title: title('Search')}} /> + sub.remove() + } + + /** + * Reset and load + */ + async refresh() { + this.feedInfos = this.rootStore.me.savedFeeds.all.slice() // capture current feeds + await this.loadMore(true) + } + + /** + * Load more posts to the end of the feed + */ + loadMore = bundleAsync(async (isRefreshing: boolean = false) => { + if (!isRefreshing && !this.hasMore) { + return + } + if (isRefreshing) { + this.isRefreshing = true // set optimistically for UI + this.feeds = [] + } + this._xLoading(isRefreshing) + const start = this.feeds.length + const newFeeds: PostsFeedModel[] = [] + for ( + let i = start; + i < start + FEEDS_PAGE_SIZE && i < this.feedInfos.length; + i++ + ) { + const feed = new PostsFeedModel(this.rootStore, 'custom', { + feed: this.feedInfos[i].uri, + }) + feed.pageSize = FEED_PAGE_SIZE + await feed.setup() + newFeeds.push(feed) + } + runInAction(() => { + this.feeds = this.feeds.concat(newFeeds) + this.hasMore = this.feeds.length < this.feedInfos.length + }) + this._xIdle() + }) + + /** + * Attempt to load more again after a failure + */ + async retryLoadMore() { + this.hasMore = true + return this.loadMore() + } + + /** + * Removes posts from the feed upon deletion. + */ + onPostDeleted(uri: string) { + for (const f of this.feeds) { + f.onPostDeleted(uri) + } + } + + // state transitions + // = + + _xLoading(isRefreshing = false) { + this.isLoading = true + this.isRefreshing = isRefreshing + } + + _xIdle() { + this.isLoading = false + this.isRefreshing = false + this.hasLoaded = true + } + + // helper functions + // = +} diff --git a/src/state/models/feeds/post.ts b/src/state/models/feeds/post.ts new file mode 100644 index 00000000..0c411d44 --- /dev/null +++ b/src/state/models/feeds/post.ts @@ -0,0 +1,265 @@ +import {makeAutoObservable} from 'mobx' +import {AppBskyFeedDefs, AppBskyFeedPost, RichText} from '@atproto/api' +import {RootStoreModel} from '../root-store' +import {updateDataOptimistically} from 'lib/async/revertible' +import {PostLabelInfo, PostModeration} from 'lib/labeling/types' +import {FeedViewPostsSlice} from 'lib/api/feed-manip' +import { + getEmbedLabels, + getEmbedMuted, + getEmbedMutedByList, + getEmbedBlocking, + getEmbedBlockedBy, + getPostModeration, + filterAccountLabels, + filterProfileLabels, + mergePostModerations, +} from 'lib/labeling/helpers' + +type FeedViewPost = AppBskyFeedDefs.FeedViewPost +type ReasonRepost = AppBskyFeedDefs.ReasonRepost +type PostView = AppBskyFeedDefs.PostView + +let _idCounter = 0 + +export class PostsFeedItemModel { + // ui state + _reactKey: string = '' + + // data + post: PostView + postRecord?: AppBskyFeedPost.Record + reply?: FeedViewPost['reply'] + reason?: FeedViewPost['reason'] + richText?: RichText + + constructor( + public rootStore: RootStoreModel, + reactKey: string, + v: FeedViewPost, + ) { + this._reactKey = reactKey + this.post = v.post + if (AppBskyFeedPost.isRecord(this.post.record)) { + const valid = AppBskyFeedPost.validateRecord(this.post.record) + if (valid.success) { + this.postRecord = this.post.record + this.richText = new RichText(this.postRecord, {cleanNewlines: true}) + } else { + this.postRecord = undefined + this.richText = undefined + rootStore.log.warn( + 'Received an invalid app.bsky.feed.post record', + valid.error, + ) + } + } else { + this.postRecord = undefined + this.richText = undefined + rootStore.log.warn( + 'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type', + this.post.record, + ) + } + this.reply = v.reply + this.reason = v.reason + makeAutoObservable(this, {rootStore: false}) + } + + get rootUri(): string { + if (this.reply?.root.uri) { + return this.reply.root.uri + } + return this.post.uri + } + + get isThreadMuted() { + return this.rootStore.mutedThreads.uris.has(this.rootUri) + } + + get labelInfo(): PostLabelInfo { + return { + postLabels: (this.post.labels || []).concat( + getEmbedLabels(this.post.embed), + ), + accountLabels: filterAccountLabels(this.post.author.labels), + profileLabels: filterProfileLabels(this.post.author.labels), + isMuted: + this.post.author.viewer?.muted || + getEmbedMuted(this.post.embed) || + false, + mutedByList: + this.post.author.viewer?.mutedByList || + getEmbedMutedByList(this.post.embed), + isBlocking: + !!this.post.author.viewer?.blocking || + getEmbedBlocking(this.post.embed) || + false, + isBlockedBy: + !!this.post.author.viewer?.blockedBy || + getEmbedBlockedBy(this.post.embed) || + false, + } + } + + get moderation(): PostModeration { + return getPostModeration(this.rootStore, this.labelInfo) + } + + copy(v: FeedViewPost) { + this.post = v.post + this.reply = v.reply + this.reason = v.reason + } + + copyMetrics(v: FeedViewPost) { + this.post.replyCount = v.post.replyCount + this.post.repostCount = v.post.repostCount + this.post.likeCount = v.post.likeCount + this.post.viewer = v.post.viewer + } + + get reasonRepost(): ReasonRepost | undefined { + if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') { + return this.reason as ReasonRepost + } + } + + async toggleLike() { + this.post.viewer = this.post.viewer || {} + if (this.post.viewer.like) { + const url = this.post.viewer.like + await updateDataOptimistically( + this.post, + () => { + this.post.likeCount = (this.post.likeCount || 0) - 1 + this.post.viewer!.like = undefined + }, + () => this.rootStore.agent.deleteLike(url), + ) + } else { + await updateDataOptimistically( + this.post, + () => { + this.post.likeCount = (this.post.likeCount || 0) + 1 + this.post.viewer!.like = 'pending' + }, + () => this.rootStore.agent.like(this.post.uri, this.post.cid), + res => { + this.post.viewer!.like = res.uri + }, + ) + } + } + + async toggleRepost() { + this.post.viewer = this.post.viewer || {} + if (this.post.viewer?.repost) { + const url = this.post.viewer.repost + await updateDataOptimistically( + this.post, + () => { + this.post.repostCount = (this.post.repostCount || 0) - 1 + this.post.viewer!.repost = undefined + }, + () => this.rootStore.agent.deleteRepost(url), + ) + } else { + await updateDataOptimistically( + this.post, + () => { + this.post.repostCount = (this.post.repostCount || 0) + 1 + this.post.viewer!.repost = 'pending' + }, + () => this.rootStore.agent.repost(this.post.uri, this.post.cid), + res => { + this.post.viewer!.repost = res.uri + }, + ) + } + } + + async toggleThreadMute() { + if (this.isThreadMuted) { + this.rootStore.mutedThreads.uris.delete(this.rootUri) + } else { + this.rootStore.mutedThreads.uris.add(this.rootUri) + } + } + + async delete() { + await this.rootStore.agent.deletePost(this.post.uri) + this.rootStore.emitPostDeleted(this.post.uri) + } +} + +export class PostsFeedSliceModel { + // ui state + _reactKey: string = '' + + // data + items: PostsFeedItemModel[] = [] + + constructor( + public rootStore: RootStoreModel, + reactKey: string, + slice: FeedViewPostsSlice, + ) { + this._reactKey = reactKey + for (const item of slice.items) { + this.items.push( + new PostsFeedItemModel(rootStore, `slice-${_idCounter++}`, item), + ) + } + makeAutoObservable(this, {rootStore: false}) + } + + get uri() { + if (this.isReply) { + return this.items[1].post.uri + } + return this.items[0].post.uri + } + + get isThread() { + return ( + this.items.length > 1 && + this.items.every( + item => item.post.author.did === this.items[0].post.author.did, + ) + ) + } + + get isReply() { + return this.items.length > 1 && !this.isThread + } + + get rootItem() { + if (this.isReply) { + return this.items[1] + } + return this.items[0] + } + + get moderation() { + return mergePostModerations(this.items.map(item => item.moderation)) + } + + containsUri(uri: string) { + return !!this.items.find(item => item.post.uri === uri) + } + + isThreadParentAt(i: number) { + if (this.items.length === 1) { + return false + } + return i < this.items.length - 1 + } + + isThreadChildAt(i: number) { + if (this.items.length === 1) { + return false + } + return i > 0 + } +} diff --git a/src/state/models/feeds/posts.ts b/src/state/models/feeds/posts.ts index ac32044b..02ef5f38 100644 --- a/src/state/models/feeds/posts.ts +++ b/src/state/models/feeds/posts.ts @@ -1,11 +1,8 @@ import {makeAutoObservable, runInAction} from 'mobx' import { AppBskyFeedGetTimeline as GetTimeline, - AppBskyFeedDefs, - AppBskyFeedPost, AppBskyFeedGetAuthorFeed as GetAuthorFeed, AppBskyFeedGetFeed as GetCustomFeed, - RichText, } from '@atproto/api' import AwaitLock from 'await-lock' import {bundleAsync} from 'lib/async/bundle' @@ -19,269 +16,11 @@ import { mergePosts, } from 'lib/api/build-suggested-posts' import {FeedTuner, FeedViewPostsSlice} from 'lib/api/feed-manip' -import {updateDataOptimistically} from 'lib/async/revertible' -import {PostLabelInfo, PostModeration} from 'lib/labeling/types' -import { - getEmbedLabels, - getEmbedMuted, - getEmbedMutedByList, - getEmbedBlocking, - getEmbedBlockedBy, - getPostModeration, - mergePostModerations, - filterAccountLabels, - filterProfileLabels, -} from 'lib/labeling/helpers' - -type FeedViewPost = AppBskyFeedDefs.FeedViewPost -type ReasonRepost = AppBskyFeedDefs.ReasonRepost -type PostView = AppBskyFeedDefs.PostView +import {PostsFeedSliceModel} from './post' const PAGE_SIZE = 30 let _idCounter = 0 -export class PostsFeedItemModel { - // ui state - _reactKey: string = '' - - // data - post: PostView - postRecord?: AppBskyFeedPost.Record - reply?: FeedViewPost['reply'] - reason?: FeedViewPost['reason'] - richText?: RichText - - constructor( - public rootStore: RootStoreModel, - reactKey: string, - v: FeedViewPost, - ) { - this._reactKey = reactKey - this.post = v.post - if (AppBskyFeedPost.isRecord(this.post.record)) { - const valid = AppBskyFeedPost.validateRecord(this.post.record) - if (valid.success) { - this.postRecord = this.post.record - this.richText = new RichText(this.postRecord, {cleanNewlines: true}) - } else { - this.postRecord = undefined - this.richText = undefined - rootStore.log.warn( - 'Received an invalid app.bsky.feed.post record', - valid.error, - ) - } - } else { - this.postRecord = undefined - this.richText = undefined - rootStore.log.warn( - 'app.bsky.feed.getTimeline or app.bsky.feed.getAuthorFeed served an unexpected record type', - this.post.record, - ) - } - this.reply = v.reply - this.reason = v.reason - makeAutoObservable(this, {rootStore: false}) - } - - get rootUri(): string { - if (this.reply?.root.uri) { - return this.reply.root.uri - } - return this.post.uri - } - - get isThreadMuted() { - return this.rootStore.mutedThreads.uris.has(this.rootUri) - } - - get labelInfo(): PostLabelInfo { - return { - postLabels: (this.post.labels || []).concat( - getEmbedLabels(this.post.embed), - ), - accountLabels: filterAccountLabels(this.post.author.labels), - profileLabels: filterProfileLabels(this.post.author.labels), - isMuted: - this.post.author.viewer?.muted || - getEmbedMuted(this.post.embed) || - false, - mutedByList: - this.post.author.viewer?.mutedByList || - getEmbedMutedByList(this.post.embed), - isBlocking: - !!this.post.author.viewer?.blocking || - getEmbedBlocking(this.post.embed) || - false, - isBlockedBy: - !!this.post.author.viewer?.blockedBy || - getEmbedBlockedBy(this.post.embed) || - false, - } - } - - get moderation(): PostModeration { - return getPostModeration(this.rootStore, this.labelInfo) - } - - copy(v: FeedViewPost) { - this.post = v.post - this.reply = v.reply - this.reason = v.reason - } - - copyMetrics(v: FeedViewPost) { - this.post.replyCount = v.post.replyCount - this.post.repostCount = v.post.repostCount - this.post.likeCount = v.post.likeCount - this.post.viewer = v.post.viewer - } - - get reasonRepost(): ReasonRepost | undefined { - if (this.reason?.$type === 'app.bsky.feed.defs#reasonRepost') { - return this.reason as ReasonRepost - } - } - - async toggleLike() { - this.post.viewer = this.post.viewer || {} - if (this.post.viewer.like) { - const url = this.post.viewer.like - await updateDataOptimistically( - this.post, - () => { - this.post.likeCount = (this.post.likeCount || 0) - 1 - this.post.viewer!.like = undefined - }, - () => this.rootStore.agent.deleteLike(url), - ) - } else { - await updateDataOptimistically( - this.post, - () => { - this.post.likeCount = (this.post.likeCount || 0) + 1 - this.post.viewer!.like = 'pending' - }, - () => this.rootStore.agent.like(this.post.uri, this.post.cid), - res => { - this.post.viewer!.like = res.uri - }, - ) - } - } - - async toggleRepost() { - this.post.viewer = this.post.viewer || {} - if (this.post.viewer?.repost) { - const url = this.post.viewer.repost - await updateDataOptimistically( - this.post, - () => { - this.post.repostCount = (this.post.repostCount || 0) - 1 - this.post.viewer!.repost = undefined - }, - () => this.rootStore.agent.deleteRepost(url), - ) - } else { - await updateDataOptimistically( - this.post, - () => { - this.post.repostCount = (this.post.repostCount || 0) + 1 - this.post.viewer!.repost = 'pending' - }, - () => this.rootStore.agent.repost(this.post.uri, this.post.cid), - res => { - this.post.viewer!.repost = res.uri - }, - ) - } - } - - async toggleThreadMute() { - if (this.isThreadMuted) { - this.rootStore.mutedThreads.uris.delete(this.rootUri) - } else { - this.rootStore.mutedThreads.uris.add(this.rootUri) - } - } - - async delete() { - await this.rootStore.agent.deletePost(this.post.uri) - this.rootStore.emitPostDeleted(this.post.uri) - } -} - -export class PostsFeedSliceModel { - // ui state - _reactKey: string = '' - - // data - items: PostsFeedItemModel[] = [] - - constructor( - public rootStore: RootStoreModel, - reactKey: string, - slice: FeedViewPostsSlice, - ) { - this._reactKey = reactKey - for (const item of slice.items) { - this.items.push( - new PostsFeedItemModel(rootStore, `item-${_idCounter++}`, item), - ) - } - makeAutoObservable(this, {rootStore: false}) - } - - get uri() { - if (this.isReply) { - return this.items[1].post.uri - } - return this.items[0].post.uri - } - - get isThread() { - return ( - this.items.length > 1 && - this.items.every( - item => item.post.author.did === this.items[0].post.author.did, - ) - ) - } - - get isReply() { - return this.items.length > 1 && !this.isThread - } - - get rootItem() { - if (this.isReply) { - return this.items[1] - } - return this.items[0] - } - - get moderation() { - return mergePostModerations(this.items.map(item => item.moderation)) - } - - containsUri(uri: string) { - return !!this.items.find(item => item.post.uri === uri) - } - - isThreadParentAt(i: number) { - if (this.items.length === 1) { - return false - } - return i < this.items.length - 1 - } - - isThreadChildAt(i: number) { - if (this.items.length === 1) { - return false - } - return i > 0 - } -} - export class PostsFeedModel { // state isLoading = false @@ -297,6 +36,7 @@ export class PostsFeedModel { loadMoreCursor: string | undefined pollCursor: string | undefined tuner = new FeedTuner() + pageSize = PAGE_SIZE // used to linearize async modifications to state lock = new AwaitLock() @@ -418,7 +158,7 @@ export class PostsFeedModel { this.tuner.reset() this._xLoading(isRefreshing) try { - const res = await this._getFeed({limit: PAGE_SIZE}) + const res = await this._getFeed({limit: this.pageSize}) await this._replaceAll(res) this._xIdle() } catch (e: any) { @@ -457,7 +197,7 @@ export class PostsFeedModel { try { const res = await this._getFeed({ cursor: this.loadMoreCursor, - limit: PAGE_SIZE, + limit: this.pageSize, }) await this._appendAll(res) this._xIdle() @@ -526,7 +266,7 @@ export class PostsFeedModel { if (this.hasNewLatest || this.feedType === 'suggested') { return } - const res = await this._getFeed({limit: PAGE_SIZE}) + const res = await this._getFeed({limit: this.pageSize}) const tuner = new FeedTuner() const slices = tuner.tune(res.data.feed, this.feedTuners) this.setHasNewLatest(slices[0]?.uri !== this.slices[0]?.uri) diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx index 574265eb..0d71b2b9 100644 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ b/src/view/com/pager/FeedsTabBarMobile.tsx @@ -8,7 +8,7 @@ import {usePalette} from 'lib/hooks/usePalette' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {Link} from '../util/Link' import {Text} from '../util/text/Text' -import {SatelliteDishIcon} from 'lib/icons' +import {CogIcon} from 'lib/icons' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {s} from 'lib/styles' @@ -69,11 +69,7 @@ export const FeedsTabBar = observer( accessibilityRole="button" accessibilityLabel="Edit Saved Feeds" accessibilityHint="Opens screen to edit Saved Feeds"> - + diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index bbba74c8..b0a02ea2 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -131,7 +131,7 @@ const styles = isDesktopWeb backgroundColor: 'transparent', }, contentContainer: { - columnGap: 16, + columnGap: 20, marginLeft: 18, paddingRight: 28, backgroundColor: 'transparent', diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index b9021347..8206ca50 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -33,7 +33,6 @@ export const Feed = observer(function Feed({ onPressTryAgain, onScroll, scrollEventThrottle, - onMomentumScrollEnd, renderEmptyState, testID, headerOffset = 0, @@ -186,7 +185,6 @@ export const Feed = observer(function Feed({ style={{paddingTop: headerOffset}} onScroll={onScroll} scrollEventThrottle={scrollEventThrottle} - onMomentumScrollEnd={onMomentumScrollEnd} indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'} onEndReached={onEndReached} onEndReachedThreshold={0.6} diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx new file mode 100644 index 00000000..4911c9e2 --- /dev/null +++ b/src/view/com/posts/MultiFeed.tsx @@ -0,0 +1,230 @@ +import React, {MutableRefObject} from 'react' +import {observer} from 'mobx-react-lite' +import { + ActivityIndicator, + RefreshControl, + StyleProp, + StyleSheet, + View, + ViewStyle, +} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FlatList} from '../util/Views' +import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {PostsMultiFeedModel, MultiFeedItem} from 'state/models/feeds/multi-feed' +import {FeedSlice} from './FeedSlice' +import {Text} from '../util/text/Text' +import {Link} from '../util/Link' +import {UserAvatar} from '../util/UserAvatar' +import {OnScrollCb} from 'lib/hooks/useOnMainScroll' +import {s} from 'lib/styles' +import {useAnalytics} from 'lib/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' + +export const MultiFeed = observer(function Feed({ + multifeed, + style, + showPostFollowBtn, + scrollElRef, + onScroll, + scrollEventThrottle, + testID, + headerOffset = 0, + extraData, +}: { + multifeed: PostsMultiFeedModel + style?: StyleProp + showPostFollowBtn?: boolean + scrollElRef?: MutableRefObject | null> + onPressTryAgain?: () => void + onScroll?: OnScrollCb + scrollEventThrottle?: number + renderEmptyState?: () => JSX.Element + testID?: string + headerOffset?: number + extraData?: any +}) { + const pal = usePalette('default') + const palInverted = usePalette('inverted') + const theme = useTheme() + const {track} = useAnalytics() + const [isRefreshing, setIsRefreshing] = React.useState(false) + + // events + // = + + const onRefresh = React.useCallback(async () => { + track('MultiFeed:onRefresh') + setIsRefreshing(true) + try { + await multifeed.refresh() + } catch (err) { + multifeed.rootStore.log.error('Failed to refresh posts feed', err) + } + setIsRefreshing(false) + }, [multifeed, track, setIsRefreshing]) + + const onEndReached = React.useCallback(async () => { + track('MultiFeed:onEndReached') + try { + await multifeed.loadMore() + } catch (err) { + multifeed.rootStore.log.error('Failed to load more posts', err) + } + }, [multifeed, track]) + + // rendering + // = + + const renderItem = React.useCallback( + ({item}: {item: MultiFeedItem}) => { + if (item.type === 'header') { + return + } else if (item.type === 'feed-header') { + return ( + + + + {item.title} + + + ) + } else if (item.type === 'feed-slice') { + return ( + + ) + } else if (item.type === 'feed-loading') { + return + } else if (item.type === 'feed-error') { + return + } else if (item.type === 'feed-footer') { + return ( + + + See more from {item.title} + + + + ) + } else if (item.type === 'footer') { + return ( + + + + Discover new feeds + + + ) + } + return null + }, + [showPostFollowBtn, pal, palInverted], + ) + + const FeedFooter = React.useCallback( + () => + multifeed.isLoading && !isRefreshing ? ( + + + + ) : ( + + ), + [multifeed.isLoading, isRefreshing, pal], + ) + + return ( + + {multifeed.items.length > 0 && ( + item._reactKey} + renderItem={renderItem} + ListFooterComponent={FeedFooter} + refreshControl={ + + } + contentContainerStyle={s.contentContainer} + style={[{paddingTop: headerOffset}, pal.viewLight, styles.container]} + onScroll={onScroll} + scrollEventThrottle={scrollEventThrottle} + indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'} + onEndReached={onEndReached} + onEndReachedThreshold={0.6} + removeClippedSubviews={true} + contentOffset={{x: 0, y: headerOffset * -1}} + extraData={extraData} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> + )} + + ) +}) + +const styles = StyleSheet.create({ + container: { + height: '100%', + }, + header: { + borderTopWidth: 1, + marginBottom: 4, + }, + feedHeader: { + flexDirection: 'row', + gap: 8, + alignItems: 'center', + paddingHorizontal: 16, + paddingBottom: 8, + marginTop: 12, + }, + feedHeaderTitle: { + fontWeight: 'bold', + }, + feedFooter: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingHorizontal: 16, + paddingVertical: 16, + marginBottom: 12, + borderTopWidth: 1, + borderBottomWidth: 1, + }, + footerLink: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 8, + paddingHorizontal: 14, + paddingVertical: 12, + marginHorizontal: 8, + marginBottom: 8, + gap: 8, + }, + loadMore: { + paddingTop: 10, + }, +}) diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx new file mode 100644 index 00000000..5d5ed6c1 --- /dev/null +++ b/src/view/screens/Feeds.tsx @@ -0,0 +1,125 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' +import isEqual from 'lodash.isequal' +import {withAuthRequired} from 'view/com/auth/withAuthRequired' +import {FlatList} from 'view/com/util/Views' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {FAB} from 'view/com/util/fab/FAB' +import {Link} from 'view/com/util/Link' +import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types' +import {observer} from 'mobx-react-lite' +import {PostsMultiFeedModel} from 'state/models/feeds/multi-feed' +import {MultiFeed} from 'view/com/posts/MultiFeed' +import {isDesktopWeb} from 'platform/detection' +import {usePalette} from 'lib/hooks/usePalette' +import {useStores} from 'state/index' +import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' +import {ComposeIcon2, CogIcon} from 'lib/icons' +import {s} from 'lib/styles' + +const HEADER_OFFSET = isDesktopWeb ? 0 : 40 + +type Props = NativeStackScreenProps +export const FeedsScreen = withAuthRequired( + observer(({}: Props) => { + const pal = usePalette('default') + const store = useStores() + const flatListRef = React.useRef(null) + const multifeed = React.useMemo( + () => new PostsMultiFeedModel(store), + [store], + ) + const [onMainScroll, isScrolledDown, resetMainScroll] = + useOnMainScroll(store) + + const onSoftReset = React.useCallback(() => { + flatListRef.current?.scrollToOffset({offset: 0}) + resetMainScroll() + }, [flatListRef, resetMainScroll]) + + useFocusEffect( + React.useCallback(() => { + const softResetSub = store.onScreenSoftReset(onSoftReset) + const multifeedCleanup = multifeed.registerListeners() + const cleanup = () => { + softResetSub.remove() + multifeedCleanup() + } + + store.shell.setMinimalShellMode(false) + return cleanup + }, [store, multifeed, onSoftReset]), + ) + + React.useEffect(() => { + if ( + isEqual( + multifeed.feedInfos.map(f => f.uri), + store.me.savedFeeds.all.map(f => f.uri), + ) + ) { + // no changes + return + } + multifeed.refresh() + }, [multifeed, store.me.savedFeeds.all]) + + const onPressCompose = React.useCallback(() => { + store.shell.openComposer({}) + }, [store]) + + const renderHeaderBtn = React.useCallback(() => { + return ( + + + + ) + }, [pal]) + + return ( + + + + {isScrolledDown ? ( + + ) : null} + } + accessibilityRole="button" + accessibilityLabel="Compose post" + accessibilityHint="" + /> + + ) + }), +) + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}) diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index dac55471..103b18c7 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -118,7 +118,11 @@ export const SavedFeeds = withAuthRequired( pal.border, isDesktopWeb && styles.desktopContainer, ]}> - + { const store = useStores() const navigation = useNavigation() const {track} = useAnalytics() - const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} = + const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = useNavigationTabState() const {notifications} = store.me @@ -97,11 +98,10 @@ export const DrawerContent = observer(() => { onPressTab('MyProfile') }, [onPressTab]) - const onPressMyFeeds = React.useCallback(() => { - track('Menu:ItemClicked', {url: 'MyFeeds'}) - navigation.navigate('SavedFeeds') - store.shell.closeDrawer() - }, [navigation, track, store.shell]) + const onPressMyFeeds = React.useCallback( + () => onPressTab('Feeds'), + [onPressTab], + ) const onPressModeration = React.useCallback(() => { track('Menu:ItemClicked', {url: 'Moderation'}) @@ -240,11 +240,19 @@ export const DrawerContent = observer(() => { /> + isAtFeeds ? ( + + ) : ( + + ) } label="My Feeds" accessibilityLabel="My Feeds" diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 394aef7a..e8cba904 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -18,6 +18,8 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, + SatelliteDishIcon, + SatelliteDishIconSolid, BellIcon, BellIconSolid, } from 'lib/icons' @@ -33,7 +35,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { const pal = usePalette('default') const safeAreaInsets = useSafeAreaInsets() const {track} = useAnalytics() - const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} = + const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} = useNavigationTabState() const {footerMinimalShellTransform} = useMinimalShellMode() @@ -59,6 +61,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { () => onPressTab('Search'), [onPressTab], ) + const onPressFeeds = React.useCallback( + () => onPressTab('Feeds'), + [onPressTab], + ) const onPressNotifications = React.useCallback( () => onPressTab('Notifications'), [onPressTab], @@ -120,6 +126,28 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { accessibilityLabel="Search" accessibilityHint="" /> + + ) : ( + + ) + } + onPress={onPressFeeds} + accessibilityRole="tab" + accessibilityLabel="Feeds" + accessibilityHint="" + />