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(() => {
-    fetchUserPosts().then(console.log);
+    if (user.username != undefined) {
-  },[user])
+      fetchUserPosts().then(console.log);
+      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) {
+      const response = await api.get(`/posts/getUserPosts/${user.username}`);
-        console.log("Fetching user posts for:", user.username);
+      const posts = response.data.posts;
-        const response = await api.get(`/posts/getUserPosts/${user.username}`);
+      const fetchedImages = await Promise.all(
-        const posts = response.data.posts;
+        posts.map(
-        posts.map(async (post: { id: string; description: string }) => {
+          async (post: {
-          try {
+            id: string;
-            await api
+            description: string;
-              .get(`/posts/getPost/{postId}?postId=${post.id}`)
+            createdAt: string;
-              .then((response) => {
+          }) => {
-                if (response.data) {
+            try {
-                  setImages((prevImages) => [
+              const response = await api.get(
-                    ...prevImages,
+                `/posts/getPost/{postId}?postId=${post.id}`
-                    {
+              );
-                      imageUrl: response.data.images[0].url,
+              if (response.data && response.data.images.length > 0) {
-                      id: post.id,
+                console.log(response.data);
-                      description: post.description || "",
+                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) {
-          } catch (error) {
+              console.error("Error fetching post images:", error);
-            console.error("Error processing post:", error);
+            }
           }
-        });
+        )
-      }
+      );
+      console.log("Fetched images:", fetchedImages);
+      setImages(fetchedImages.filter((image) => image !== undefined));
     } catch (error) {
       console.error("Error fetching user posts:", error);
     }
@@ -56,19 +68,25 @@ 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) => {
-            <ImageListItem key={index}>
+            return (
-              <img
+              <ImageListItem key={index}>
-                src={item.imageUrl}
+                {item.imageUrl ? (
-                alt={item.description}
+                  <img
-                onClick={
+                    src={item.imageUrl}
-                  () => navigate("/feed", { replace: true })
+                    alt={item.description}
-                  // anchor to post that was clicked
+                    onClick={
-                }
+                      () => navigate("/feed", { replace: true })
-                loading="lazy"
+                      // anchor to post that was clicked
-              />
+                    }
-            </ImageListItem>
+                    loading="lazy"
-          ))}
+                  />
+                ) : (
+                  <Skeleton variant="rectangular" width={210} height={118} />
+                )}
+              </ImageListItem>
+            );
+          })}
         </Grid>
       </Box>
     </StyledEngineProvider>