get image and profile data from database

code/frontend/src/components/QuiltedImageList.tsx

@@ -3,44 +3,66 @@ import { StyledEngineProvider } from "@mui/material/styles";
 import "./quiltedImageList.css";
 import { Box, Grid } from "@mui/material";
 import api from "../api/axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { UserProfile } from "../types/UserProfile";
 import { useNavigate } from "react-router-dom";
 
-export default function StandardImageList({user} : {user: UserProfile}) {
-
+export default function StandardImageList({ user }: { user: UserProfile }) {
   const navigate = useNavigate();
-  const [itemData, setData] = useState<{ img: string; title: string }[]>([]);
+  const [images, setImages] = useState<
+    { imageUrl: string; id: string; description: string }[]
+  >([]);
+
+  useEffect(() => {
+    fetchUserPosts().then(console.log);
+  },[user])
 
   const fetchUserPosts = async () => {
     try {
-      const response = await api.get(`/profile/posts/${user.username}`);
-      const posts = response.data.data;
-      const images = posts.map((post: { imageUrl: string; title: string }) => ({
-        img: post.imageUrl,
-        title: post.title,
-      }));
-      setData(images);
+      if (images.length <= 0) {
+        console.log("Fetching user posts for:", user.username);
+        const response = await api.get(`/posts/getUserPosts/${user.username}`);
+        const posts = response.data.posts;
+        posts.map(async (post: { id: string; description: string }) => {
+          try {
+            await api
+              .get(`/posts/getPost/{postId}?postId=${post.id}`)
+              .then((response) => {
+                if (response.data) {
+                  setImages((prevImages) => [
+                    ...prevImages,
+                    {
+                      imageUrl: response.data.images[0].url,
+                      id: post.id,
+                      description: post.description || "",
+                    },
+                  ]);
+                }
+              })
+              .catch((error) => {
+                console.error("Error fetching post image:", error);
+              });
+          } catch (error) {
+            console.error("Error processing post:", error);
+          }
+        });
+      }
     } catch (error) {
       console.error("Error fetching user posts:", error);
     }
   };
 
-  fetchUserPosts().then(console.log);
-
-
   return (
     <StyledEngineProvider injectFirst>
       <Box className="box">
         <Grid container spacing={1} className="image-list">
-          {itemData.map((item, index) => (
+          {images.map((item, index) => (
             <ImageListItem key={index}>
               <img
-                srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-                alt={item.title}
-                onClick={() =>
-                  navigate("/feed", { replace: true })
+                src={item.imageUrl}
+                alt={item.description}
+                onClick={
+                  () => navigate("/feed", { replace: true })
                   // anchor to post that was clicked
                 }
                 loading="lazy"
@@ -52,4 +74,3 @@ export default function StandardImageList({user} : {user: UserProfile}) {
     </StyledEngineProvider>
   );
 }
-