From 72a4b26c82e4ac77ae318d0e5f4b8460fa38c90b Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Fri, 15 Dec 2023 01:24:37 +0100
Subject: [PATCH] New refresh logic

---
 src/components/PostView.tsx       |  4 ++--
 src/components/PostsContainer.tsx | 26 ++++++++++++++++++++------
 src/util/style.ts                 | 20 +++++++++++++++++++-
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/components/PostView.tsx b/src/components/PostView.tsx
index c5ea7ea..06f0ba5 100644
--- a/src/components/PostView.tsx
+++ b/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>
   );
 }
diff --git a/src/components/PostsContainer.tsx b/src/components/PostsContainer.tsx
index 50bc8e9..c8f3c4e 100644
--- a/src/components/PostsContainer.tsx
+++ b/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}
diff --git a/src/util/style.ts b/src/util/style.ts
index c80a90b..bb38de0 100644
--- a/src/util/style.ts
+++ b/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,
+  },
 });