add profile route and add on save and on close methods for popup

code/frontend/src/App.tsx

@@ -4,8 +4,8 @@ import "./styles/fonts.css";
 import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
 import Footer from "./components/Footer";
 import Header from "./components/header";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Profile from "./pages/Profile";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
   return (

code/frontend/src/components/ChangeAvatarDialog.tsx

@@ -27,14 +27,6 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 export default function CustomizedDialogs() {
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-  const handleClose = () => {
-    setOpen(false);
-  };
   
   const inputFile = useRef<HTMLInputElement | null>(null);
   
@@ -47,12 +39,33 @@ export default function CustomizedDialogs() {
   
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
 
+  const setImageURL = (selectedImage: File | null) => {
+    if (selectedImage !== null) {
+      return URL.createObjectURL(selectedImage);
+    }
+    //TODO: If no image is selected, return the image already in the database or undefined
+    return undefined;
+  }
+  
+  const [open, setOpen] = React.useState(false);
+  
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setSelectedImage(null); // Reset the selected image when closing
+    setOpen(false);
+  };
+  const handleSaveChanges = () => {
+    setOpen(false);
+  }
+
   return (
     <React.Fragment>
       <Button onClick={handleClickOpen}>
         <Avatar
           alt="Username"
-          src={selectedImage ? URL.createObjectURL(selectedImage) : undefined}
+          src={setImageURL(selectedImage)}
           className="profile-avatar"
         >
           U
@@ -113,7 +126,7 @@ export default function CustomizedDialogs() {
           </IconButton>
         </DialogContent>
         <DialogActions>
-          <Button autoFocus onClick={handleClose}>
+          <Button autoFocus onClick={handleSaveChanges}>
             Save changes
           </Button>
         </DialogActions>

code/frontend/src/pages/Profile.tsx

@@ -2,7 +2,6 @@ import "./profile.css";
 import "../components/bio.css";
 import "./loginAndSignUpPage.css";
 import "../styles/sizes.css";
-import "../styles/colors.css";
 import "../styles/fonts.css";
 import { useState } from "react";
 import QuiltedImageList from "../components/QuiltedImageList";
@@ -15,7 +14,7 @@ import {
   Typography,
   TextField
 } from "@mui/material";
-import ChangeAvatarDialog from "../components/ChagneAvatarDialog";
+import ChangeAvatarDialog from "../components/ChangeAvatarDialog";
 
 function Profile() {
   const toggleEditMode = () => {

code/frontend/src/test.tsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import './components/header.css';
-import Box from "@mui/material/Box";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import List from "@mui/material/List";
-import Divider from "@mui/material/Divider";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-import MailIcon from "@mui/icons-material/Mail";
-
-export default function TemporaryDrawer() {
-  const [open, setOpen] = React.useState(false);
-
-  const toggleDrawer = (newOpen: boolean) => () => {
-    setOpen(newOpen);
-  };
-
-  const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
-      <List>
-        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-      <Divider />
-      <List>
-        {["All mail", "Trash", "Spam"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  );
-
-  return (
-    <div>
-      <header className="base-header">
-        <div className="base-header-icon">
-          <img src="/assets/icons/feather_black.svg" alt="featherIcon" />
-        </div>
-        <p className="base-header-title">Feather Feed</p>
-        
-      <IconButton aria-label="menu" onClick={toggleDrawer(true)}>
-        <MailIcon/>
-      </IconButton>
-      </header>
-      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
-        {DrawerList}
-      </Drawer>
-    </div>
-  );
-}