get images to load in correct order

code/backend/src/controllers/postController.ts

@@ -205,6 +205,7 @@ export const getUserPosts = async (req: Request, res: Response) => {
           username: username,
         },
       },
+      orderBy: { createdAt: "desc" },
     });
     if (!posts || posts.length === 0) {
       res.status(StatusCodes.NOT_FOUND).json({

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);
-  },[user])
+    if (user.username != undefined) {
+      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) {
-        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);
+      const response = await api.get(`/posts/getUserPosts/${user.username}`);
+      const posts = response.data.posts;
+      const fetchedImages = await Promise.all(
+        posts.map(
+          async (post: {
+            id: string;
+            description: string;
+            createdAt: string;
+          }) => {
+            try {
+              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 images:", 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) => (
-            <ImageListItem key={index}>
-              <img
-                src={item.imageUrl}
-                alt={item.description}
-                onClick={
-                  () => navigate("/feed", { replace: true })
-                  // anchor to post that was clicked
-                }
-                loading="lazy"
-              />
-            </ImageListItem>
-          ))}
+          {images.map((item, index) => {
+            return (
+              <ImageListItem key={index}>
+                {item.imageUrl ? (
+                  <img
+                    src={item.imageUrl}
+                    alt={item.description}
+                    onClick={
+                      () => navigate("/feed", { replace: true })
+                      // anchor to post that was clicked
+                    }
+                    loading="lazy"
+                  />
+                ) : (
+                  <Skeleton variant="rectangular" width={210} height={118} />
+                )}
+              </ImageListItem>
+            );
+          })}
         </Grid>
       </Box>
     </StyledEngineProvider>

code/frontend/src/pages/Profile.tsx

@@ -21,7 +21,7 @@ function Profile() {
 
   const [userData, setUserData] = useState<UserProfile | null>({
     id: "",
-    username: "",
+    username: undefined,
     bio: "",
     profilePictureUrl: null,
     followers: 0,

code/frontend/src/types/UserProfile.ts

@@ -1,6 +1,6 @@
 export type UserProfile = {
     id: string;
-    username: string;
+    username: string | undefined;
     bio: string | undefined;
     profilePictureUrl: string | null;
     followers: number;