diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Navigation.tsx | 28 | ||||
| -rw-r--r-- | src/lib/hooks/useNavigationTabState.ts | 4 | ||||
| -rw-r--r-- | src/lib/routes/types.ts | 7 | ||||
| -rw-r--r-- | src/routes.ts | 1 | ||||
| -rw-r--r-- | src/state/models/feeds/multi-feed.ts | 216 | ||||
| -rw-r--r-- | src/state/models/feeds/post.ts | 265 | ||||
| -rw-r--r-- | src/state/models/feeds/posts.ts | 270 | ||||
| -rw-r--r-- | src/view/com/pager/FeedsTabBarMobile.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/pager/TabBar.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/posts/Feed.tsx | 2 | ||||
| -rw-r--r-- | src/view/com/posts/MultiFeed.tsx | 230 | ||||
| -rw-r--r-- | src/view/screens/Feeds.tsx | 125 | ||||
| -rw-r--r-- | src/view/screens/SavedFeeds.tsx | 6 | ||||
| -rw-r--r-- | src/view/shell/Drawer.tsx | 30 | ||||
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 30 | ||||
| -rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 2 |
16 files changed, 936 insertions, 290 deletions
diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 0664ac526..7da77b877 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<AllNavigatorParams>() const HomeTab = createNativeStackNavigator<HomeTabNavigatorParams>() const SearchTab = createNativeStackNavigator<SearchTabNavigatorParams>() +const FeedsTab = createNativeStackNavigator<FeedsTabNavigatorParams>() const NotificationsTab = createNativeStackNavigator<NotificationsTabNavigatorParams>() const MyProfileTab = createNativeStackNavigator<MyProfileTabNavigatorParams>() @@ -225,11 +228,12 @@ function TabsNavigator() { screenOptions={{headerShown: false}} tabBar={tabBar}> <Tab.Screen name="HomeTab" component={HomeTabNavigator} /> + <Tab.Screen name="SearchTab" component={SearchTabNavigator} /> + <Tab.Screen name="FeedsTab" component={FeedsTabNavigator} /> <Tab.Screen name="NotificationsTab" component={NotificationsTabNavigator} /> - <Tab.Screen name="SearchTab" component={SearchTabNavigator} /> <Tab.Screen name="MyProfileTab" component={MyProfileTabNavigator} /> </Tab.Navigator> ) @@ -269,6 +273,23 @@ function SearchTabNavigator() { ) } +function FeedsTabNavigator() { + const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark) + return ( + <FeedsTab.Navigator + screenOptions={{ + gestureEnabled: true, + fullScreenGestureEnabled: true, + headerShown: false, + animationDuration: 250, + contentStyle, + }}> + <FeedsTab.Screen name="Feeds" component={FeedsScreen} /> + {commonScreens(FeedsTab as typeof HomeTab)} + </FeedsTab.Navigator> + ) +} + function NotificationsTabNavigator() { const contentStyle = useColorSchemeStyle(styles.bgLight, styles.bgDark) return ( @@ -343,6 +364,11 @@ const FlatNavigator = observer(() => { options={{title: title('Search')}} /> <Flat.Screen + name="Feeds" + component={FeedsScreen} + options={{title: title('Feeds')}} + /> + <Flat.Screen name="Notifications" component={NotificationsScreen} options={{title: title('Notifications')}} diff --git a/src/lib/hooks/useNavigationTabState.ts b/src/lib/hooks/useNavigationTabState.ts index fb3662152..3a05fe524 100644 --- a/src/lib/hooks/useNavigationTabState.ts +++ b/src/lib/hooks/useNavigationTabState.ts @@ -6,14 +6,16 @@ export function useNavigationTabState() { const res = { isAtHome: getTabState(state, 'Home') !== TabState.Outside, isAtSearch: getTabState(state, 'Search') !== TabState.Outside, + isAtFeeds: getTabState(state, 'Feeds') !== TabState.Outside, isAtNotifications: getTabState(state, 'Notifications') !== TabState.Outside, isAtMyProfile: getTabState(state, 'MyProfile') !== TabState.Outside, } if ( !res.isAtHome && - !res.isAtNotifications && !res.isAtSearch && + !res.isAtFeeds && + !res.isAtNotifications && !res.isAtMyProfile ) { // HACK for some reason useNavigationState will give us pre-hydration results diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts index 5dca3cc3f..60c9e3f4b 100644 --- a/src/lib/routes/types.ts +++ b/src/lib/routes/types.ts @@ -34,6 +34,7 @@ export type CommonNavigatorParams = { export type BottomTabNavigatorParams = CommonNavigatorParams & { HomeTab: undefined SearchTab: undefined + FeedsTab: undefined NotificationsTab: undefined MyProfileTab: undefined } @@ -46,6 +47,10 @@ export type SearchTabNavigatorParams = CommonNavigatorParams & { Search: {q?: string} } +export type FeedsTabNavigatorParams = CommonNavigatorParams & { + Feeds: undefined +} + export type NotificationsTabNavigatorParams = CommonNavigatorParams & { Notifications: undefined } @@ -65,6 +70,8 @@ export type AllNavigatorParams = CommonNavigatorParams & { Home: undefined SearchTab: undefined Search: {q?: string} + FeedsTab: undefined + Feeds: undefined NotificationsTab: undefined Notifications: undefined MyProfileTab: undefined diff --git a/src/routes.ts b/src/routes.ts index 1c3d91187..54faba22d 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -3,6 +3,7 @@ import {Router} from 'lib/routes/router' export const router = new Router({ Home: '/', Search: '/search', + Feeds: '/feeds', DiscoverFeeds: '/search/feeds', Notifications: '/notifications', Settings: '/settings', diff --git a/src/state/models/feeds/multi-feed.ts b/src/state/models/feeds/multi-feed.ts new file mode 100644 index 000000000..3c13041c6 --- /dev/null +++ b/src/state/models/feeds/multi-feed.ts @@ -0,0 +1,216 @@ +import {makeAutoObservable, runInAction} from 'mobx' +import {AtUri} from '@atproto/api' +import {bundleAsync} from 'lib/async/bundle' +import {RootStoreModel} from '../root-store' +import {CustomFeedModel} from './custom-feed' +import {PostsFeedModel} from './posts' +import {PostsFeedSliceModel} from './post' + +const FEED_PAGE_SIZE = 5 +const FEEDS_PAGE_SIZE = 3 + +export type MultiFeedItem = + | { + _reactKey: string + type: 'header' + } + | { + _reactKey: string + type: 'feed-header' + avatar: string | undefined + title: string + } + | { + _reactKey: string + type: 'feed-slice' + slice: PostsFeedSliceModel + } + | { + _reactKey: string + type: 'feed-loading' + } + | { + _reactKey: string + type: 'feed-error' + error: string + } + | { + _reactKey: string + type: 'feed-footer' + title: string + uri: string + } + | { + _reactKey: string + type: 'footer' + } + +export class PostsMultiFeedModel { + // state + isLoading = false + isRefreshing = false + hasLoaded = false + hasMore = true + + // data + feedInfos: CustomFeedModel[] = [] + feeds: PostsFeedModel[] = [] + + constructor(public rootStore: RootStoreModel) { + makeAutoObservable(this, {rootStore: false}, {autoBind: true}) + } + + get hasContent() { + return this.feeds.length !== 0 + } + + get isEmpty() { + return this.hasLoaded && !this.hasContent + } + + get items() { + const items: MultiFeedItem[] = [{_reactKey: '__header__', type: 'header'}] + for (let i = 0; i < this.feedInfos.length; i++) { + if (!this.feeds[i]) { + break + } + const feed = this.feeds[i] + const feedInfo = this.feedInfos[i] + const urip = new AtUri(feedInfo.uri) + items.push({ + _reactKey: `__feed_header_${i}__`, + type: 'feed-header', + avatar: feedInfo.data.avatar, + title: feedInfo.displayName, + }) + if (feed.isLoading) { + items.push({ + _reactKey: `__feed_loading_${i}__`, + type: 'feed-loading', + }) + } else if (feed.hasError) { + items.push({ + _reactKey: `__feed_error_${i}__`, + type: 'feed-error', + error: feed.error, + }) + } else { + for (let j = 0; j < feed.slices.length; j++) { + items.push({ + _reactKey: `__feed_slice_${i}_${j}__`, + type: 'feed-slice', + slice: feed.slices[j], + }) + } + } + items.push({ + _reactKey: `__feed_footer_${i}__`, + type: 'feed-footer', + title: feedInfo.displayName, + uri: `/profile/${feedInfo.data.creator.did}/feed/${urip.rkey}`, + }) + } + if (!this.hasMore) { + items.push({_reactKey: '__footer__', type: 'footer'}) + } + return items + } + + // public api + // = + + /** + * Nuke all data + */ + clear() { + this.rootStore.log.debug('MultiFeedModel:clear') + this.isLoading = false + this.isRefreshing = false + this.hasLoaded = false + this.hasMore = true + this.feeds = [] + } + + /** + * Register any event listeners. Returns a cleanup function. + */ + registerListeners() { + const sub = this.rootStore.onPostDeleted(this.onPostDeleted.bind(this)) + return () => 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 000000000..0c411d448 --- /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 ac32044b4..02ef5f38b 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 574265eb7..0d71b2b98 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"> - <SatelliteDishIcon - size={20} - strokeWidth={2} - style={pal.textLight} - /> + <CogIcon size={21} strokeWidth={2} style={pal.textLight} /> </Link> </View> </View> diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index 28c8a4caf..70500db2c 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: 36, backgroundColor: 'transparent', diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index b90213472..8206ca509 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 000000000..4911c9e2c --- /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<ViewStyle> + showPostFollowBtn?: boolean + scrollElRef?: MutableRefObject<FlatList<any> | 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 <View style={[styles.header, pal.border]} /> + } else if (item.type === 'feed-header') { + return ( + <View style={styles.feedHeader}> + <UserAvatar type="algo" avatar={item.avatar} size={28} /> + <Text type="title-lg" style={[pal.text, styles.feedHeaderTitle]}> + {item.title} + </Text> + </View> + ) + } else if (item.type === 'feed-slice') { + return ( + <FeedSlice slice={item.slice} showFollowBtn={showPostFollowBtn} /> + ) + } else if (item.type === 'feed-loading') { + return <PostFeedLoadingPlaceholder /> + } else if (item.type === 'feed-error') { + return <ErrorMessage message={item.error} /> + } else if (item.type === 'feed-footer') { + return ( + <Link + href={item.uri} + style={[styles.feedFooter, pal.border, pal.view]}> + <Text type="lg" style={pal.link}> + See more from {item.title} + </Text> + <FontAwesomeIcon + icon="angle-right" + size={18} + color={pal.colors.link} + /> + </Link> + ) + } else if (item.type === 'footer') { + return ( + <Link + style={[styles.footerLink, palInverted.view]} + href="/search/feeds"> + <FontAwesomeIcon + icon="search" + size={18} + color={palInverted.colors.text} + /> + <Text type="lg-medium" style={palInverted.text}> + Discover new feeds + </Text> + </Link> + ) + } + return null + }, + [showPostFollowBtn, pal, palInverted], + ) + + const FeedFooter = React.useCallback( + () => + multifeed.isLoading && !isRefreshing ? ( + <View style={styles.loadMore}> + <ActivityIndicator color={pal.colors.text} /> + </View> + ) : ( + <View /> + ), + [multifeed.isLoading, isRefreshing, pal], + ) + + return ( + <View testID={testID} style={style}> + {multifeed.items.length > 0 && ( + <FlatList + testID={testID ? `${testID}-flatlist` : undefined} + ref={scrollElRef} + data={multifeed.items} + keyExtractor={item => item._reactKey} + renderItem={renderItem} + ListFooterComponent={FeedFooter} + refreshControl={ + <RefreshControl + refreshing={isRefreshing} + onRefresh={onRefresh} + tintColor={pal.colors.text} + titleColor={pal.colors.text} + progressViewOffset={headerOffset} + /> + } + 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 + /> + )} + </View> + ) +}) + +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 000000000..5d5ed6c16 --- /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<FeedsTabNavigatorParams, 'Feeds'> +export const FeedsScreen = withAuthRequired( + observer<Props>(({}: Props) => { + const pal = usePalette('default') + const store = useStores() + const flatListRef = React.useRef<FlatList>(null) + const multifeed = React.useMemo<PostsMultiFeedModel>( + () => 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 ( + <Link + href="/settings/saved-feeds" + hitSlop={10} + accessibilityRole="button" + accessibilityLabel="Edit Saved Feeds" + accessibilityHint="Opens screen to edit Saved Feeds"> + <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> + </Link> + ) + }, [pal]) + + return ( + <View style={[pal.view, styles.container]}> + <MultiFeed + scrollElRef={flatListRef} + multifeed={multifeed} + onScroll={onMainScroll} + scrollEventThrottle={100} + headerOffset={HEADER_OFFSET} + /> + <ViewHeader + title="My Feeds" + canGoBack={false} + hideOnScroll + renderButton={renderHeaderBtn} + /> + {isScrolledDown ? ( + <LoadLatestBtn + onPress={onSoftReset} + label="Scroll to top" + showIndicator={false} + /> + ) : null} + <FAB + testID="composeFAB" + onPress={onPressCompose} + icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} + accessibilityRole="button" + accessibilityLabel="Compose post" + accessibilityHint="" + /> + </View> + ) + }), +) + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, +}) diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index dac554710..103b18c70 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, ]}> - <ViewHeader title="My Feeds" showOnDesktop showBorder={!isDesktopWeb} /> + <ViewHeader + title="Edit My Feeds" + showOnDesktop + showBorder={!isDesktopWeb} + /> <DraggableFlatList containerStyle={[!isDesktopWeb && s.flex1]} data={savedFeeds.all} diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 5617cd5b8..57f4ee696 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -30,6 +30,7 @@ import { MoonIcon, UserIconSolid, SatelliteDishIcon, + SatelliteDishIconSolid, HandIcon, } from 'lib/icons' import {UserAvatar} from 'view/com/util/UserAvatar' @@ -50,7 +51,7 @@ export const DrawerContent = observer(() => { const store = useStores() const navigation = useNavigation<NavigationProp>() 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(() => { /> <MenuItem icon={ - <SatelliteDishIcon - strokeWidth={1.5} - style={pal.text as FontAwesomeIconStyle} - size={24} - /> + isAtFeeds ? ( + <SatelliteDishIconSolid + strokeWidth={1.5} + style={pal.text as FontAwesomeIconStyle} + size={24} + /> + ) : ( + <SatelliteDishIcon + strokeWidth={1.5} + style={pal.text as FontAwesomeIconStyle} + size={24} + /> + ) } 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 394aef7af..e8cba9047 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], @@ -121,6 +127,28 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => { accessibilityHint="" /> <Btn + testID="bottomBarFeedsBtn" + icon={ + isAtFeeds ? ( + <SatelliteDishIconSolid + size={25} + style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + strokeWidth={1.8} + /> + ) : ( + <SatelliteDishIcon + size={25} + style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + strokeWidth={1.8} + /> + ) + } + onPress={onPressFeeds} + accessibilityRole="tab" + accessibilityLabel="Feeds" + accessibilityHint="" + /> + <Btn testID="bottomBarNotificationsBtn" icon={ isAtNotifications ? ( diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index e62b47ca9..3b14d7e99 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -207,7 +207,7 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() { label="Notifications" /> <NavItem - href="/settings/saved-feeds" + href="/feeds" icon={ <SatelliteDishIcon strokeWidth={1.75} |