[Starter Packs] Posts tab (#4660)

* [Starter Packs] Posts tab

* oops

1 files changed, 51 insertions, 0 deletions

diff --git a/src/components/StarterPack/Main/PostsList.tsx b/src/components/StarterPack/Main/PostsList.tsx
new file mode 100644
index 000000000..c19c6bc63
--- /dev/null
+++ b/src/components/StarterPack/Main/PostsList.tsx
@@ -0,0 +1,51 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {FeedDescriptor} from '#/state/queries/post-feed'
+import {isNative} from 'platform/detection'
+import {Feed} from 'view/com/posts/Feed'
+import {EmptyState} from 'view/com/util/EmptyState'
+import {ListRef} from 'view/com/util/List'
+import {SectionRef} from '#/screens/Profile/Sections/types'
+
+interface ProfilesListProps {
+  listUri: string
+  headerHeight: number
+  scrollElRef: ListRef
+}
+
+export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
+  function PostsListImpl({listUri, headerHeight, scrollElRef}, ref) {
+    const feed: FeedDescriptor = `list|${listUri}|as_following`
+    const {_} = useLingui()
+
+    const onScrollToTop = useCallback(() => {
+      scrollElRef.current?.scrollToOffset({
+        animated: isNative,
+        offset: -headerHeight,
+      })
+    }, [scrollElRef, headerHeight])
+
+    React.useImperativeHandle(ref, () => ({
+      scrollToTop: onScrollToTop,
+    }))
+
+    const renderPostsEmpty = useCallback(() => {
+      return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
+    }, [_])
+
+    return (
+      <View>
+        <Feed
+          feed={feed}
+          pollInterval={60e3}
+          scrollElRef={scrollElRef}
+          renderEmptyState={renderPostsEmpty}
+          headerOffset={headerHeight}
+        />
+      </View>
+    )
+  },
+)