move profile components to profile folder

code/frontend/src/components/profile/Bio.tsx

@@ -0,0 +1,89 @@
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
+import { useState } from "react";
+import "./bio.css";
+import "../styles/colors.css";
+import IconButton from "@mui/material/IconButton";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import ButtonPrimary from "./ButtonRotkehlchen";
+import api from "../api/axios";
+
+export default function BioTextField({ ownAccount, bioText, setBio } : { ownAccount: boolean, bioText: string | undefined, setBio: (bio: string) => void }) {
+  const [oldBio, setOldbio] = useState<string>(bioText || "");
+  const [editMode, setEditable] = useState(false);
+
+  const toggleEditMode = () => {
+    !editMode && setOldbio(bioText || "");
+    ownAccount && setEditable(!editMode);
+  };
+
+  const cancleBio = () => {
+    setBio(oldBio);
+    setEditable(false);
+  };
+
+  const saveBio = async () => {
+    try {
+      await api.put("/profile/updateBio", {
+        bio: bioText,
+      });
+      setEditable(false);
+    } catch (error) {
+      console.error("Error saving bio: ", error);
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setBio(event.target.value);
+  }
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <Box
+        component="form"
+        sx={{ "& .MuiTextField-root": { m: 1, width: "25ch" } }}
+        noValidate
+        autoComplete="off"
+      >
+        <div>
+          <TextField
+            className="bio-input"
+            id="outlined-multiline-flexible"
+            label="Bio"
+            multiline
+            maxRows={4}
+            disabled={!editMode}
+            value={bioText}
+            onChange={handleChange}
+          />
+          {ownAccount && (
+            <IconButton aria-label="edit-bio">
+              <EditSquareIcon
+                className="edit-icon"
+                onClick={toggleEditMode}
+                style={{ display: editMode ? "none" : "block" }}
+              />
+            </IconButton>
+          )}
+        </div>
+        {ownAccount && editMode && (
+          <div>
+            <ButtonPrimary
+              style="primary"
+              label={"Save"}
+              type="button"
+              onClick={saveBio}
+            />
+            <ButtonPrimary
+              style="secondary"
+              label={"Cancel"}
+              type="reset"
+              onClick={cancleBio}
+            />
+          </div>
+        )}
+      </Box>
+    </StyledEngineProvider>
+  );
+}

code/frontend/src/components/profile/ChangeAvatarDialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react";
+import {
+  Button,
+  styled,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  Avatar,
+  Box,
+  Divider,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import EditSquareIcon from "@mui/icons-material/EditSquare";
+import "./changeAvatarDialog.css";
+import ButtonRotkehlchen from "./ButtonRotkehlchen";
+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": {
+    padding: theme.spacing(2),
+  },
+  "& .MuiDialogActions-root": {
+    padding: theme.spacing(1),
+  },
+}));
+
+export default function AvatarDialog({
+  ownAccount,
+  username,
+  setUserData,
+  imageUrl,
+}: {
+  ownAccount: boolean;
+  username: string;
+  setUserData: React.Dispatch<React.SetStateAction<UserProfile | null>>;
+  imageUrl?: string | 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 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 [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <div className="user">
+        <Button onClick={handleClickOpen}>
+          <Avatar
+            className="profile-avatar"
+            alt="Username"
+            src={imageUrl ? imageUrl : undefined}
+          >
+            {username && username[0].toUpperCase() || ""}
+          </Avatar>
+        </Button>
+        <Username username={username} />
+        <BootstrapDialog
+          onClose={handleClose}
+          aria-labelledby="change-profile-picture-dialog"
+          open={open}
+        >
+          <DialogTitle
+            className="small-title orange-text"
+            sx={{ m: 1.5, p: 2 }}
+            id="change-profile-picture-dialog"
+          >
+            {ownAccount ? "Change Profile Picture" : username}
+          </DialogTitle>
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            sx={(theme) => ({
+              position: "absolute",
+              right: 8,
+              top: 8,
+              color: theme.palette.grey[500],
+            })}
+          >
+            <CloseIcon />
+          </IconButton>
+          <Divider variant="middle" className="divider" />
+          <DialogContent>
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                objectFit: "cover",
+                maxWidth: "30rem",
+                maxHeight: "30rem",
+                marginBottom: "1rem",
+              }}
+            >
+              <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">
+                <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>
+          {ownAccount && (
+            <div>
+              <Divider variant="middle" className="divider" />
+              <DialogActions>
+                <ButtonRotkehlchen
+                  style="primary"
+                  label="Save Changes"
+                  type="submit"
+                  onClick={saveProfilePicture}
+                />
+                <ButtonRotkehlchen
+                  style="secondary"
+                  label="Cancel"
+                  type="reset"
+                  onClick={handleClose}
+                />
+              </DialogActions>
+            </div>
+          )}
+        </BootstrapDialog>
+      </div>
+    </React.Fragment>
+  );
+}

code/frontend/src/components/profile/QuiltedImageList.tsx

@@ -0,0 +1,87 @@
+import ImageListItem from "@mui/material/ImageListItem";
+import { StyledEngineProvider } from "@mui/material/styles";
+import "./quiltedImageList.css";
+import { Box, Grid, Skeleton } from "@mui/material";
+import api from "../api/axios";
+import { useEffect, useState } from "react";
+import { UserProfile } from "../types/UserProfile";
+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; createdAt: string }[]
+  >([]);
+
+  useEffect(() => {
+    if (user.username != undefined) {
+      fetchUserPosts().then(console.log);
+      return;
+    }
+  }, [user.username]);
+
+  const fetchUserPosts = async () => {
+    try {
+      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);
+    }
+  };
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <Box className="box">
+        <Grid container spacing={1} className="image-list">
+          {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/components/profile/Username.tsx

@@ -0,0 +1,43 @@
+import { Popover, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import "./username.css";
+
+export default function Username({ username }: { username: string }) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const openPopover = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closePopover = () => {
+    setAnchorEl(null);
+  };
+
+  const isPopoverOpen = Boolean(anchorEl);
+  const id = isPopoverOpen ? "simple-popover" : undefined;
+
+  return (
+    <>
+      <Popover
+        className="profile-popover"
+        onClose={closePopover}
+        id={id}
+        open={isPopoverOpen}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <Typography sx={{ p: 1 }}>{username}</Typography>
+      </Popover>
+      <span className="profile-username body-bold" onClick={openPopover}>
+        {username}
+      </span>
+    </>
+  );
+}

code/frontend/src/components/profile/bio.css

@@ -0,0 +1,48 @@
+.bio-input {
+    margin: 0.5rem;
+}
+
+.css-53g0n7-MuiButtonBase-root-MuiIconButton-root {
+  justify-content: end;
+}
+
+/* Root class for the input field */
+.bio-input .MuiOutlinedInput-root {
+  color: var(--Rotkehlchen-gray);
+}
+/* Class for the border around the input field */
+.bio-input .MuiOutlinedInput-notchedOutline {
+    border-color: var(--Rotkehlchen-brown-light);
+}
+/* Class for the label of the input field */
+.bio-input .MuiInputLabel-outlined {
+    color: var(--Rotkehlchen-brown-light);
+}
+/* Class for the border in focused state */
+.bio-input .Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: var(--Rotkehlchen-yellow-default);
+}
+/* Disabled input field text and border color */
+.bio-input .css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
+  -webkit-text-fill-color: var(--Rotkehlchen-gray);
+}
+.bio-input
+  .MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled
+  .MuiOutlinedInput-notchedOutline {
+  border-color: transparent;
+}
+
+@media only screen and (min-width: 768px) {
+  .bio-input {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+  .bio-input .MuiInputLabel-outlined {
+    font-size: 18px;
+  }
+  .bio-input .MuiOutlinedInput-input {
+    font-size: 18px;
+    padding: 10px;
+  }
+    
+}

code/frontend/src/components/profile/quiltedImageList.css

@@ -0,0 +1,35 @@
+.image-list {
+  height: fit-content;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
+  object-fit: cover;
+  width: 7rem;
+  height: 7rem;
+  margin: -0.1rem;
+  cursor: pointer;
+}
+
+@media only screen and (min-width: 768px) {
+  .box {
+    max-width: 75%;
+    margin-left: 45ch;
+    margin-right: 10ch;
+  }
+
+  .image-list {
+    position: relative;
+    width: fill-available;
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .css-1row2ej-MuiImageListItem-root .MuiImageListItem-img {
+    object-fit: cover;
+    width: 15rem;
+    height: 15rem;
+  }
+}

code/frontend/src/components/profile/username.css

@@ -0,0 +1,21 @@
+.profile-username {
+  color: var(--Rotkehlchen-orange-default);
+  width: 15rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  text-align: start;
+}
+.profile-popover {
+  padding: 1rem;
+}
+
+@media screen and (min-width: 768px) {
+  .profile-username {
+    width: 10rem;
+  }
+  .profile-popover {
+    padding: 2rem;
+  }
+  
+}