mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

get images to load in correct order

Browse source
This commit is contained in:
luisa.bellitto 2025-06-29 19:30:39 +02:00 • committed by Rudi Regentonne
parent 6dcd25ee62
commit 7e48767ed6
1 changed files with 62 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

64
code/frontend/src/components/QuiltedImageList.tsx
View file

@ -1,7 +1,7 @@
import ImageListItem from "@mui/material/ImageListItem"; import ImageListItem from "@mui/material/ImageListItem";
import { StyledEngineProvider } from "@mui/material/styles"; import { StyledEngineProvider } from "@mui/material/styles";
import "./quiltedImageList.css"; import "./quiltedImageList.css";
import { Box, Grid } from "@mui/material"; import { Box, Grid, Skeleton } from "@mui/material";
import api from "../api/axios"; import api from "../api/axios";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { UserProfile } from "../types/UserProfile"; import { UserProfile } from "../types/UserProfile";
@ -10,43 +10,55 @@ import { useNavigate } from "react-router-dom";
export default function StandardImageList({ user }: { user: UserProfile }) { export default function StandardImageList({ user }: { user: UserProfile }) {
const navigate = useNavigate(); const navigate = useNavigate();
const [images, setImages] = useState< const [images, setImages] = useState<
{ imageUrl: string; id: string; description: string }[] { imageUrl: string; id: string; description: string; createdAt: string }[]
>([]); >([]);
useEffect(() => { useEffect(() => {
if (user.username != undefined) {
fetchUserPosts().then(console.log); fetchUserPosts().then(console.log);
},[user]) return;
}
}, [user.username]);
useEffect(() => {
images.sort(
(a, b) =>
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
);
}, [user]);
const fetchUserPosts = async () => { const fetchUserPosts = async () => {
try { try {
if (images.length <= 0) {
console.log("Fetching user posts for:", user.username);
const response = await api.get(`/posts/getUserPosts/${user.username}`); const response = await api.get(`/posts/getUserPosts/${user.username}`);
const posts = response.data.posts; const posts = response.data.posts;
posts.map(async (post: { id: string; description: string }) => { const fetchedImages = await Promise.all(
posts.map(
async (post: {
id: string;
description: string;
createdAt: string;
}) => {
try { try {
await api const response = await api.get(
.get(`/posts/getPost/{postId}?postId=${post.id}`) `/posts/getPost/{postId}?postId=${post.id}`
.then((response) => { );
if (response.data) { if (response.data && response.data.images.length > 0) {
setImages((prevImages) => [ console.log(response.data);
...prevImages, return {
{
imageUrl: response.data.images[0].url, imageUrl: response.data.images[0].url,
id: post.id, id: post.id,
description: post.description || "", description: post.description || "",
}, createdAt: post.createdAt,
]); };
} }
})
.catch((error) => {
console.error("Error fetching post image:", error);
});
} catch (error) { } catch (error) {
console.error("Error processing post:", error); console.error("Error fetching post images:", error);
} }
});
} }
)
);
console.log("Fetched images:", fetchedImages);
setImages(fetchedImages.filter((image) => image !== undefined));
} catch (error) { } catch (error) {
console.error("Error fetching user posts:", error); console.error("Error fetching user posts:", error);
} }
@ -56,8 +68,10 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
<StyledEngineProvider injectFirst> <StyledEngineProvider injectFirst>
<Box className="box"> <Box className="box">
<Grid container spacing={1} className="image-list"> <Grid container spacing={1} className="image-list">
{images.map((item, index) => ( {images.map((item, index) => {
return (
<ImageListItem key={index}> <ImageListItem key={index}>
{item.imageUrl ? (
<img <img
src={item.imageUrl} src={item.imageUrl}
alt={item.description} alt={item.description}
@ -67,8 +81,12 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
} }
loading="lazy" loading="lazy"
/> />
) : (
<Skeleton variant="rectangular" width={210} height={118} />
)}
</ImageListItem> </ImageListItem>
))} );
})}
</Grid> </Grid>
</Box> </Box>
</StyledEngineProvider> </StyledEngineProvider>