Support refreshing threads

Changelog: enhancement

Author: brandon-futo

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

@@ -1,21 +1,21 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { RefreshControl, useWindowDimensions, View } from 'react-native';
 import { type PostData } from '@/src/common/lib/polycentric-hooks';
 import { Post } from './Post';
 import { useThread } from './hooks/useThread';
 import { Atoms } from '@/src/common/theme';
 import { ComposerInput } from '../composer';
 import { List, ListProps } from '@/src/common/components/List';
+import { isWeb } from '@/src/common/util/platform';
 
 type ThreadListProps = Omit<ListProps<PostData>, 'data' | 'renderItem'> & {
   post: PostData;
 };
 
 export function ThreadList({ post, ...rest }: ThreadListProps) {
-  const [refreshing, setRefreshing] = useState(false);
   const { height: windowHeight } = useWindowDimensions();
 
-  const { thread } = useThread(post);
+  const thread = useThread(post);
 
   // Mount the subject by itself first.
   // Other items may or may not be available.
@@ -27,16 +27,11 @@ export function ThreadList({ post, ...rest }: ThreadListProps) {
 
   const items = useMemo(() => {
     if (!isFirstLayoutComplete) return [post];
-    return thread.length > 0 ? thread : [post];
-  }, [isFirstLayoutComplete, thread, post]);
+    return thread.items.length > 0 ? thread.items : [post];
+  }, [isFirstLayoutComplete, thread.items, post]);
 
   const subjectIndex = items.findIndex((p) => p.id === post.id);
 
-  const handleRefresh = useCallback(() => {
-    setRefreshing(true);
-    setTimeout(() => setRefreshing(false), 0);
-  }, []);
-
   return (
     <List
       {...rest}
@@ -67,7 +62,12 @@ export function ThreadList({ post, ...rest }: ThreadListProps) {
       }}
       ListFooterComponent={<View style={{ height: windowHeight }} />}
       refreshControl={
-        <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
+        !isWeb ? (
+          <RefreshControl
+            refreshing={thread.isRefreshing}
+            onRefresh={thread.refresh}
+          />
+        ) : undefined
       }
     />
   );

apps/polycentric/src/features/post/hooks/useThread.ts

@@ -12,9 +12,11 @@ import {
 } from '@/src/common/lib/polycentric-hooks';
 import {
   getQueryCache,
+  RefreshStrategy,
   setQueryCache,
   useQuery,
 } from '@/src/common/query/hooks/useQuery';
+import { FeedHookResult, NOOP } from '../../feed/hooks/types';
 
 const DUMMY_EVENT_KEY: EventKey = {
   collection: COLLECTION.FEED,
@@ -33,7 +35,7 @@ export function threadQueryKey(parentId: string, limit = 0): string[] {
 export function useThread(
   post: PostData | undefined,
   options?: { limit?: number },
-): { thread: PostData[]; isLoading: boolean; error: Error | null } {
+): FeedHookResult {
   const eventKey: EventKey = useMemo(() => {
     if (!post) return DUMMY_EVENT_KEY;
 
@@ -57,7 +59,7 @@ export function useThread(
     !!post,
   );
 
-  const thread = useMemo(() => {
+  const items = useMemo(() => {
     if (!query.data) return [];
     const response = v2.GetPostThreadResponse.fromBinary(
       new Uint8Array(query.data),
@@ -71,9 +73,14 @@ export function useThread(
   }, [query.data]);
 
   return {
-    thread,
+    items,
     isLoading: query.isLoading,
+    isRefreshing: query.hasPendingRefresh,
     error: query.error ? new Error(query.error) : null,
+    refresh: () => query.refresh(RefreshStrategy.Lazy),
+    // TODO: paginate threads
+    loadMore: NOOP,
+    hasMore: false,
   };
 }