[Starter Packs] Posts tab (#4660)

* [Starter Packs] Posts tab

* oops

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

src/screens/StarterPack/StarterPackScreen.tsx

@@ -55,6 +55,7 @@ import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
 import {FeedsList} from '#/components/StarterPack/Main/FeedsList'
+import {PostsList} from '#/components/StarterPack/Main/PostsList'
 import {ProfilesList} from '#/components/StarterPack/Main/ProfilesList'
 import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog'
 import {ShareDialog} from '#/components/StarterPack/ShareDialog'
@@ -132,9 +133,14 @@ function StarterPackScreenInner({
   >
   moderationOpts: ModerationOpts
 }) {
+  const showPeopleTab = Boolean(starterPack.list)
+  const showFeedsTab = Boolean(starterPack.feeds?.length)
+  const showPostsTab = Boolean(starterPack.list)
+
   const tabs = [
-    ...(starterPack.list ? ['People'] : []),
+    ...(showPeopleTab ? ['People'] : []),
-    ...(starterPack.feeds?.length ? ['Feeds'] : []),
+    ...(showFeedsTab ? ['Feeds'] : []),
+    ...(showPostsTab ? ['Posts'] : []),
   ]
 
   const qrCodeDialogControl = useDialogControl()
@@ -180,10 +186,9 @@ function StarterPackScreenInner({
               onOpenShareDialog={onOpenShareDialog}
             />
           )}>
-          {starterPack.list != null
+          {showPeopleTab
             ? ({headerHeight, scrollElRef}) => (
                 <ProfilesList
-                  key={0}
                   // Validated above
                   listUri={starterPack!.list!.uri}
                   headerHeight={headerHeight}
@@ -194,10 +199,9 @@ function StarterPackScreenInner({
                 />
               )
             : null}
-          {starterPack.feeds != null
+          {showFeedsTab
             ? ({headerHeight, scrollElRef}) => (
                 <FeedsList
-                  key={1}
                   // @ts-expect-error ?
                   feeds={starterPack?.feeds}
                   headerHeight={headerHeight}
@@ -206,6 +210,18 @@ function StarterPackScreenInner({
                 />
               )
             : null}
+          {showPostsTab
+            ? ({headerHeight, scrollElRef}) => (
+                <PostsList
+                  // Validated above
+                  listUri={starterPack!.list!.uri}
+                  headerHeight={headerHeight}
+                  // @ts-expect-error
+                  scrollElRef={scrollElRef}
+                  moderationOpts={moderationOpts}
+                />
+              )
+            : null}
         </PagerWithHeader>
       </View>
 

src/state/preferences/feed-tuners.tsx

@@ -19,7 +19,34 @@ export function useFeedTuners(feedDesc: FeedDescriptor) {
       ]
     }
     if (feedDesc.startsWith('list')) {
-      return [FeedTuner.dedupReposts]
+      const feedTuners = []
+
+      if (feedDesc.endsWith('|as_following')) {
+        // Same as Following tuners below, copypaste for now.
+        if (preferences?.feedViewPrefs.hideReposts) {
+          feedTuners.push(FeedTuner.removeReposts)
+        } else {
+          feedTuners.push(FeedTuner.dedupReposts)
+        }
+        if (preferences?.feedViewPrefs.hideReplies) {
+          feedTuners.push(FeedTuner.removeReplies)
+        } else {
+          feedTuners.push(
+            FeedTuner.thresholdRepliesOnly({
+              userDid: currentAccount?.did || '',
+              minLikes: preferences?.feedViewPrefs.hideRepliesByLikeCount || 0,
+              followedOnly:
+                !!preferences?.feedViewPrefs.hideRepliesByUnfollowed,
+            }),
+          )
+        }
+        if (preferences?.feedViewPrefs.hideQuotePosts) {
+          feedTuners.push(FeedTuner.removeQuotePosts)
+        }
+      } else {
+        feedTuners.push(FeedTuner.dedupReposts)
+      }
+      return feedTuners
     }
     if (feedDesc === 'following') {
       const feedTuners = []
@@ -29,7 +56,6 @@ export function useFeedTuners(feedDesc: FeedDescriptor) {
       } else {
         feedTuners.push(FeedTuner.dedupReposts)
       }
-
       if (preferences?.feedViewPrefs.hideReplies) {
         feedTuners.push(FeedTuner.removeReplies)
       } else {
@@ -41,7 +67,6 @@ export function useFeedTuners(feedDesc: FeedDescriptor) {
           }),
         )
       }
-
       if (preferences?.feedViewPrefs.hideQuotePosts) {
         feedTuners.push(FeedTuner.removeQuotePosts)
       }

src/state/queries/post-feed.ts

@@ -49,6 +49,7 @@ type AuthorFilter =
   | 'posts_with_media'
 type FeedUri = string
 type ListUri = string
+type ListFilter = 'as_following' // Applies current Following settings. Currently client-side.
 
 export type FeedDescriptor =
   | 'following'
@@ -56,6 +57,7 @@ export type FeedDescriptor =
   | `feedgen|${FeedUri}`
   | `likes|${ActorDid}`
   | `list|${ListUri}`
+  | `list|${ListUri}|${ListFilter}`
 export interface FeedParams {
   disableTuner?: boolean
   mergeFeedEnabled?: boolean