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;

code/frontend/src/pages/Profile.tsx

@@ -22,18 +22,18 @@ function Profile() {
   const [userData, setUserData] = useState<UserProfile | null>({
     id: "",
     username: "",
-    bio: "default",
+    bio: "",
     profilePictureUrl: null,
     followers: 0,
     following: 0,
-    // posts: 0,
+    posts: 0,
   });
 
   const userProfile = async () => {
     try {
       const response = await api.get(`/profile/get/${username}`);
       setUserData(response.data.data);
-      return
+      return;
     } catch (error) {
       navigate("/", { replace: true }); /* replace to 404 page */
       console.error("Error fetching user profile:", error);
@@ -42,42 +42,63 @@ function Profile() {
   };
 
   const ownAccount = username === user?.username;
-useEffect(() => {
+  useEffect(() => {
+    userProfile();
+  }, []);
 
-  userProfile();
-}, []);
-
-const setBio = (bio: string) => {
-  setUserData((prevData) => {
-    if (prevData) {
-      return { ...prevData, bio: bio };
+  const setBio = (bio: string) => {
+    setUserData((prevData) => {
+      if (prevData) {
+        return { ...prevData, bio: bio };
+      }
+      return prevData;
+    });
+  };
+  function handleFollowUser() {
+    // TODO: implement follow user functionality
+    if (user) {
+      api.post(`follower/follow/${username}`)
     }
-    return prevData;
-  });
-}
+  }
+
   return (
     <StyledEngineProvider injectFirst>
       <div className="profile-display">
         <div className="user-info blue-background">
-          <ChangeAvatarDialog ownAccount={ownAccount} username={userData?.username || ""} />
-          <Bio ownAccount={ownAccount} bioText={userData?.bio} setBio={setBio} />
+          <ChangeAvatarDialog
+            ownAccount={ownAccount}
+            username={userData?.username || ""}
+            setUserData={setUserData}
+            imageUrl={userData?.profilePictureUrl}
+          />
+          <Bio
+            ownAccount={ownAccount}
+            bioText={userData?.bio}
+            setBio={setBio}
+          />
           <Divider variant="middle" className="divider" />
           {/* TODO: Change data to data from Database */}
           <div className="numeral-data body-bold">
             <div className="data">
-              <span aria-label="current-post-number">{userData?.following}</span>
+              <span aria-label="current-post-number">{userData?.posts}</span>
               <span className="data-label title-h1">Posts</span>
             </div>
             <div className="data">
-              <span aria-label="current-follower-number">{userData?.followers}</span>
+              <span aria-label="current-follower-number">
+                {userData?.followers}
+              </span>
               <span className="data-label title-h1">Followers</span>
             </div>
             <div className="data">
-              <span aria-label="current-following-number">{userData?.following}</span>
+              <span aria-label="current-following-number">
+                {userData?.following}
+              </span>
               <span className="data-label title-h1">Following</span>
             </div>
           </div>
-          <RotkehlchenButton style="primary" label="Follow" type="button" />
+          {!ownAccount && (
+            <RotkehlchenButton style="primary" label="Follow" type="button" onClick={handleFollowUser} />
+          )}
         </div>
         {userData && <QuiltedImageList user={userData} />}
       </div>

code/frontend/src/types/UserProfile.ts

@@ -5,5 +5,5 @@ export type UserProfile = {
     profilePictureUrl: string | null;
     followers: number;
     following: number;
-    // posts: number;
+    posts: number;
   }