Add firehose view to home screen

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

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>
       )}

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>
   )