Feed and user Feed done

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

@@ -5,7 +5,7 @@ import { useState } from "react";
 import "./bio.css";
 import IconButton from "@mui/material/IconButton";
 import EditSquareIcon from "@mui/icons-material/EditSquare";
-import ButtonPrimary from "../ButtonRotkehlchen";
+import ButtonPrimary from "../buttons/buttonRotkehlchen/ButtonRotkehlchen";
 import api from "../../api/axios";
 
 export default function BioTextField({ ownAccount, bioText, setBio } : { ownAccount: boolean, bioText: string | undefined, setBio: (bio: string) => void }) {

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

@@ -14,7 +14,7 @@ import {
 import CloseIcon from "@mui/icons-material/Close";
 import EditSquareIcon from "@mui/icons-material/EditSquare";
 import "./changeAvatarDialog.css";
-import ButtonRotkehlchen from "../ButtonRotkehlchen";
+import ButtonRotkehlchen from "../buttons/buttonRotkehlchen/ButtonRotkehlchen";
 import Username from "./Username";
 import "./username.css";
 import api from "../../api/axios";
@@ -55,17 +55,17 @@ export default function AvatarDialog({
       console.log("Saving profile picture:", file);
       if (file) {
         formData.append("image", file);
-        const response = await api.post(
+        const response = await api.post<{ url: string }>(
           "/profile/uploadProfilePicture",
           formData
         );
         console.log("Profile picture saved:", response.data);
-        setUserData((prevData) => (prevData ?{
+        setUserData((prevData) => (prevData ? {
           ...prevData, 
           profilePictureUrl: response.data.url
         } : null));
       }
-      setOpen(false); // Close the dialog after saving
+      setOpen(false); 
     } catch (error) {
       console.error("Error saving profile picture:", error);
     }

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

@@ -7,6 +7,16 @@ import { useEffect, useState } from "react";
 import { UserProfile } from "../../types/UserProfile";
 import { useNavigate } from "react-router-dom";
 
+type Post = {
+  id: string;
+  description: string;
+  createdAt: string;
+};
+
+type PostImagesResponse = {
+  images: { url: string }[];
+};
+
 export default function StandardImageList({ user }: { user: UserProfile }) {
   const navigate = useNavigate();
   const [images, setImages] = useState<
@@ -22,17 +32,15 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
 
   const fetchUserPosts = async () => {
     try {
-      const response = await api.get(`/posts/getUserPosts/${user.username}`);
+      const response = await api.get<{ posts: Post[] }>(
+        `/posts/getUserPosts/${user.username}`
+      );
       const posts = response.data.posts;
       const fetchedImages = await Promise.all(
         posts.map(
-          async (post: {
-            id: string;
-            description: string;
-            createdAt: string;
-          }) => {
+          async (post: Post) => {
             try {
-              const response = await api.get(
+              const response = await api.get<PostImagesResponse>(
                 `/posts/getPost/{postId}?postId=${post.id}`
               );
               if (response.data && response.data.images.length > 0) {
@@ -42,6 +50,7 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
                   id: post.id,
                   description: post.description || "",
                   createdAt: post.createdAt,
+                  
                 };
               }
             } catch (error) {
@@ -51,7 +60,12 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
         )
       );
       console.log("Fetched images:", fetchedImages);
-      setImages(fetchedImages.filter((image) => image !== undefined));
+      setImages(
+        fetchedImages.filter(
+          (image): image is { imageUrl: string; id: string; description: string; createdAt: string } =>
+            image !== undefined
+        )
+      );
     } catch (error) {
       console.error("Error fetching user posts:", error);
     }
@@ -68,10 +82,7 @@ export default function StandardImageList({ user }: { user: UserProfile }) {
                   <img
                     src={item.imageUrl}
                     alt={item.description}
-                    onClick={
-                      () => navigate("/feed")
-                      // anchor to post that was clicked
-                    }
+                    onClick={() => navigate(`/feed/${user.username}#${item.id}`)}
                     loading="lazy"
                   />
                 ) : (