Unique key fix

src/components/PostsContainer.tsx

@@ -6,48 +6,45 @@ import { style } from "../util/style";
 import { SafeAreaView } from "react-native";
 import { VirtualizedList } from "react-native";
 
+const WINDOW_SIZE = 20;
+
 export function PostsContainer({ navigation }): JSX.Element {
   const [postData, setPostData] = React.useState<Post[]>([]);
-  const [page, setPage] = React.useState<number>(0);
+  const [offset, setOffset] = React.useState<number>(0);
   const [refreshing, setRefreshing] = React.useState<boolean>(false);
 
   const handleEndReached = (): void => {
-    setPage((prevPage) => prevPage + 1);
+    setOffset(offset + WINDOW_SIZE);
+    fetchMorePosts();
   };
 
+  function onRefresh(): void {
+    refreshPosts();
+  }
+
   React.useEffect(() => {
     refreshPosts();
   }, []);
 
-  React.useEffect(() => {
-    fetchMorePosts();
-  }, [page]);
-
   // Full refresh
   function refreshPosts(): void {
-    async function fetchPosts(): Promise<void> {
+    setRefreshing(true);
-      setPage(0);
-      setPostData(await getPostsInterval(0, 10));
-    }
     setPostData([]);
+    setOffset(WINDOW_SIZE);
+    async function fetchPosts(): Promise<void> {
+      setPostData(await getPostsInterval(0, WINDOW_SIZE));
+    }
     fetchPosts();
+    setRefreshing(false);
   }
 
-  // Incremental fetch, should prune old posts
   function fetchMorePosts(): void {
     async function fetchPosts(): Promise<void> {
-      const newPosts = await getPostsInterval(page * 10, 10);
+      setPostData([...postData, ...(await getPostsInterval(offset, WINDOW_SIZE))]);
-      setPostData((oldPosts) => [...oldPosts, ...newPosts]);
     }
     fetchPosts();
   }
 
-  function onRefresh(): void {
-    setRefreshing(true);
-    refreshPosts();
-    setRefreshing(false);
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const getItemCount = (_data: unknown): number => postData.length;
 
@@ -60,10 +57,8 @@ export function PostsContainer({ navigation }): JSX.Element {
         <VirtualizedList
           data={postData}
           initialNumToRender={4}
-          renderItem={({ item }) => (
+          renderItem={({ item }) => <PostView key={item.id} post={item} />}
-            <PostView key={item.id + item.createdAt} post={item} />
+          keyExtractor={(item: Post) => item.id}
-          )}
-          keyExtractor={(item: Post) => item.id + item.createdAt}
           getItemCount={getItemCount}
           getItem={getItem}
           onEndReached={handleEndReached}
@@ -88,7 +83,5 @@ function NavButton({
   onPress: () => void;
   text: string;
 }): JSX.Element {
-  return (
+  return <Button title={text} onPress={onPress} />;
-    <Button title={text} onPress={onPress} />
-  );
 }