Infinite scrolling setup

enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx

@@ -1,17 +1,13 @@
 import { ImageIcon } from "@radix-ui/react-icons";
 import { Box, Card, Heading } from "@radix-ui/themes";
 import { useNavigate } from "react-router-dom";
-import { GetRandomPostsRow } from "../../../@types/PostTypes";
+import { Post } from "../../../@types/PostTypes";
 
-type TPostCard = {
-    post: GetRandomPostsRow;
-};
-
-export default function PostCard({ post }: TPostCard) {
+export default function PostCard(props: Post) {
     const navigate = useNavigate()
 
     const clickHandler = () => {
-        navigate(`/posts/${post.post_id.toString()}`)
+        navigate(`/posts/${props.post_id.toString()}`)
     }
 
     return (
@@ -22,7 +18,7 @@ export default function PostCard({ post }: TPostCard) {
                 </Box>
 
                 <Box className="px-4 pt-2">
-                    <Heading>{post.title}</Heading>
+                    <Heading>{props.title}</Heading>
                 </Box>
             </Box>
         </Card>

enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx

@@ -1,10 +1,10 @@
 import {
     Box,
-    Container,
     Flex,
     Heading,
     ScrollArea,
     Separator,
+    Text,
 } from "@radix-ui/themes";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
@@ -14,7 +14,7 @@ import { SelectedPostsResponse } from "../../@types/PostTypes";
 import { axiosLocalhost } from "../../api/axios/axios";
 import PostCard from "./PostCard/PostCard";
 
-const LIMIT = 3;
+const LIMIT = 5;
 
 export default function RandomPostsPage() {
     const { t } = useTranslation();
@@ -37,33 +37,15 @@ export default function RandomPostsPage() {
             lastPage.next_page_index < 0 ? undefined : lastPage.next_page_index,
     });
 
-    // const { data, refetch } = useQuery({
-    //     queryKey: ["random_posts_key"],
-    //     queryFn: async () => {
-    //         try {
-    //             const response = await axiosLocalhost.get(
-    //                 `/posts/random?limit=${LIMIT}&offset=0`
-    //             );
-
-    //             return response.data as GetRandomPostsRow[];
-    //         } catch (error) {
-    //             console.log(`Something went wrong`);
-    //         }
-
-    //         return [];
-    //     },
-    // });
-
     useEffect(() => {
         if (inView) {
-            console.log(`Loading more posts...`);
             if (hasNextPage) fetchNextPage();
         }
     }, [inView]);
 
     return (
         <>
-            <Flex direction={"column"} className="mx-auto overflow-hidden">
+            <Flex direction={"column"} className="w-full mx-auto overflow-hidden max-w-pc-width ">
                 <Heading size={"9"} weight={"regular"} className="text-center">
                     {t("discover")}
                 </Heading>
@@ -72,18 +54,31 @@ export default function RandomPostsPage() {
                 <ScrollArea>
                     {data?.pages.map((post, i) => {
                         return (
-                            <>
-                                {post.selected_posts.map((post) => {
+                            <div key={i}>
+                                {post.selected_posts.map((post, i) => {
                                     return (
-                                        <Container size={"3"} key={`post${i}`}>
-                                            <PostCard post={post} />
-                                        </Container>
+                                        <div key={`${i}${post.post_id}`}>
+                                            <PostCard {...post} />
+                                        </div>
                                     );
                                 })}
-                            </>
+                            </div>
                         );
                     })}
-                    <Box ref={ref}>qqqqqqqqqqqq</Box>
+                    <Box ref={ref} className="w-full mb-4 text-center">
+                        {isFetching ? (
+                            <Text>Loading more...</Text>
+                        ) : hasNextPage ? (
+                            <Text
+                                className="cursor-pointer"
+                                onClick={() => fetchNextPage()}
+                            >
+                                Load more posts
+                            </Text>
+                        ) : (
+                            <Text>No more posts to load</Text>
+                        )}
+                    </Box>
                 </ScrollArea>
             </Flex>
         </>