get image and profile data from database

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -15,10 +15,11 @@ import CloseIcon from "@mui/icons-material/Close";
 import EditSquareIcon from "@mui/icons-material/EditSquare";
 import "./changeAvatarDialog.css";
 import ButtonRotkehlchen from "./ButtonRotkehlchen";
-import { useFilePicker } from "use-file-picker";
 import Username from "./Username";
 import "./username.css";
 import api from "../api/axios";
+import { ChangeEvent, useState } from "react";
+import { UserProfile } from "../types/UserProfile";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiDialogContent-root": {
@@ -32,52 +33,50 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 export default function AvatarDialog({
   ownAccount,
   username,
+  setUserData,
+  imageUrl,
 }: {
   ownAccount: boolean;
   username: string;
+  setUserData: React.Dispatch<React.SetStateAction<UserProfile | null>>;
+  imageUrl?: string | null;
 }) {
-  const [profilePicture, setProfilePicture] = React.useState<string | null>(
-    null
-  );
+  const [file, setFile] = useState<File>();
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0]);
+    }
+  };
 
   const saveProfilePicture = async () => {
     try {
-      const response = await api.post("/profile/updateProfilePicture", {
-        profilePicture: profilePicture,
-      });
-      setProfilePicture(response.data.data.profilePicture);
-      console.log(
-        "Profile picture saved successfully:",
-        response.data.data.profilePicture
-      );
+      const formData = new FormData();
+      console.log("Saving profile picture:", file);
+      if (file) {
+        formData.append("image", file);
+        const response = await api.post(
+          "/profile/uploadProfilePicture",
+          formData
+        );
+        console.log("Profile picture saved:", response.data);
+        setUserData((prevData) => (prevData ?{
+          ...prevData, 
+          profilePictureUrl: response.data.url
+        } : null));
+      }
       setOpen(false); // Close the dialog after saving
     } catch (error) {
       console.error("Error saving profile picture:", error);
     }
   };
 
-  const { openFilePicker, filesContent, loading, clear } = useFilePicker({
-    accept: ".png, .jpg, .jpeg",
-    multiple: false,
-    readAs: "DataURL",
-    limitFilesConfig: { max: 1 },
-  });
-
-  const setImageURL = ({ newImage = false }: { newImage: boolean }) => {
-    if (newImage) {
-      return filesContent[0].content;
-    }
-    // TODO: If no image is selected, return the image already in the database or undefined
-    return undefined;
-  };
-
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
     setOpen(true);
   };
   const handleClose = () => {
-    clear(); // Reset the selected image when closing
     setOpen(false);
   };
 
@@ -90,11 +89,7 @@ export default function AvatarDialog({
             alt="Username"
             // current code does not work yet
             // TODO: If no image is selected, return the image already in the database or undefined
-            src={
-              filesContent.length > 0
-                ? setImageURL({ newImage: true })
-                : undefined
-            }
+            src={imageUrl ? imageUrl : undefined}
           >
             U
           </Avatar>
@@ -135,30 +130,34 @@ export default function AvatarDialog({
                 objectFit: "cover",
                 maxWidth: "30rem",
                 maxHeight: "30rem",
+                marginBottom: "1rem",
               }}
             >
-              {filesContent.map((file) => (
-                <img
-                  alt={file.name}
-                  src={file.content}
-                  style={{
-                    maxWidth: "30rem",
-                    maxHeight: "30rem",
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                  }}
-                ></img>
-              ))}
+              <img
+                alt={file ? file.name : "Profile Picture"}
+                src={file ? URL.createObjectURL(file) : imageUrl || ""}
+                style={{
+                  maxWidth: "30rem",
+                  maxHeight: "30rem",
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                }}
+              ></img>
             </Box>
             {ownAccount && (
               <div className="change-avatar-button">
-                <IconButton
-                  aria-label="upload picture"
-                  onClick={() => openFilePicker()}
-                >
-                  <EditSquareIcon className="edit-icon" />
-                </IconButton>
+                <label htmlFor="profile-picture">
+                    <EditSquareIcon className="edit-icon" />
+                    <input
+                      type="file"
+                      id="profile-picture"
+                      name="profile-picture"
+                      accept=".png, .jpg, .jpeg"
+                      onChange={handleFileChange}
+                      style={{ display: "none" }}
+                    />
+                </label>
               </div>
             )}
           </DialogContent>

code/frontend/src/components/QuiltedImageList.tsx

@@ -3,44 +3,66 @@ import { StyledEngineProvider } from "@mui/material/styles";
 import "./quiltedImageList.css";
 import { Box, Grid } from "@mui/material";
 import api from "../api/axios";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { UserProfile } from "../types/UserProfile";
 import { useNavigate } from "react-router-dom";
 
-export default function StandardImageList({user} : {user: UserProfile}) {
-
+export default function StandardImageList({ user }: { user: UserProfile }) {
   const navigate = useNavigate();
-  const [itemData, setData] = useState<{ img: string; title: string }[]>([]);
+  const [images, setImages] = useState<
+    { imageUrl: string; id: string; description: string }[]
+  >([]);
+
+  useEffect(() => {
+    fetchUserPosts().then(console.log);
+  },[user])
 
   const fetchUserPosts = async () => {
     try {
-      const response = await api.get(`/profile/posts/${user.username}`);
-      const posts = response.data.data;
-      const images = posts.map((post: { imageUrl: string; title: string }) => ({
-        img: post.imageUrl,
-        title: post.title,
-      }));
-      setData(images);
+      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);
     }
   };
 
-  fetchUserPosts().then(console.log);
-
-
   return (
     <StyledEngineProvider injectFirst>
       <Box className="box">
         <Grid container spacing={1} className="image-list">
-          {itemData.map((item, index) => (
+          {images.map((item, index) => (
             <ImageListItem key={index}>
               <img
-                srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-                src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-                alt={item.title}
-                onClick={() =>
-                  navigate("/feed", { replace: true })
+                src={item.imageUrl}
+                alt={item.description}
+                onClick={
+                  () => navigate("/feed", { replace: true })
                   // anchor to post that was clicked
                 }
                 loading="lazy"
@@ -52,4 +74,3 @@ export default function StandardImageList({user} : {user: UserProfile}) {
     </StyledEngineProvider>
   );
 }
-

code/frontend/src/components/changeAvatarDialog.css

@@ -40,6 +40,10 @@
   border-radius: 1rem;
 }
 
+.edit-icon {
+  cursor: pointer;
+}
+
 @media screen and (min-width: 768px) {
   .profile-avatar {
     width: 5rem;