New refresh logic

src/components/PostView.tsx

@@ -12,11 +12,11 @@ import { style } from "../util/style";
 export function PostView({ post }: { post: Post }): JSX.Element {
   // WARNING THIS IS NOT ACCEPTABLE WARNING REMOVE WARNING
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [thisPost, setThisPost] = React.useState<Post>(post);
+  // const [thisPost, setThisPost] = React.useState<Post>(post);
 
   return (
     <View style={style.postView}>
-      <Text style={style.postFont}>{thisPost.content}</Text>
+      <Text style={style.postFont}>{post.id + " " + post.content}</Text>
     </View>
   );
 }

src/components/PostsContainer.tsx

@@ -17,20 +17,34 @@ export function PostsContainer(): JSX.Element {
 
   React.useEffect(() => {
     refreshPosts();
+  }, []);
+
+  React.useEffect(() => {
+    fetchMorePosts();
   }, [page]);
 
+  // Full refresh
   function refreshPosts(): void {
     async function fetchPosts(): Promise<void> {
-      const newPosts = await getPostsInterval(page*10, 10)
-      setPostData((oldPosts: Post[]) => [...oldPosts, ...newPosts]);
+      setPage(0);
+      setPostData(await getPostsInterval(0, 10));
+    }
+    setPostData([])
+    fetchPosts();
+  }
+
+  // Incremental fetch, should prune old posts
+  function fetchMorePosts(): void {
+    async function fetchPosts(): Promise<void> {
+      const newPosts = await getPostsInterval(page * 10, 10);
+      setPostData((oldPosts) => [...oldPosts, ...newPosts]);
     }
     fetchPosts();
   }
 
   function onRefresh(): void {
     setRefreshing(true);
-    setPostData([]);
-    setPage(0);
+    refreshPosts();
     setRefreshing(false);
   }
 
@@ -43,8 +57,8 @@ export function PostsContainer(): JSX.Element {
       <VirtualizedList
         data={postData}
         initialNumToRender={4}
-        renderItem={({ item }) => <PostView key={item.id} post={item} />}
-        keyExtractor={(item: Post) => item.id}
+        renderItem={({ item }) => <PostView key={item.id + item.createdAt} post={item} />}
+        keyExtractor={(item: Post) => item.id + item.createdAt}
         getItemCount={getItemCount}
         getItem={getItem}
         onEndReached={handleEndReached}