PWI: Profile (#1982)

* PWI: Profile

* Show replies conditionally

* Dismiss modals on auth action

src/state/session/index.tsx

@@ -9,6 +9,7 @@ import {PUBLIC_BSKY_AGENT} from '#/state/queries'
 import {IS_PROD} from '#/lib/constants'
 import {emitSessionLoaded, emitSessionDropped} from '../events'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
 
 let __globalAgent: BskyAgent = PUBLIC_BSKY_AGENT
 
@@ -520,15 +521,17 @@ export function useSessionApi() {
 export function useRequireAuth() {
   const {hasSession} = useSession()
   const {setShowLoggedOut} = useLoggedOutViewControls()
+  const closeAll = useCloseAllActiveElements()
 
   return React.useCallback(
     (fn: () => void) => {
       if (hasSession) {
         fn()
       } else {
+        closeAll()
         setShowLoggedOut(true)
       }
     },
-    [hasSession, setShowLoggedOut],
+    [hasSession, setShowLoggedOut, closeAll],
   )
 }

src/view/com/profile/ProfileHeader.tsx

@@ -51,6 +51,7 @@ import {s, colors} from 'lib/styles'
 import {logger} from '#/logger'
 import {useSession} from '#/state/session'
 import {Shadow} from '#/state/cache/types'
+import {useRequireAuth} from '#/state/session'
 
 interface Props {
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> | null
@@ -113,7 +114,8 @@ let ProfileHeaderLoaded = ({
 }: LoadedProps): React.ReactNode => {
   const pal = usePalette('default')
   const palInverted = usePalette('inverted')
-  const {currentAccount} = useSession()
+  const {currentAccount, hasSession} = useSession()
+  const requireAuth = useRequireAuth()
   const {_} = useLingui()
   const {openModal} = useModalControls()
   const {openLightbox} = useLightboxControls()
@@ -150,7 +152,8 @@ let ProfileHeaderLoaded = ({
     }
   }, [openLightbox, profile, moderation])
 
-  const onPressFollow = async () => {
+  const onPressFollow = () => {
+    requireAuth(async () => {
       try {
         track('ProfileHeader:FollowButtonClicked')
         await queueFollow()
@@ -165,9 +168,11 @@ let ProfileHeaderLoaded = ({
           Toast.show(`There was an issue! ${e.toString()}`)
         }
       }
+    })
   }
 
-  const onPressUnfollow = async () => {
+  const onPressUnfollow = () => {
+    requireAuth(async () => {
       try {
         track('ProfileHeader:UnfollowButtonClicked')
         await queueUnfollow()
@@ -182,6 +187,7 @@ let ProfileHeaderLoaded = ({
           Toast.show(`There was an issue! ${e.toString()}`)
         }
       }
+    })
   }
 
   const onPressEditProfile = React.useCallback(() => {
@@ -303,6 +309,7 @@ let ProfileHeaderLoaded = ({
         },
       },
     ]
+    if (hasSession) {
       items.push({label: 'separator'})
       items.push({
         testID: 'profileHeaderDropdownListAddRemoveBtn',
@@ -366,9 +373,11 @@ let ProfileHeaderLoaded = ({
           },
         })
       }
+    }
     return items
   }, [
     isMe,
+    hasSession,
     profile.viewer?.muted,
     profile.viewer?.blocking,
     profile.viewer?.blockingByList,
@@ -421,7 +430,7 @@ let ProfileHeaderLoaded = ({
             )
           ) : !profile.viewer?.blockedBy ? (
             <>
-              {!isProfilePreview && (
+              {!isProfilePreview && hasSession && (
                 <TouchableOpacity
                   testID="suggestedFollowsBtn"
                   onPress={() => setShowSuggestedFollows(!showSuggestedFollows)}

src/view/screens/Profile.tsx

@@ -155,23 +155,27 @@ function ProfileScreenLoaded({
   )
 
   const isMe = profile.did === currentAccount?.did
+  const showRepliesTab = hasSession
   const showLikesTab = isMe
-  const showFeedsTab = isMe || extraInfoQuery.data?.hasFeedgens
-  const showListsTab = isMe || extraInfoQuery.data?.hasLists
+  const showFeedsTab = hasSession && (isMe || extraInfoQuery.data?.hasFeedgens)
+  const showListsTab = hasSession && (isMe || extraInfoQuery.data?.hasLists)
   const sectionTitles = useMemo<string[]>(() => {
     return [
       'Posts',
-      'Posts & Replies',
+      showRepliesTab ? 'Posts & Replies' : undefined,
       'Media',
       showLikesTab ? 'Likes' : undefined,
       showFeedsTab ? 'Feeds' : undefined,
       showListsTab ? 'Lists' : undefined,
     ].filter(Boolean) as string[]
-  }, [showLikesTab, showFeedsTab, showListsTab])
+  }, [showRepliesTab, showLikesTab, showFeedsTab, showListsTab])
 
   let nextIndex = 0
   const postsIndex = nextIndex++
-  const repliesIndex = nextIndex++
+  let repliesIndex: number | null = null
+  if (showRepliesTab) {
+    repliesIndex = nextIndex++
+  }
   const mediaIndex = nextIndex++
   let likesIndex: number | null = null
   if (showLikesTab) {
@@ -282,7 +286,14 @@ function ProfileScreenLoaded({
             }
           />
         )}
-        {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
+        {showRepliesTab
+          ? ({
+              onScroll,
+              headerHeight,
+              isFocused,
+              isScrolledDown,
+              scrollElRef,
+            }) => (
               <FeedSection
                 ref={repliesSectionRef}
                 feed={`author|${profile.did}|posts_with_replies`}
@@ -294,7 +305,8 @@ function ProfileScreenLoaded({
                   scrollElRef as React.MutableRefObject<FlatList<any> | null>
                 }
               />
-        )}
+            )
+          : null}
         {({onScroll, headerHeight, isFocused, isScrolledDown, scrollElRef}) => (
           <FeedSection
             ref={mediaSectionRef}