get user from database

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