move profile components to profile folder

code/frontend/src/components/QuiltedImageList.tsx

@@ -1,87 +0,0 @@
-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/Username.tsx

@@ -1,43 +0,0 @@
-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/username.css

@@ -1,21 +0,0 @@
-.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;
-  }
-  
-}