feature: Connect posts fully with backend

Small enhancements:
- Add infinite scroll
- Add visible number of comments

Refs: 869768m7p
Signed-off-by: Patryk Kłosiński <[email protected]>

frontend/src/Features/MainPage/MainPage.tsx

@@ -1,39 +1,13 @@
-import {Box, Title} from "@mantine/core";
-import {useEffect, useState} from "react";
-import api from "../shared/services/api.ts";
-import {Post} from "../shared/components/Cards/Post";
-import {PostDTO} from "./types/Post.tsx";
+import {Box, Center} from "@mantine/core";
+import {InfiniteScroll} from "./components/InfiniteScroll";
 
 export const MainPage = () => {
-  const [posts, setPosts] = useState<PostDTO[]>([]);
-
-  useEffect(() => {
-    api.get<{ content: PostDTO[] }>("/api/posts").then((response) => {
-      setPosts(response.data.content);
-    });
-  }, []);
-
   return (
     <Box p={"md"}>
-      <Title order={1}>Main page</Title>
-
-      {/* Post rendering */}
-      {posts.map((post) => (
-        <Post
-          key={post.id}
-          author={post.author}
-          content={post.content}
-          createdAt={post.createdAt}
-          numberOfComments={post.numberOfComments}
-          id={post.id}
-          photosUrls={
-            // generate 100 random photos
-            Array.from({length: 100}, () => {
-              return "https://picsum.photos/seed/" + Math.random() + "/800/2200";
-            })
-          }
-        />
-      ))}
+      <Center>
+        {/* Post rendering */}
+        <InfiniteScroll/>
+      </Center>
     </Box>
   );
 };

frontend/src/Features/MainPage/components/InfiniteScroll/InfiniteScroll.tsx

@@ -0,0 +1,80 @@
+import {useCallback, useEffect, useState} from "react";
+import api from "../../../shared/services/api.ts";
+import {Group, Loader, ScrollArea, Text} from "@mantine/core";
+import {Post} from "../../../shared/components/Cards/Post";
+import {PostDTO} from "../../types/Post.tsx";
+
+export const InfiniteScroll = () => {
+  const [posts, setPosts] = useState<PostDTO[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(0);
+
+  const loadPosts = useCallback(async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+
+    try {
+      const response = await api.get(`/api/posts`, {
+        params: {pageNo: page, pageSize: 10},
+      });
+
+      const newPosts = response.data.content;
+
+      setPosts((prevPosts) => [...prevPosts, ...newPosts]);
+      setHasMore(response.data.totalPages > page + 1);
+      setPage((prevPage) => prevPage + 1);
+    } catch (error) {
+      console.error('Error loading posts:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading, hasMore, page]);
+
+  useEffect(() => {
+    loadPosts();
+  }, [loadPosts]);
+
+  // Funkcja do obsługi scrolla
+  const handleScroll = (event: { currentTarget: any; }) => {
+    const target = event.currentTarget;
+    if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
+      loadPosts();
+    }
+  };
+
+  return (
+    <ScrollArea
+      onScroll={handleScroll}
+      offsetScrollbars
+    >
+      {posts.map((post) => (
+        <Post
+          key={post.id}
+          author={post.author}
+          content={post.content}
+          createdAt={post.createdAt}
+          numberOfComments={post.numberOfComments}
+          id={post.id}
+          photosUrls={
+            // generate 100 random photos
+            Array.from({length: 100}, () => {
+              return "https://picsum.photos/seed/" + Math.random() + "/800/2200";
+            })
+          }
+        />
+      ))}
+      {loading && (
+        <Group justify={"center"} mt="lg">
+          <Loader/>
+        </Group>
+      )}
+      {!hasMore && !loading && (
+        <Text ta="center" c="dimmed" mt="lg">
+          No more posts to load
+        </Text>
+      )}
+    </ScrollArea>
+  );
+}

frontend/src/Features/MainPage/components/InfiniteScroll/index.tsx

@@ -0,0 +1 @@
+export {InfiniteScroll} from './InfiniteScroll';

frontend/src/Features/shared/components/Cards/Post/Post.tsx

@@ -1,4 +1,16 @@
-import {Avatar, BackgroundImage, Box, Button, Card, Divider, Group, SimpleGrid, Stack, Text} from "@mantine/core";
+import {
+  Avatar,
+  BackgroundImage,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Divider,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text
+} from "@mantine/core";
 import {InnerHtmlHandler} from "../../InnerHtmlHandler";
 import {DateFormatter} from "../../../utils/DateFormatter.tsx";
 import {IconMessage, IconPaw, IconShare3} from "@tabler/icons-react";
@@ -142,7 +154,12 @@ export const Post = (props: PostDTO) => {
           <Button variant={"subtle"} color={"gray"} leftSection={<IconPaw stroke={1.5}/>}>
             Reaction
           </Button>
-          <Button variant={"subtle"} color={"gray"} leftSection={<IconMessage stroke={1.5}/>}>
+          <Button
+            variant={"subtle"}
+            color={"gray"}
+            leftSection={<IconMessage stroke={1.5}/>}
+            rightSection={<Badge color={"gray"} circle>{props.numberOfComments}</Badge>}
+          >
             Comment
           </Button>
           <Button variant={"subtle"} color={"gray"} leftSection={<IconShare3 stroke={1.5}/>}>