Post source handling updates (#8472)

* Add debugs

* Key post-source using URI with handle

* Enhance

* EnHANCE

* ENHANCE

* ENHANCEEEECEE

* ᵉⁿʰᵃⁿᶜᵉ

* enhance

src/App.native.tsx

@@ -58,7 +58,6 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
-import {Provider as UnstablePostSourceProvider} from '#/state/unstable-post-source'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
@@ -151,16 +150,14 @@ function InnerApp() {
                                           <MutedThreadsProvider>
                                             <ProgressGuideProvider>
                                               <ServiceAccountManager>
-                                                <UnstablePostSourceProvider>
+                                                <GestureHandlerRootView
-                                                  <GestureHandlerRootView
+                                                  style={s.h100pct}>
-                                                    style={s.h100pct}>
+                                                  <IntentDialogProvider>
-                                                    <IntentDialogProvider>
+                                                    <TestCtrls />
-                                                      <TestCtrls />
+                                                    <Shell />
-                                                      <Shell />
+                                                    <NuxDialogs />
-                                                      <NuxDialogs />
+                                                  </IntentDialogProvider>
-                                                    </IntentDialogProvider>
+                                                </GestureHandlerRootView>
-                                                  </GestureHandlerRootView>
-                                                </UnstablePostSourceProvider>
                                               </ServiceAccountManager>
                                             </ProgressGuideProvider>
                                           </MutedThreadsProvider>

src/App.web.tsx

@@ -48,7 +48,6 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
-import {Provider as UnstablePostSourceProvider} from '#/state/unstable-post-source'
 import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
@@ -132,12 +131,10 @@ function InnerApp() {
                                             <SafeAreaProvider>
                                               <ProgressGuideProvider>
                                                 <ServiceConfigProvider>
-                                                  <UnstablePostSourceProvider>
+                                                  <IntentDialogProvider>
-                                                    <IntentDialogProvider>
+                                                    <Shell />
-                                                      <Shell />
+                                                    <NuxDialogs />
-                                                      <NuxDialogs />
+                                                  </IntentDialogProvider>
-                                                    </IntentDialogProvider>
-                                                  </UnstablePostSourceProvider>
                                                 </ServiceConfigProvider>
                                               </ProgressGuideProvider>
                                             </SafeAreaProvider>

src/logger/types.ts

@@ -10,6 +10,8 @@ export enum LogContext {
   ConversationAgent = 'conversation-agent',
   DMsAgent = 'dms-agent',
   ReportDialog = 'report-dialog',
+  FeedFeedback = 'feed-feedback',
+  PostSource = 'post-source',
 
   /**
    * METRIC IS FOR INTERNAL USE ONLY, don't create any other loggers using this

src/state/feed-feedback.tsx

@@ -12,7 +12,7 @@ import throttle from 'lodash.throttle'
 
 import {FEEDBACK_FEEDS, STAGING_FEEDS} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
-import {logger} from '#/logger'
+import {Logger} from '#/logger'
 import {
   type FeedDescriptor,
   type FeedPostSliceItem,
@@ -20,6 +20,8 @@ import {
 import {getItemsForFeedback} from '#/view/com/posts/PostFeed'
 import {useAgent} from './session'
 
+const logger = Logger.create(Logger.Context.FeedFeedback)
+
 export type StateContext = {
   enabled: boolean
   onItemSeen: (item: any) => void
@@ -89,6 +91,7 @@ export function useFeedFeedback(
     }
     sendOrAggregateInteractionsForStats(aggregatedStats.current, interactions)
     throttledFlushAggregatedStats()
+    logger.debug('flushed')
   }, [agent, throttledFlushAggregatedStats, feed])
 
   const sendToFeed = useMemo(
@@ -141,6 +144,9 @@ export function useFeedFeedback(
       if (!enabled) {
         return
       }
+      logger.debug('sendInteraction', {
+        ...interaction,
+      })
       if (!history.current.has(interaction)) {
         history.current.add(interaction)
         queue.current.add(toString(interaction))

src/state/unstable-post-source.tsx

@@ -1,62 +1,97 @@
-import {createContext, useCallback, useContext, useRef, useState} from 'react'
+import {useEffect, useId, useState} from 'react'
-import {type AppBskyFeedDefs} from '@atproto/api'
+import {type AppBskyFeedDefs, AtUri} from '@atproto/api'
 
-import {type FeedDescriptor} from './queries/post-feed'
+import {Logger} from '#/logger'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
 
 /**
- * For passing the source of the post (i.e. the original post, from the feed) to the threadview,
+ * Separate logger for better debugging
- * without using query params. Deliberately unstable to avoid using query params, use for FeedFeedback
- * and other ephemeral non-critical systems.
  */
+const logger = Logger.create(Logger.Context.PostSource)
 
-type Source = {
+export type PostSource = {
   post: AppBskyFeedDefs.FeedViewPost
   feed?: FeedDescriptor
 }
 
-const SetUnstablePostSourceContext = createContext<
+/**
-  (key: string, source: Source) => void
+ * A cache of sources that will be consumed by the post thread view. This is
->(() => {})
+ * cleaned up any time a source is consumed.
-const ConsumeUnstablePostSourceContext = createContext<
+ */
-  (uri: string) => Source | undefined
+const transientSources = new Map<string, PostSource>()
->(() => undefined)
 
-export function Provider({children}: {children: React.ReactNode}) {
+/**
-  const sourcesRef = useRef<Map<string, Source>>(new Map())
+ * A cache of sources that have been consumed by the post thread view. This is
+ * not cleaned up, but because we use a new ID for each post thread view that
+ * consumes a source, this is never reused unless a user navigates back to a
+ * post thread view that has not been dropped from memory.
+ */
+const consumedSources = new Map<string, PostSource>()
 
-  const setUnstablePostSource = useCallback((key: string, source: Source) => {
+/**
-    sourcesRef.current.set(key, source)
+ * For stashing the feed that the user was browsing when they clicked on a post.
-  }, [])
+ *
-
+ * Used for FeedFeedback and other ephemeral non-critical systems.
-  const consumeUnstablePostSource = useCallback((uri: string) => {
+ */
-    const source = sourcesRef.current.get(uri)
+export function setUnstablePostSource(key: string, source: PostSource) {
-    if (source) {
+  assertValid(
-      sourcesRef.current.delete(uri)
+    key,
-    }
+    `setUnstablePostSource key should be a URI containing a handle, received ${key} — use buildPostSourceKey`,
-    return source
-  }, [])
-
-  return (
-    <SetUnstablePostSourceContext.Provider value={setUnstablePostSource}>
-      <ConsumeUnstablePostSourceContext.Provider
-        value={consumeUnstablePostSource}>
-        {children}
-      </ConsumeUnstablePostSourceContext.Provider>
-    </SetUnstablePostSourceContext.Provider>
   )
-}
+  logger.debug('set', {key, source})
-
+  transientSources.set(key, source)
-export function useSetUnstablePostSource() {
-  return useContext(SetUnstablePostSourceContext)
 }
 
 /**
- * DANGER - This hook is unstable and should only be used for FeedFeedback
+ * This hook is unstable and should only be used for FeedFeedback and other
- * and other ephemeral non-critical systems. Does not change when the URI changes.
+ * ephemeral non-critical systems. Views that use this hook will continue to
+ * return a reference to the same source until those views are dropped from
+ * memory.
  */
-export function useUnstablePostSource(uri: string) {
+export function useUnstablePostSource(key: string) {
-  const consume = useContext(ConsumeUnstablePostSourceContext)
+  const id = useId()
+  const [source] = useState(() => {
+    assertValid(
+      key,
+      `consumeUnstablePostSource key should be a URI containing a handle, received ${key} — use buildPostSourceKey`,
+    )
+    const source = consumedSources.get(id) || transientSources.get(key)
+    if (source) {
+      logger.debug('consume', {id, key, source})
+      transientSources.delete(key)
+      consumedSources.set(id, source)
+    }
+    return source
+  })
+
+  useEffect(() => {
+    return () => {
+      consumedSources.delete(id)
+      logger.debug('cleanup', {id})
+    }
+  }, [id])
 
-  const [source] = useState(() => consume(uri))
   return source
 }
+
+/**
+ * Builds a post source key. This (atm) is a URI where the `host` is the post
+ * author's handle, not DID.
+ */
+export function buildPostSourceKey(key: string, handle: string) {
+  const urip = new AtUri(key)
+  urip.host = handle
+  return urip.toString()
+}
+
+/**
+ * Just a lil dev helper
+ */
+function assertValid(key: string, message: string) {
+  if (__DEV__) {
+    const urip = new AtUri(key)
+    if (urip.host.startsWith('did:')) {
+      throw new Error(message)
+    }
+  }
+}

src/view/com/post-thread/PostThread.tsx

@@ -22,6 +22,7 @@ import {ScrollProvider} from '#/lib/ScrollContext'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {cleanError} from '#/lib/strings/errors'
 import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {useFeedFeedback} from '#/state/feed-feedback'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   fillThreadModerationCache,
@@ -37,6 +38,7 @@ import {useSetThreadViewPreferencesMutation} from '#/state/queries/preferences'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useSession} from '#/state/session'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
+import {useUnstablePostSource} from '#/state/unstable-post-source'
 import {List, type ListMethods} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -93,7 +95,7 @@ const keyExtractor = (item: RowItem) => {
   return item._reactKey
 }
 
-export function PostThread({uri}: {uri: string | undefined}) {
+export function PostThread({uri}: {uri: string}) {
   const {hasSession, currentAccount} = useSession()
   const {_} = useLingui()
   const t = useTheme()
@@ -104,6 +106,8 @@ export function PostThread({uri}: {uri: string | undefined}) {
     HiddenRepliesState.Hide,
   )
   const headerRef = React.useRef<View | null>(null)
+  const anchorPostSource = useUnstablePostSource(uri)
+  const feedFeedback = useFeedFeedback(anchorPostSource?.feed, hasSession)
 
   const {data: preferences} = usePreferencesQuery()
   const {
@@ -395,10 +399,18 @@ export function PostThread({uri}: {uri: string | undefined}) {
   )
 
   const {openComposer} = useOpenComposer()
-  const onPressReply = React.useCallback(() => {
+  const onReplyToAnchor = React.useCallback(() => {
     if (thread?.type !== 'post') {
       return
     }
+    if (anchorPostSource) {
+      feedFeedback.sendInteraction({
+        item: thread.post.uri,
+        event: 'app.bsky.feed.defs#interactionReply',
+        feedContext: anchorPostSource.post.feedContext,
+        reqId: anchorPostSource.post.reqId,
+      })
+    }
     openComposer({
       replyTo: {
         uri: thread.post.uri,
@@ -410,7 +422,14 @@ export function PostThread({uri}: {uri: string | undefined}) {
       },
       onPost: onPostReply,
     })
-  }, [openComposer, thread, onPostReply, threadModerationCache])
+  }, [
+    openComposer,
+    thread,
+    onPostReply,
+    threadModerationCache,
+    anchorPostSource,
+    feedFeedback,
+  ])
 
   const canReply = !error && rootPost && !rootPost.viewer?.replyDisabled
   const hasParents =
@@ -423,7 +442,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
       return (
         <View>
           {!isMobile && (
-            <PostThreadComposePrompt onPressCompose={onPressReply} />
+            <PostThreadComposePrompt onPressCompose={onReplyToAnchor} />
           )}
         </View>
       )
@@ -511,6 +530,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
             }
             onPostReply={onPostReply}
             hideTopBorder={index === 0 && !item.ctx.isParentLoading}
+            anchorPostSource={anchorPostSource}
           />
         </View>
       )
@@ -586,7 +606,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
         />
       </ScrollProvider>
       {isMobile && canReply && hasSession && (
-        <MobileComposePrompt onPressReply={onPressReply} />
+        <MobileComposePrompt onPressReply={onReplyToAnchor} />
       )}
     </>
   )

src/view/com/post-thread/PostThreadItem.tsx

@@ -40,7 +40,7 @@ import {useLanguagePrefs} from '#/state/preferences'
 import {type ThreadPost} from '#/state/queries/post-thread'
 import {useSession} from '#/state/session'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
-import {useUnstablePostSource} from '#/state/unstable-post-source'
+import {type PostSource} from '#/state/unstable-post-source'
 import {PostThreadFollowBtn} from '#/view/com/post-thread/PostThreadFollowBtn'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {Link, TextLink} from '#/view/com/util/Link'
@@ -87,6 +87,7 @@ export function PostThreadItem({
   onPostReply,
   hideTopBorder,
   threadgateRecord,
+  anchorPostSource,
 }: {
   post: AppBskyFeedDefs.PostView
   record: AppBskyFeedPost.Record
@@ -104,6 +105,7 @@ export function PostThreadItem({
   onPostReply: (postUri: string | undefined) => void
   hideTopBorder?: boolean
   threadgateRecord?: AppBskyFeedThreadgate.Record
+  anchorPostSource?: PostSource
 }) {
   const postShadowed = usePostShadow(post)
   const richText = useMemo(
@@ -139,6 +141,7 @@ export function PostThreadItem({
         onPostReply={onPostReply}
         hideTopBorder={hideTopBorder}
         threadgateRecord={threadgateRecord}
+        anchorPostSource={anchorPostSource}
       />
     )
   }
@@ -184,6 +187,7 @@ let PostThreadItemLoaded = ({
   onPostReply,
   hideTopBorder,
   threadgateRecord,
+  anchorPostSource,
 }: {
   post: Shadow<AppBskyFeedDefs.PostView>
   record: AppBskyFeedPost.Record
@@ -202,10 +206,10 @@ let PostThreadItemLoaded = ({
   onPostReply: (postUri: string | undefined) => void
   hideTopBorder?: boolean
   threadgateRecord?: AppBskyFeedThreadgate.Record
+  anchorPostSource?: PostSource
 }): React.ReactNode => {
   const {currentAccount, hasSession} = useSession()
-  const source = useUnstablePostSource(post.uri)
+  const feedFeedback = useFeedFeedback(anchorPostSource?.feed, hasSession)
-  const feedFeedback = useFeedFeedback(source?.feed, hasSession)
 
   const t = useTheme()
   const pal = usePalette('default')
@@ -276,12 +280,12 @@ let PostThreadItemLoaded = ({
   )
 
   const onPressReply = () => {
-    if (source) {
+    if (anchorPostSource && isHighlightedPost) {
       feedFeedback.sendInteraction({
         item: post.uri,
         event: 'app.bsky.feed.defs#interactionReply',
-        feedContext: source.post.feedContext,
+        feedContext: anchorPostSource.post.feedContext,
-        reqId: source.post.reqId,
+        reqId: anchorPostSource.post.reqId,
       })
     }
     openComposer({
@@ -298,23 +302,23 @@ let PostThreadItemLoaded = ({
   }
 
   const onOpenAuthor = () => {
-    if (source) {
+    if (anchorPostSource) {
       feedFeedback.sendInteraction({
         item: post.uri,
         event: 'app.bsky.feed.defs#clickthroughAuthor',
-        feedContext: source.post.feedContext,
+        feedContext: anchorPostSource.post.feedContext,
-        reqId: source.post.reqId,
+        reqId: anchorPostSource.post.reqId,
       })
     }
   }
 
   const onOpenEmbed = () => {
-    if (source) {
+    if (anchorPostSource) {
       feedFeedback.sendInteraction({
         item: post.uri,
         event: 'app.bsky.feed.defs#clickthroughEmbed',
-        feedContext: source.post.feedContext,
+        feedContext: anchorPostSource.post.feedContext,
-        reqId: source.post.reqId,
+        reqId: anchorPostSource.post.reqId,
       })
     }
   }
@@ -325,7 +329,7 @@ let PostThreadItemLoaded = ({
 
   const {isActive: live} = useActorStatus(post.author)
 
-  const reason = source?.post.reason
+  const reason = anchorPostSource?.post.reason
   const viaRepost = useMemo(() => {
     if (AppBskyFeedDefs.isReasonRepost(reason) && reason.uri && reason.cid) {
       return {
@@ -550,8 +554,8 @@ let PostThreadItemLoaded = ({
                   onPostReply={onPostReply}
                   logContext="PostThreadItem"
                   threadgateRecord={threadgateRecord}
-                  feedContext={source?.post?.feedContext}
+                  feedContext={anchorPostSource?.post?.feedContext}
-                  reqId={source?.post?.reqId}
+                  reqId={anchorPostSource?.post?.reqId}
                   viaRepost={viaRepost}
                 />
               </FeedFeedbackProvider>

src/view/com/posts/PostFeedItem.tsx

@@ -36,7 +36,10 @@ import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {unstableCacheProfileView} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
-import {useSetUnstablePostSource} from '#/state/unstable-post-source'
+import {
+  buildPostSourceKey,
+  setUnstablePostSource,
+} from '#/state/unstable-post-source'
 import {FeedNameText} from '#/view/com/util/FeedInfoText'
 import {Link, TextLink, TextLinkOnWebOnly} from '#/view/com/util/Link'
 import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
@@ -176,7 +179,6 @@ let FeedItemInner = ({
     return makeProfileLink(post.author, 'post', urip.rkey)
   }, [post.uri, post.author])
   const {sendInteraction, feedDescriptor} = useFeedFeedbackContext()
-  const unstableSetPostSource = useSetUnstablePostSource()
 
   const onPressReply = () => {
     sendInteraction({
@@ -232,7 +234,7 @@ let FeedItemInner = ({
       reqId,
     })
     unstableCacheProfileView(queryClient, post.author)
-    unstableSetPostSource(post.uri, {
+    setUnstablePostSource(buildPostSourceKey(post.uri, post.author.handle), {
       feed: feedDescriptor,
       post: {
         post,