diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/state/models/feed-view.ts | 22 | ||||
| -rw-r--r-- | src/view/com/posts/Feed.tsx | 18 | ||||
| -rw-r--r-- | src/view/screens/Home.tsx | 54 |
3 files changed, 70 insertions, 24 deletions
diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts index 4b009bff8..3d618f91e 100644 --- a/src/state/models/feed-view.ts +++ b/src/state/models/feed-view.ts @@ -36,14 +36,14 @@ export class FeedItemModel implements GetHomeFeed.FeedItem { constructor( public rootStore: RootStoreModel, reactKey: string, - v: GetHomeFeed.FeedItem, + v: GetHomeFeed.FeedItem | GetAuthorFeed.FeedItem, ) { makeAutoObservable(this, {rootStore: false}) this._reactKey = reactKey this.copy(v) } - copy(v: GetHomeFeed.FeedItem) { + copy(v: GetHomeFeed.FeedItem | GetAuthorFeed.FeedItem) { this.cursor = v.cursor this.uri = v.uri this.author = v.author @@ -309,25 +309,28 @@ export class FeedModel { } } - private _replaceAll(res: GetHomeFeed.Response) { + private _replaceAll(res: GetHomeFeed.Response | GetAuthorFeed.Response) { this.feed.length = 0 this.hasReachedEnd = false this._appendAll(res) } - private _appendAll(res: GetHomeFeed.Response) { + private _appendAll(res: GetHomeFeed.Response | GetAuthorFeed.Response) { let counter = this.feed.length for (const item of res.data.feed) { this._append(counter++, item) } } - private _append(keyId: number, item: GetHomeFeed.FeedItem) { + private _append( + keyId: number, + item: GetHomeFeed.FeedItem | GetAuthorFeed.FeedItem, + ) { // TODO: validate .record this.feed.push(new FeedItemModel(this.rootStore, `item-${keyId}`, item)) } - private _prependAll(res: GetHomeFeed.Response) { + private _prependAll(res: GetHomeFeed.Response | GetAuthorFeed.Response) { let counter = this.feed.length for (const item of res.data.feed) { if (this.feed.find(item2 => item2.uri === item.uri)) { @@ -337,12 +340,15 @@ export class FeedModel { } } - private _prepend(keyId: number, item: GetHomeFeed.FeedItem) { + private _prepend( + keyId: number, + item: GetHomeFeed.FeedItem | GetAuthorFeed.FeedItem, + ) { // TODO: validate .record this.feed.unshift(new FeedItemModel(this.rootStore, `item-${keyId}`, item)) } - private _updateAll(res: GetHomeFeed.Response) { + private _updateAll(res: GetHomeFeed.Response | GetAuthorFeed.Response) { for (const item of res.data.feed) { const existingItem = this.feed.find( // this find function has a key subtley- the indexedAt comparison diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 037d71a13..028480eb4 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -1,17 +1,21 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {Text, View, FlatList} from 'react-native' -import {FeedViewModel, FeedViewItemModel} from '../../../state/models/feed-view' +import {Text, View, FlatList, StyleProp, ViewStyle} from 'react-native' +import {FeedModel, FeedItemModel} from '../../../state/models/feed-view' import {FeedItem} from './FeedItem' -export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) { +export const Feed = observer(function Feed({ + feed, + style, +}: { + feed: FeedModel + style?: StyleProp<ViewStyle> +}) { // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf // VirtualizedList: You have a large list that is slow to update - make sure your // renderItem function renders components that follow React performance best practices // like PureComponent, shouldComponentUpdate, etc - const renderItem = ({item}: {item: FeedViewItemModel}) => ( - <FeedItem item={item} /> - ) + const renderItem = ({item}: {item: FeedItemModel}) => <FeedItem item={item} /> const onRefresh = () => { feed.refresh().catch(err => console.error('Failed to refresh', err)) } @@ -19,7 +23,7 @@ export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) { feed.loadMore().catch(err => console.error('Failed to load more', err)) } return ( - <View> + <View style={style}> {feed.isLoading && !feed.isRefreshing && !feed.hasContent && ( <Text>Loading...</Text> )} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 173eb4435..bc2140aed 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,8 +1,10 @@ -import React, {useState, useEffect} from 'react' +import React, {useState, useEffect, useMemo} from 'react' +import {useSharedValue} from 'react-native-reanimated' import {View} from 'react-native' import {observer} from 'mobx-react-lite' import {Feed} from '../com/posts/Feed' import {FAB} from '../com/util/FloatingActionButton' +import {Selector} from '../com/util/Selector' import {useStores} from '../../state' import {FeedModel} from '../../state/models/feed-view' import {ComposePostModel} from '../../state/models/shell' @@ -10,9 +12,24 @@ import {ScreenParams} from '../routes' import {s} from '../lib/styles' export const Home = observer(function Home({visible}: ScreenParams) { - const [hasSetup, setHasSetup] = useState<boolean>(false) - const [feedView, setFeedView] = useState<FeedModel | undefined>() const store = useStores() + const [hasSetup, setHasSetup] = useState<boolean>(false) + const [selectedViewIndex, setSelectedViewIndex] = useState<number>(0) + const defaultFeedView = useMemo<FeedModel>( + () => + new FeedModel(store, 'home', { + algorithm: 'reverse-chronological', + }), + [store], + ) + const firehoseFeedView = useMemo<FeedModel>( + () => + new FeedModel(store, 'home', { + algorithm: 'firehose', + }), + [store], + ) + const swipeGestureInterp = useSharedValue<number>(0) useEffect(() => { if (!visible) { @@ -20,13 +37,13 @@ export const Home = observer(function Home({visible}: ScreenParams) { } if (hasSetup) { console.log('Updating home feed') - feedView?.update() + defaultFeedView.update() + firehoseFeedView.update() } else { store.nav.setTitle('Home') console.log('Fetching home feed') - const newFeedView = new FeedModel(store, 'home', {}) - setFeedView(newFeedView) - newFeedView.setup().then(() => setHasSetup(true)) + defaultFeedView.setup().then(() => setHasSetup(true)) + firehoseFeedView.setup() } }, [visible, store]) @@ -34,12 +51,31 @@ export const Home = observer(function Home({visible}: ScreenParams) { store.shell.openModal(new ComposePostModel({onPost: onCreatePost})) } const onCreatePost = () => { - feedView?.loadLatest() + defaultFeedView.loadLatest() + firehoseFeedView.loadLatest() + } + const onSelectView = (viewIndex: number) => { + setSelectedViewIndex(viewIndex) } return ( <View style={s.flex1}> - {feedView && <Feed feed={feedView} />} + <Selector + items={['My Feed', 'Firehose']} + selectedIndex={selectedViewIndex} + onSelect={onSelectView} + swipeGestureInterp={swipeGestureInterp} + /> + <Feed + key="default" + feed={defaultFeedView} + style={{display: selectedViewIndex === 0 ? 'flex' : 'none'}} + /> + <Feed + key="firehose" + feed={firehoseFeedView} + style={{display: selectedViewIndex === 1 ? 'flex' : 'none'}} + /> <FAB icon="pen-nib" onPress={onComposePress} /> </View> ) |