Improve post threading

Author: markharding

apps/polycentric/src/common/constants/routes.ts

@@ -1,5 +1,5 @@
 import { router } from 'expo-router';
-import { EventKeyRef, PostData } from '../lib/polycentric-hooks';
+import { PostData } from '../lib/polycentric-hooks';
 
 export type OpenComposeOptions = {
   replyTo?: PostData['id'];

apps/polycentric/src/common/lib/polycentric-hooks/helpers.ts

@@ -13,19 +13,6 @@ export function fromBase64(base64: string): Uint8Array {
   return bytes;
 }
 
-/**
- * BigInt-free mirror of `v2.EventKey`. The proto's `sequence` is a `bigint`,
- * which crashes React Native's render logger when any component receives it
- * as a prop — so we carry the sequence as a decimal string through the
- * UI/state layer and only convert back to `bigint` when talking to the core.
- */
-export interface EventKeyRef {
-  collection?: number;
-  identity: string;
-  signedBy?: v2.PublicKey;
-  sequence: string;
-}
-
 export type PostData = {
   /** Hex of the event key */
   id: string;
@@ -42,30 +29,22 @@ export type PostData = {
 
   /** Set when the underlying `v2.Post` carried a `reply`. */
   reply?: {
-    root?: EventKeyRef;
-    parent?: EventKeyRef;
+    /** Hex of the root post's EventKey — same encoding as `PostData.id`. */
+    rootId?: string;
+    /** Hex of the parent post's EventKey — same encoding as `PostData.id`. */
+    parentId?: string;
   };
 
   signedEvent: v2.SignedEvent;
 };
 
-function decodeEventKey(key: v2.EventKey | undefined): EventKeyRef | undefined {
-  if (!key) return undefined;
-  return {
-    collection: key.collection,
-    identity: key.identity,
-    signedBy: key.signedBy,
-    sequence: key.sequence.toString(),
-  };
-}
-
 // A key fingerprint is the first 16 characters of the hex bytes of the key contents
 // It does not include the key type.
 export function getKeyFingerprint(key?: v2.PublicKey): string | undefined {
   if (!key) {
     return undefined;
   }
-  return key.key.toHex().substring(0, 16);
+  return bytesToHex(key.key).substring(0, 16);
 }
 
 /** Decode a v2 EventBundle into PostData, or null if not a post. */
@@ -82,13 +61,17 @@ export function decodePostBundle(bundle: v2.EventBundle): PostData | null {
     );
     if (content.contentBody.oneofKind !== 'post') return null;
 
-    const id = v2.EventKey.toBinary(key).toHex();
+    const id = bytesToHex(v2.EventKey.toBinary(key));
 
     const post = content.contentBody.post;
     const reply = post.reply
       ? {
-          root: decodeEventKey(post.reply.root),
-          parent: decodeEventKey(post.reply.parent),
+          rootId: post.reply.root
+            ? bytesToHex(v2.EventKey.toBinary(post.reply.root))
+            : undefined,
+          parentId: post.reply.parent
+            ? bytesToHex(v2.EventKey.toBinary(post.reply.parent))
+            : undefined,
         }
       : undefined;
 
@@ -106,7 +89,8 @@ export function decodePostBundle(bundle: v2.EventBundle): PostData | null {
         signature: bundle.signedEvent.signature,
       }),
     };
-  } catch {
+  } catch (e) {
+    console.warn('[decodePostBundle] drop: decode threw', e);
     return null;
   }
 }

apps/polycentric/src/common/lib/polycentric-hooks/index.ts

@@ -23,6 +23,9 @@ export {
   type ProfileEditState,
 } from '../../../features/profile/hooks/useProfileEdit';
 
+// Local post injection (composer → live feeds)
+export { useLocalPosts as useLocalPostInjection } from '../../../features/post/hooks/useLocalPosts';
+
 // Helpers
 export {
   decodePostBundle as decodeV2PostBundle,
@@ -45,4 +48,4 @@ export {
   toBase64,
   fromBase64,
 } from './helpers';
-export type { EventKeyRef, PostData } from './helpers';
+export type { PostData } from './helpers';

apps/polycentric/src/features/composer/ComposeSheetInner.tsx

@@ -6,6 +6,7 @@ import {
   TextArea,
 } from '@/src/common/components/primitives';
 import {
+  hexToBytes,
   truncateName,
   useCurrentIdentity,
   usePolycentric,
@@ -67,6 +68,12 @@ export function ComposeSheetInner({
     sequence: BigInt(replyTo?.sequence ?? 0),
   });
 
+  // If replyTo is itself a reply, inherit its root.
+  // Otherwise, replyTo *is* the root.
+  const replyRootEventKey = replyTo?.reply?.rootId
+    ? v2.EventKey.fromBinary(hexToBytes(replyTo.reply.rootId))
+    : replyToEventKey;
+
   const replyAuthorName = useUsername(replyTo?.identity ?? null);
   const replyContent = replyTo?.content ?? '';
   const replyContentPreview =
@@ -156,7 +163,7 @@ export function ComposeSheetInner({
 
       if (isReply) {
         post.reply = {
-          root: replyToEventKey,
+          root: replyRootEventKey,
           parent: replyToEventKey,
         };
       }
@@ -199,6 +206,7 @@ export function ComposeSheetInner({
     dismissSheet,
     isReply,
     replyToEventKey,
+    replyRootEventKey,
     resetComposer,
     setSubmitting,
     setError,

apps/polycentric/src/features/feed/hooks/useAuthorFeed.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { v2 } from '@polycentric/react-native';
 import {
   decodeV2PostBundle,
+  useLocalPostInjection,
   usePolycentricContext,
   type PostData,
 } from '@/src/common/lib/polycentric-hooks';
@@ -48,32 +48,14 @@ export function useAuthorFeed(
     if (identityId) fetchFeed();
   }, [identityId, fetchFeed]);
 
-  // Inject locally-committed posts by this author as soon as they're
-  // committed, before the server round-trip.
-  useEffect(() => {
-    if (!identityId) return;
-    const listener = ({
-      signedEvent,
-      content,
-    }: {
-      signedEvent: v2.SignedEvent;
-      content?: v2.Content;
-    }) => {
-      if (!content) return;
-      const decoded = decodeV2PostBundle(
-        v2.EventBundle.create({
-          signedEvent,
-          serializedContent: { contentBytes: v2.Content.toBinary(content) },
-        }),
-      );
-      if (!decoded || decoded.identity !== identityId) return;
+  useLocalPostInjection({
+    enabled: !!identityId,
+    match: (p) => p.identity === identityId,
+    insert: (decoded) =>
       setItems((prev) =>
         prev.some((p) => p.id === decoded.id) ? prev : [decoded, ...prev],
-      );
-    };
-    client.events.onContentCreated(listener);
-    return () => client.events.offContentCreated(listener);
-  }, [client, identityId]);
+      ),
+  });
 
   return {
     items,

apps/polycentric/src/features/feed/hooks/useExploreFeed.ts

@@ -29,6 +29,7 @@ export function useExploreFeed(options?: {
       }
       setItems(posts);
     } catch (e) {
+      console.warn('[useExploreFeed] fetch failed', e);
       setError(e instanceof Error ? e : new Error(String(e)));
     } finally {
       setIsLoading(false);

apps/polycentric/src/features/feed/hooks/useFollowingFeed.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { v2 } from '@polycentric/react-native';
 import {
   decodeV2PostBundle,
+  useLocalPostInjection,
   usePolycentricContext,
   type PostData,
 } from '@/src/common/lib/polycentric-hooks';
@@ -48,31 +49,13 @@ export function useFollowingFeed(options?: {
     if (enabled) fetchFeed();
   }, [enabled, fetchFeed]);
 
-  // Add locally-committed posts to the top of the feed as soon as
-  // they're committed — before the server round-trip.
-  useEffect(() => {
-    const listener = ({
-      signedEvent,
-      content,
-    }: {
-      signedEvent: v2.SignedEvent;
-      content?: v2.Content;
-    }) => {
-      if (!content) return;
-      const decoded = decodeV2PostBundle(
-        v2.EventBundle.create({
-          signedEvent,
-          serializedContent: { contentBytes: v2.Content.toBinary(content) },
-        }),
-      );
-      if (!decoded) return;
+  useLocalPostInjection({
+    match: () => true,
+    insert: (decoded) =>
       setItems((prev) =>
         prev.some((p) => p.id === decoded.id) ? prev : [decoded, ...prev],
-      );
-    };
-    client.events.onContentCreated(listener);
-    return () => client.events.offContentCreated(listener);
-  }, [client]);
+      ),
+  });
 
   return {
     items,

apps/polycentric/src/features/post/ConversationView.tsx

@@ -1,18 +1,11 @@
-import { useCallback, useMemo, useState } from 'react';
-import {
-  RefreshControl,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import { useCallback, useState } from 'react';
+import { RefreshControl, useWindowDimensions, View } from 'react-native';
 import { FlashList } from '@shopify/flash-list';
 import { type PostData } from '@/src/common/lib/polycentric-hooks';
 import { Post } from './Post';
-import { usePostById } from './hooks/usePostById';
-import { useThreadReplies } from './hooks/useThreadReplies';
+import { useThread } from './hooks/useThread';
 import { Atoms } from '@/src/common/theme';
 import { ComposerInput } from '../composer';
-import { getKeyFingerprint } from '@/src/common/lib/polycentric-hooks/helpers';
 
 interface ConversationViewProps {
   post: PostData;
@@ -22,27 +15,10 @@ export function ConversationView({ post }: ConversationViewProps) {
   const [refreshing, setRefreshing] = useState(false);
   const { height: windowHeight } = useWindowDimensions();
 
-  const { post: rootPost } = usePostById(
-    post.reply?.root?.identity,
-    getKeyFingerprint(post.reply?.root?.signedBy),
-    BigInt(post.reply?.root?.sequence || ''),
-  );
-  const { post: parentPost } = usePostById(
-    post.reply?.parent?.identity,
-    getKeyFingerprint(post.reply?.parent?.signedBy),
-    BigInt(post.reply?.parent?.sequence || ''),
-  );
-  const { replies } = useThreadReplies(post);
+  const { thread } = useThread(post);
 
-  const items = useMemo(() => {
-    const list: PostData[] = [];
-    if (rootPost) list.push(rootPost);
-    // Skip parent if it's the same as root (thread of depth 1).
-    if (parentPost && parentPost.id !== rootPost?.id) list.push(parentPost);
-    list.push(post);
-    list.push(...replies);
-    return list;
-  }, [rootPost, parentPost, post, replies]);
+  // Fall back to rendering just the subject until the server response lands.
+  const items = thread.length > 0 ? thread : [post];
 
   const handleRefresh = useCallback(() => {
     setRefreshing(true);
@@ -53,21 +29,27 @@ export function ConversationView({ post }: ConversationViewProps) {
     <FlashList
       data={items}
       keyExtractor={(p) => p.id}
-      renderItem={({ item, index }) => (
-        <View style={[Atoms.w_full]}>
-          <Post
-            post={item}
-            hideReplyingTo={false}
-            disablePress={item.id === post.id}
-            showThreadLineAbove={item.id === post.id && !!item.reply?.parent}
-            showThreadLineBelow={
-              index < items.length - 1 && !!post.reply?.parent
-            }
-            hideBottomBorder={index < items.length - 1 && !!post.reply?.parent}
-          />
-          {item.id === post.id ? <ComposerInput replyTo={post.id} /> : null}
-        </View>
-      )}
+      renderItem={({ item, index }) => {
+        const above = index > 0 ? items[index - 1] : null;
+        const below = index < items.length - 1 ? items[index + 1] : null;
+        const lineAbove =
+          !!above && item.reply?.parentId === above.id && above.id !== post.id;
+        const lineBelow = !!below && below.reply?.parentId === item.id;
+
+        return (
+          <View style={[Atoms.w_full]}>
+            <Post
+              post={item}
+              hideReplyingTo={false}
+              disablePress={item.id === post.id}
+              showThreadLineAbove={lineAbove}
+              showThreadLineBelow={lineBelow}
+              hideBottomBorder={lineBelow}
+            />
+            {item.id === post.id ? <ComposerInput replyTo={post.id} /> : null}
+          </View>
+        );
+      }}
       ListFooterComponent={<View style={{ height: windowHeight }} />}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />

apps/polycentric/src/features/post/Post.tsx

@@ -99,10 +99,7 @@ export const Post = memo(function Post({
   }, [authorIdentity]);
 
   const handleReply = useCallback(() => {
-    // if (!authorIdentity) return;
-    // const sequence = postIdToSequence(postId);
-    // if (!sequence) return;
-    // openCompose({ replyTo: { identityId: authorIdentity, sequence } });
+    openCompose({ replyTo: post.id });
   }, [authorIdentity, post]);
 
   const handleLike = useCallback(() => {}, []);