Optimistic hidden replies (#4977)

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

@@ -3,12 +3,7 @@ import {StyleSheet, useWindowDimensions, View} from 'react-native'
 import {runOnJS} from 'react-native-reanimated'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {
-  AppBskyFeedDefs,
-  AppBskyFeedPost,
-  AppBskyFeedThreadgate,
-  AtUri,
-} from '@atproto/api'
+import {AppBskyFeedDefs, AppBskyFeedThreadgate} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -28,9 +23,9 @@ import {
   usePostThreadQuery,
 } from '#/state/queries/post-thread'
 import {usePreferencesQuery} from '#/state/queries/preferences'
-import {useThreadgateRecordQuery} from '#/state/queries/threadgate'
 import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell'
+import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {useMinimalShellFabTransform} from 'lib/hooks/useMinimalShellTransform'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
@@ -108,7 +103,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
     isError: isThreadError,
     error: threadError,
     refetch,
-    data: thread,
+    data: {thread, threadgate} = {},
   } = usePostThreadQuery(uri)
 
   const treeView = React.useMemo(
@@ -119,26 +114,11 @@ export function PostThread({uri}: {uri: string | undefined}) {
   )
   const rootPost = thread?.type === 'post' ? thread.post : undefined
   const rootPostRecord = thread?.type === 'post' ? thread.record : undefined
-  const replyRef =
-    rootPostRecord && AppBskyFeedPost.isRecord(rootPostRecord)
-      ? rootPostRecord.reply
-      : undefined
-  const rootPostUri = replyRef ? replyRef.root.uri : rootPost?.uri
-
-  const isOP =
-    currentAccount &&
-    rootPostUri &&
-    currentAccount?.did === new AtUri(rootPostUri).host
-  const initialThreadgateRecord = rootPost?.threadgate?.record as
+  const threadgateRecord = threadgate?.record as
     | AppBskyFeedThreadgate.Record
     | undefined
-  const {data: threadgateRecord} = useThreadgateRecordQuery({
-    /**
-     * If the user is the OP and we have a root post, fetch the threadgate.
-     */
-    enabled: Boolean(isOP && rootPostUri),
-    postUri: rootPostUri,
-    initialData: initialThreadgateRecord,
+  const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
+    threadgateRecord,
   })
 
   const moderationOpts = useModerationOpts()
@@ -194,9 +174,6 @@ export function PostThread({uri}: {uri: string | undefined}) {
   const skeleton = React.useMemo(() => {
     const threadViewPrefs = preferences?.threadViewPrefs
     if (!threadViewPrefs || !thread) return null
-    const threadgateRecordHiddenReplies = new Set<string>(
-      threadgateRecord?.hiddenReplies || [],
-    )
 
     return createThreadSkeleton(
       sortThread(
@@ -205,13 +182,13 @@ export function PostThread({uri}: {uri: string | undefined}) {
         threadModerationCache,
         currentDid,
         justPostedUris,
-        threadgateRecordHiddenReplies,
+        threadgateHiddenReplies,
       ),
       currentDid,
       treeView,
       threadModerationCache,
       hiddenRepliesState !== HiddenRepliesState.Hide,
-      threadgateRecordHiddenReplies,
+      threadgateHiddenReplies,
     )
   }, [
     thread,
@@ -221,7 +198,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
     threadModerationCache,
     hiddenRepliesState,
     justPostedUris,
-    threadgateRecord,
+    threadgateHiddenReplies,
   ])
 
   const error = React.useMemo(() => {

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

@@ -17,6 +17,7 @@ import {useLanguagePrefs} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {ThreadPost} from '#/state/queries/post-thread'
 import {useComposerControls} from '#/state/shell/composer'
+import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
 import {MAX_POST_LINES} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -206,24 +207,22 @@ let PostThreadItemLoaded = ({
     return makeProfileLink(post.author, 'post', urip.rkey, 'reposted-by')
   }, [post.uri, post.author])
   const repostsTitle = _(msg`Reposts of this post`)
+  const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
+    threadgateRecord,
+  })
   const additionalPostAlerts: AppModerationCause[] = React.useMemo(() => {
-    const isPostHiddenByThreadgate = threadgateRecord?.hiddenReplies?.includes(
-      post.uri,
-    )
-    const isControlledByViewer =
-      threadgateRecord &&
-      new AtUri(threadgateRecord.post).host === currentAccount?.did
-    if (!isControlledByViewer) return []
-    return threadgateRecord && isPostHiddenByThreadgate
+    const isPostHiddenByThreadgate = threadgateHiddenReplies.has(post.uri)
+    const isControlledByViewer = new AtUri(rootUri).host === currentAccount?.did
+    return isControlledByViewer && isPostHiddenByThreadgate
       ? [
           {
             type: 'reply-hidden',
-            source: {type: 'user', did: new AtUri(threadgateRecord.post).host},
+            source: {type: 'user', did: currentAccount?.did},
             priority: 6,
           },
         ]
       : []
-  }, [post, threadgateRecord, currentAccount?.did])
+  }, [post, currentAccount?.did, threadgateHiddenReplies, rootUri])
   const quotesHref = React.useMemo(() => {
     const urip = new AtUri(post.uri)
     return makeProfileLink(post.author, 'post', urip.rkey, 'quotes')