diff --git a/code/frontend/src/components/QuiltedImageList.tsx b/code/frontend/src/components/QuiltedImageList.tsx new file mode 100644 index 0000000..2ad7748 --- /dev/null +++ b/code/frontend/src/components/QuiltedImageList.tsx @@ -0,0 +1,76 @@ +import ImageListItem from "@mui/material/ImageListItem"; +import { StyledEngineProvider } from "@mui/material/styles"; +import "./quiltedImageList.css"; +import { Box, Grid } from "@mui/material"; +import api from "../api/axios"; +import { useEffect, useState } from "react"; +import { UserProfile } from "../types/UserProfile"; +import { useNavigate } from "react-router-dom"; + +export default function StandardImageList({ user }: { user: UserProfile }) { + const navigate = useNavigate(); + const [images, setImages] = useState< + { imageUrl: string; id: string; description: string }[] + >([]); + + useEffect(() => { + fetchUserPosts().then(console.log); + },[user]) + + const fetchUserPosts = async () => { + try { + 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); + } + }; + + return ( + + + + {images.map((item, index) => ( + + {item.description} navigate("/feed", { replace: true }) + // anchor to post that was clicked + } + loading="lazy" + /> + + ))} + + + + ); +}