Styled user info

src/backend/app.py

@@ -50,8 +50,9 @@ def register():
 
 
 @app.route("/user/<username>", methods=["GET", "POST"])
-def userpage():
+def userpage(username):
     """Handles userpage requests"""
+    session["username"] = "Zongxian"
     if session.get("username", None) is None:
         return "user does not exist", 404
     username = session.get("username")
@@ -78,7 +79,7 @@ def userpage():
         return result, 201
     user = page.get_user(username)  # request.method == "GET"
     data_dict = dataclasses.asdict(user)
-    return json.dumps(data_dict), username, 201
+    return json.dumps(data_dict), 201
 
 
 @app.route("/logout")

src/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import Header from './components/Header';
 import Login from './pages/Login';
 import MainPage from './pages/MainPage';
 import Register from './pages/Register';
-// import UserPage from './pages/UserPage';
+import User from './pages/User';
 
 function App() {
    return (
@@ -25,7 +25,7 @@ function App() {
                   <Route index element={<MainPage />} />
                </Route>
                <Route path="/user">
-                  {/* <Route index element={<UserPage />} /> */}
+                  <Route index element={<User />} />
                </Route>
             </Routes>
          </BrowserRouter>

src/frontend/src/components/user/getReviewedApts.tsx

@@ -11,11 +11,14 @@ export default function getReviewedApts(username: string) {
     const [apartments, setApartments] = useState(emptyarray);
 
     useEffect(() => {
+        setLoading(true);
+        setError(false);
         const CancelToken = axios.CancelToken;
         const source = CancelToken.source();
         const timer = setTimeout(() => {
             const req = {
                 is_get_liked: true,
+                user_id: 1,
             };
             const json = JSON.stringify(req);
             axios({
@@ -38,7 +41,7 @@ export default function getReviewedApts(username: string) {
                                     price_max: res.data[i].price_max,
                                     votes: res.data[i].votes,
                                 });
-                            };
+                            }
                         }
                         return newApartments;
                     })
@@ -52,6 +55,6 @@ export default function getReviewedApts(username: string) {
             clearTimeout(timer);
             source.cancel();
         };
-    });
+    }, [username]);
     return {loading, error, apartments};
 }

src/frontend/src/components/user/getUser.tsx

@@ -41,7 +41,7 @@ export default function getInfo(username: string) {
             clearTimeout(timer);
             source.cancel();
         };
-    });
+    }, [username]);
     return {loading, error, user};
 }
 

src/frontend/src/pages/User.tsx

@@ -11,6 +11,11 @@ import {
    Divider,
    Stack,
    Button,
+   Link,
+   ListItemAvatar,
+   Avatar,
+   ListItem,
+   AvatarGroup
 } from '@mui/material';
 import EmailIcon from '@mui/icons-material/Email';
 import PhoneIcon from '@mui/icons-material/Phone';
@@ -23,11 +28,17 @@ import getUser from '../components/user/getUser';
 
 
 export default function User() {
+   const btnstyle = { marginLeft: '10px' };
    return (
       <>
          <Grid container spacing={2}>
-            <Grid item xs={3}>
+            <Grid item xs={4}>
                <FormUser/>
+               <Button variant="outlined" style={btnstyle}>
+                  <Typography variant="subtitle2">
+                     Change Password
+                  </Typography>
+               </Button>
             </Grid>
 
             <Grid item xs={7}>
@@ -39,56 +50,68 @@ export default function User() {
 }
 
 function FormUser() {
-   const user_info = getUser("");
+   const user_info = getUser("Zongxian");
    return (
       <React.Fragment>
          <List>
-            <ListItemButton>
-               <ListItemIcon>
-                  <PersonIcon/>
-               </ListItemIcon>
-               <ListItemText primary={ user_info.user.username }/>
-            </ListItemButton>
+            <ListItem>
+               <ListItemAvatar>
+                  <Avatar>
+                     <PersonIcon/>
+                  </Avatar>
+               </ListItemAvatar>
+               <ListItemText primary="Username" secondary={ user_info.user.username }/>
+            </ListItem>
 
             <Divider />
 
-            <ListItemButton>
-               <ListItemText inset primary="Change password"/>
-            </ListItemButton>
+            <ListItem>
+               <ListItemAvatar>
+                  <Avatar>
+                     <EmailIcon/>
+                  </Avatar>
+               </ListItemAvatar>
+               <ListItemText primary="Email" secondary={ user_info.user.email }/>
+               <Button color="primary" variant="outlined">
+                  <Typography variant="subtitle2">
+                     Change email
+                  </Typography>
+               </Button>
+            </ListItem>
 
             <Divider />
 
-            <ListItemButton>
-               <ListItemIcon>
-                  <EmailIcon/>
-               </ListItemIcon>
-               <ListItemText primary={ user_info.user.email } secondary=""/>
-            </ListItemButton>
-
-            <Divider />
-
-            <ListItemButton>
-               <ListItemIcon>
-                  <PhoneIcon/>
-               </ListItemIcon>
-               <ListItemText primary={ user_info.user.phone }/>
-            </ListItemButton>
+            <ListItem>
+               <ListItemAvatar>
+                  <Avatar>
+                     <EmailIcon/>
+                  </Avatar>
+               </ListItemAvatar>
+               <ListItemText primary="Phone number" secondary={ user_info.user.phone }/>
+               <Button color="primary" variant="outlined">
+                  <Typography variant="subtitle2">
+                     Change phone
+                  </Typography>
+               </Button>
+            </ListItem>
          </List>
       </React.Fragment>
    );
 }
 
 function FormLikedApts() {
-   const reviewed_apts = getReviewedApts("");
+   console.log("Getting apt info")
+   const reviewed_apts = getReviewedApts("Zongxian");
    return (
       <React.Fragment>
          <Box>
             <Stack spacing={2}>
                {reviewed_apts.apartments.map((apt, i) => {
                   return (
-                     <Button variant="outlined">
+                     <Button variant="outlined" key={i} onClick={() => {
+                        console.log("Getting apt info")
+                     }}>
                         {apt.name + " " + apt.address}
-                        onClick = {}
                      </Button>
                   );
                })}