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}

src/util/style.ts

@@ -10,7 +10,6 @@ const colorScheme = {
 
 export const style = StyleSheet.create({
   app: {
-    // Outermost container
     flex: 1,
     backgroundColor: colorScheme.background, // For the "entire" app
     alignItems: "center",
@@ -44,4 +43,23 @@ export const style = StyleSheet.create({
     fontWeight: "bold",
     color: colorScheme.postFont,
   },
+  newPostContainer: {
+    backgroundColor: colorScheme.background,
+    margin: 0,
+    padding: 0,
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  newPostInput: {
+    backgroundColor: colorScheme.postBox,
+    width: "100%",
+    height: "100%",
+    padding: 10,
+    color: colorScheme.postFont,
+  },
+  errorText: {
+    color: colorScheme.error,
+  },
 });