2 files changed, 56 insertions, 16 deletions

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