1 files changed, 103 insertions, 0 deletions
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
new file mode 100644
index 000000000..7b04a6474
--- /dev/null
+++ b/src/view/screens/SavedFeeds.tsx
@@ -0,0 +1,103 @@
+import React, {useCallback, useMemo} from 'react'
+import {
+  RefreshControl,
+  StyleSheet,
+  View,
+  FlatList,
+  ActivityIndicator,
+} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
+import AlgoItem from 'view/com/algos/AlgoItem'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
+import {Text} from 'view/com/util/text/Text'
+import {isDesktopWeb} from 'platform/detection'
+import {s} from 'lib/styles'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
+
+export const SavedFeeds = withAuthRequired(
+  observer(({}: Props) => {
+    const pal = usePalette('default')
+    const rootStore = useStores()
+    const {screen} = useAnalytics()
+
+    const savedFeeds = useMemo(
+      () => new SavedFeedsModel(rootStore),
+      [rootStore],
+    )
+
+    useFocusEffect(
+      useCallback(() => {
+        screen('SavedFeeds')
+        rootStore.shell.setMinimalShellMode(false)
+        savedFeeds.refresh()
+      }, [screen, rootStore, savedFeeds]),
+    )
+
+    return (
+      <CenteredView style={[s.flex1]}>
+        <ViewHeader title="Custom Algorithms" showOnDesktop />
+        <FlatList
+          style={[!isDesktopWeb && s.flex1]}
+          data={savedFeeds.feeds}
+          keyExtractor={item => item.data.uri}
+          refreshControl={
+            <RefreshControl
+              refreshing={savedFeeds.isRefreshing}
+              onRefresh={() => savedFeeds.refresh()}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
+          onEndReached={() => savedFeeds.loadMore()}
+          renderItem={({item}) => <AlgoItem key={item.data.uri} item={item} />}
+          initialNumToRender={15}
+          ListFooterComponent={() => (
+            <View style={styles.footer}>
+              {savedFeeds.isLoading && <ActivityIndicator />}
+            </View>
+          )}
+          ListEmptyComponent={() => (
+            <View
+              style={[
+                pal.border,
+                !isDesktopWeb && s.flex1,
+                pal.viewLight,
+                styles.empty,
+              ]}>
+              <Text type="lg" style={[pal.text]}>
+                You don't have any saved feeds. To save a feed, click the save
+                button when a custom feed or algorithm shows up.
+              </Text>
+            </View>
+          )}
+          extraData={savedFeeds.isLoading}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight
+        />
+      </CenteredView>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingVertical: 20,
+  },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
+})