get images to load in correct order

code/frontend/src/components/QuiltedImageList.tsx

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