get user from database

code/frontend/src/App.tsx

@@ -33,10 +33,10 @@ function App() {
               path="/register"
               element={<LoginAndSignUpPage signupProp={true} />}
             ></Route>
-            <Route path="/profile" element={<Profile />}></Route>
+            <Route path="/profile/:username" element={<Profile />}></Route>
           </Routes>
+          <Footer />
         </div>
-        <Footer />
       </Router>
     </Auth>
 

code/frontend/src/components/Bio.tsx

@@ -7,14 +7,14 @@ 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 }: { ownAccount: boolean }) {
-  const [bio, setBio] = useState<string>("");
-  const [oldBio, setOldbio] = useState<string>("");
+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(bio);
+    !editMode && setOldbio(bioText || "");
     ownAccount && setEditable(!editMode);
   };
 
@@ -23,6 +23,22 @@ export default function BioTextField({ ownAccount }: { ownAccount: boolean }) {
     setEditable(false);
   };
 
+  const saveBio = async () => {
+    try {
+      const response = await api.post("http://localhost:3001/api/profile/updateBio", {
+        bio: bioText,
+      });
+      setBio(response.data.data.bio);
+      setEditable(false);
+    } catch (error) {
+      console.error("Error saving bio: ", error);
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setBio(event.target.value);
+  }
+
   return (
     <StyledEngineProvider injectFirst>
       <Box
@@ -39,8 +55,8 @@ export default function BioTextField({ ownAccount }: { ownAccount: boolean }) {
             multiline
             maxRows={4}
             disabled={!editMode}
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
+            value={bioText}
+            onChange={handleChange}
           />
           {ownAccount && (
             <IconButton aria-label="edit-bio">
@@ -57,8 +73,8 @@ export default function BioTextField({ ownAccount }: { ownAccount: boolean }) {
             <ButtonPrimary
               style="primary"
               label={"Save"}
-              type="submit"
-              onClick={toggleEditMode}
+              type="button"
+              onClick={saveBio}
             />
             <ButtonPrimary
               style="secondary"

code/frontend/src/components/Username.tsx

@@ -16,9 +16,6 @@ export default function Username({ username }: { username: string }) {
   const isPopoverOpen = Boolean(anchorEl);
   const id = isPopoverOpen ? "simple-popover" : undefined;
 
-  useEffect(() => {
-    console.log("Username component mounted");
-  }, []);
   return (
     <>
       <Popover

code/frontend/src/pages/Profile.tsx

@@ -4,37 +4,85 @@ import "./loginAndSignUpPage.css";
 import "../styles/sizes.css";
 import "../styles/fonts.css";
 import QuiltedImageList from "../components/QuiltedImageList";
-import {
-  StyledEngineProvider,
-  Divider,
-} from "@mui/material";
+import { StyledEngineProvider, Divider } from "@mui/material";
 import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
 import Bio from "../components/Bio";
 import RotkehlchenButton from "../components/ButtonRotkehlchen";
+import api from "../api/axios";
+import { useAuth } from "../api/Auth";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+type UserProfile = {
+  id: string;
+  username: string;
+  bio: string | undefined;
+  profilePictureUrl: string | null;
+  followers: number;
+  following: number;
+  // posts: number;
+}
 
 function Profile() {
-  const username = "Username12345678"; /* Get username from database */
-  const ownAccount = true;
+  const { user } = useAuth();
+  const { username } = useParams();
+  const navigate = useNavigate();
 
+  const [userData, setUserData] = useState<UserProfile | null>({
+    id: "",
+    username: "",
+    bio: "default",
+    profilePictureUrl: null,
+    followers: 0,
+    following: 0,
+    // posts: 0,
+  });
+
+  const userProfile = async () => {
+    try {
+      const response = await api.get(`/profile/get/${username}`);
+      setUserData(response.data.data);
+      return
+    } catch (error) {
+      navigate("/", { replace: true }); /* replace to 404 page */
+      console.error("Error fetching user profile:", error);
+      return null;
+    }
+  };
+
+  const ownAccount = username === user?.username;
+useEffect(() => {
+
+  userProfile();
+}, []);
+
+const setBio = (bio: string) => {
+  setUserData((prevData) => {
+    if (prevData) {
+      return { ...prevData, bio: bio };
+    }
+    return prevData;
+  });
+}
   return (
     <StyledEngineProvider injectFirst>
       <div className="profile-display">
         <div className="user-info blue-background">
-            <ChangeAvatarDialog ownAccount={ownAccount} username={username} />
-          <Bio ownAccount={ownAccount} />
+          <ChangeAvatarDialog ownAccount={ownAccount} username={userData?.username || ""} />
+          <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">50</span>
+              <span aria-label="current-post-number">{userData?.following}</span>
               <span className="data-label title-h1">Posts</span>
             </div>
             <div className="data">
-              <span aria-label="current-follower-number">100</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">50</span>
+              <span aria-label="current-following-number">{userData?.following}</span>
               <span className="data-label title-h1">Following</span>
             </div>
           </div>