feature: Connect posts fully with backend

- Adjust posts adresses for new structure, - Correct basic info user, - Connect editing and deleting of posts. Refs: 869768m7p Signed-off-by: Patryk Kłosiński <[email protected]>
JimTheCat · Dec 21, 2024 · 2cd31b7 · 2cd31b7
1 parent 2fe0204
commit 2cd31b7
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 53 deletions.
diff --git a/frontend/src/Features/CreatePost/CreatePost.tsx b/frontend/src/Features/CreatePost/CreatePost.tsx
@@ -24,7 +24,7 @@ export const CreatePost = () => {
       return;
     }
 
-    api.post('/api/posts/create', null, {params: {content: contentToSave}}).then((response) => {
+    api.post('/api/posts', null, {params: {content: contentToSave}}).then((response) => {
       if (response.status === 200) {
         close();
       }

diff --git a/frontend/src/Features/MainPage/MainPage.tsx b/frontend/src/Features/MainPage/MainPage.tsx
@@ -5,30 +5,35 @@ import {Post} from "../shared/components/Cards/Post";
 import {PostDTO} from "./types/Post.tsx";
 
 export const MainPage = () => {
-
-  const [posts, setPosts] = useState<PostDTO[] | []>([]);
+  const [posts, setPosts] = useState<PostDTO[]>([]);
 
   useEffect(() => {
-    api.get<PostDTO[]>("/api/posts/get-all").then((response) => {
-      setPosts(response.data);
+    api.get<{ content: PostDTO[] }>("/api/posts").then((response) => {
+      setPosts(response.data.content);
     });
   }, []);
 
-    return (
-      <Box p={"md"}>
-        <Title order={1}>Main page</Title>
+  return (
+    <Box p={"md"}>
+      <Title order={1}>Main page</Title>
 
-        {/*Posts*/}
-        {posts.map((post) => (
-          <Post key={post.ownerLogin} ownerLogin={post.ownerLogin} contentHtml={post.content} createdAt={post.createdAt}
-                photosUrls={
-                  // generate 100 random photos
-                  Array.from({length: 100}, () => {
-                    return "https://picsum.photos/seed/" + Math.random() + "/800/2200";
-                  })
-                }
-          />
-        ))}
-      </Box>
-    )
-}
+      {/* 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";
+            })
+          }
+        />
+      ))}
+    </Box>
+  );
+};
diff --git a/frontend/src/Features/MainPage/types/Post.tsx b/frontend/src/Features/MainPage/types/Post.tsx
@@ -1,5 +1,14 @@
 export type PostDTO = {
-  content: string;
-  ownerLogin: string;
-  createdAt: string;
-}
+  id: string,
+  content: string,
+  createdAt: string,
+  numberOfComments: number,
+  author: {
+    id: string;
+    name: string;
+    surname: string;
+    login: string;
+    profilePicture: string | null;
+  },
+  photosUrls?: string[]
+};
diff --git a/frontend/src/Features/Root/components/Navbar/Navbar.tsx b/frontend/src/Features/Root/components/Navbar/Navbar.tsx
@@ -31,7 +31,7 @@ export const Navbar = () => {
 
   useEffect(() => {
     if (auth.user) {
-      api.get<BasicUserInfo>('/api/users/get-basic-user-info', {params: {login: auth.user.login}}).then((response) => {
+      api.get<BasicUserInfo>('/api/users/basic-user-info', {params: {login: auth.user.login}}).then((response) => {
         setBasicUserInfo(response.data);
       });
     }

diff --git a/frontend/src/Features/shared/components/Cards/Post/Post.tsx b/frontend/src/Features/shared/components/Cards/Post/Post.tsx
@@ -1,24 +1,17 @@
 import {Avatar, BackgroundImage, Box, Button, Card, Divider, Group, SimpleGrid, Stack, Text} from "@mantine/core";
-import {User} from "../../../types/User.tsx";
 import {InnerHtmlHandler} from "../../InnerHtmlHandler";
 import {DateFormatter} from "../../../utils/DateFormatter.tsx";
 import {IconMessage, IconPaw, IconShare3} from "@tabler/icons-react";
 import {useAuthStore} from "../../../services/authStore.ts";
 import {useNavigate} from "react-router-dom";
 import {ImageWithSkeleton} from "../../ImageWithSkeleton";
 import {MenuPost} from "./components/MenuPost";
+import {PostDTO} from "../../../../MainPage/types/Post.tsx";
 
-type PostProps = {
-  ownerLogin: string;
-  contentHtml: string;
-  photosUrls?: string[];
-  createdAt: string;
-}
-
-export const Post = (props: PostProps) => {
+export const Post = (props: PostDTO) => {
 
   const auth = useAuthStore();
-  const isOwner = auth.user?.login === props.ownerLogin;
+  const isOwner = auth.user?.login === props.author.login;
   const navigate = useNavigate();
 
   /*Render this element each time when number of photos will change*/
@@ -118,29 +111,23 @@ export const Post = (props: PostProps) => {
     );
   };
 
-  const user = {
-    name: "John",
-    surname: "Doe",
-    login: "johndoe",
-  } as User;
-
   return (
     <Card w={"30vw"} radius={"md"} p={"lg"} my={'lg'}>
       <Stack>
         <Group justify="space-between">
-          <Group onClick={() => navigate(`/profile/${auth.user?.tag}`)} style={{cursor: "pointer"}}>
+          <Group onClick={() => navigate(`/profile/@${props.author.login}`)} style={{cursor: "pointer"}}>
             <Avatar src={null} size={"lg"} radius={180}/>
             <Stack gap={0}>
-              <Text>{user.name} {user.surname}</Text>
+              <Text>{props.author.name} {props.author.surname}</Text>
               <Text c="dimmed">{DateFormatter(props.createdAt)}</Text>
             </Stack>
           </Group>
           {isOwner &&
-              <MenuPost content={props.contentHtml}/>
+              <MenuPost postId={props.id} content={props.content}/>
           }
         </Group>
 
-        <InnerHtmlHandler innerHtml={props.contentHtml}/>
+        <InnerHtmlHandler innerHtml={props.content}/>
 
         {/*// Show photos if they exist*/}
         {props.photosUrls && props.photosUrls.length > 0 && (

diff --git a/frontend/src/Features/shared/components/Cards/Post/components/EditPost/EditPost.tsx b/frontend/src/Features/shared/components/Cards/Post/components/EditPost/EditPost.tsx
@@ -3,6 +3,7 @@ import {IconPencil} from "@tabler/icons-react";
 import {Menu, rem} from "@mantine/core";
 import {useRef, useState} from "react";
 import {ModalRichContent} from "../../../../../consts";
+import api from "../../../../../services/api.ts";
 
 type EditPostProps = {
   content?: string;
@@ -20,8 +21,7 @@ export const EditPost = (props: EditPostProps) => {
   }
 
   const handleEditPost = () => {
-    // TODO: Replace with actual edit logic
-    console.log('Edit post: ', contentRef.current);
+    api.put(`/api/posts/${props.postId}`, null, {params: {content: contentRef.current}});
   };
 
   return (

diff --git a/frontend/src/Features/shared/components/Cards/Post/components/MenuPost/MenuPost.tsx b/frontend/src/Features/shared/components/Cards/Post/components/MenuPost/MenuPost.tsx
@@ -4,6 +4,7 @@ import {EditPost} from "../EditPost";
 import {RemovePost} from "../RemovePost";
 
 type MenuPostProps = {
+  postId?: string;
   content?: string;
 }
 
@@ -17,8 +18,8 @@ export const MenuPost = (props: MenuPostProps) => {
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Label>Manage</Menu.Label>
-        <EditPost content={props.content}/>
-        <RemovePost/>
+        <EditPost postId={props.postId} content={props.content}/>
+        <RemovePost postId={props.postId}/>
       </Menu.Dropdown>
     </Menu>
   );

diff --git a/frontend/src/Features/shared/components/Cards/Post/components/RemovePost/RemovePost.tsx b/frontend/src/Features/shared/components/Cards/Post/components/RemovePost/RemovePost.tsx
@@ -1,15 +1,15 @@
 import {Menu, rem, Text} from "@mantine/core";
 import {IconTrash} from "@tabler/icons-react";
 import {ModificationModal} from "../../../../ModificationModal";
+import api from "../../../../../services/api.ts";
 
 type RemovePostProps = {
   postId?: string;
 }
 
 export const RemovePost = (props: RemovePostProps) => {
   const handleRemoval = () => {
-    // TODO: Replace with actual removal logic
-    console.log('Remove post: ', props.postId);
+    api.delete(`/api/posts/${props.postId}`);
   };
 
   return (