From 6fbfe81918bee023c95ba56e9162375c292adae6 Mon Sep 17 00:00:00 2001
From: Pau Costa <mico@micodev.es>
Date: Mon, 12 Feb 2024 12:19:36 +0100
Subject: [PATCH] :lipstick: Fixed the position of the appbars, and fixed some
 minor UI bugs

Signed-off-by: Pau Costa <mico@micodev.es>
---
 client/src/components/bottomAppBar.tsx | 15 ++++++++++++---
 client/src/components/topAppBar.tsx    |  2 +-
 client/src/routes/search.tsx           |  4 ++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/bottomAppBar.tsx b/client/src/components/bottomAppBar.tsx
index a94ff78..887039c 100644
--- a/client/src/components/bottomAppBar.tsx
+++ b/client/src/components/bottomAppBar.tsx
@@ -1,14 +1,19 @@
 import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FeedIcon from "@mui/icons-material/Feed";
 import GlobalIcon from "@mui/icons-material/Public";
 import AddIcon from "@mui/icons-material/Add";
 import SearchIcon from "@mui/icons-material/Search";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export default function BottomAppBar() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState("");
   const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    setValue(location.pathname.replace("/", ""));
+  }, [location]);
 
   const handleClick = (to: string) => () => {
     navigate(to);
@@ -27,21 +32,25 @@ export default function BottomAppBar() {
       >
         <BottomNavigationAction
           label="My Feed"
+          value="feed"
           icon={<FeedIcon />}
           onClick={handleClick("feed")}
         />
         <BottomNavigationAction
           label="Global Feed"
+          value="global"
           icon={<GlobalIcon />}
           onClick={handleClick("global")}
         />
         <BottomNavigationAction
           label="New Post"
+          value="newpost"
           icon={<AddIcon />}
           onClick={handleClick("newpost")}
         />
         <BottomNavigationAction
           label="Search"
+          value="search"
           icon={<SearchIcon />}
           onClick={handleClick("search")}
         />
diff --git a/client/src/components/topAppBar.tsx b/client/src/components/topAppBar.tsx
index 75dbdfd..182d6b2 100644
--- a/client/src/components/topAppBar.tsx
+++ b/client/src/components/topAppBar.tsx
@@ -51,7 +51,7 @@ function TopAppBar(props: TopAppBarProps) {
 
   return (
     <AppBar
-      position="absolute"
+      position="fixed"
       sx={{ zIndex: 1600, height: `${props.height}px` }}
     >
       <Toolbar disableGutters>
diff --git a/client/src/routes/search.tsx b/client/src/routes/search.tsx
index 3fa088d..c7d4799 100644
--- a/client/src/routes/search.tsx
+++ b/client/src/routes/search.tsx
@@ -62,7 +62,7 @@ export default function Search() {
       <Paper>
         <List>
           {displayUserList.map((user) => (
-            <>
+            <Box key={user.id}>
               <ListItem key={user.id}>
                 <Button
                   fullWidth
@@ -78,7 +78,7 @@ export default function Search() {
                 </Button>
               </ListItem>
               <Divider sx={{ mb: "0.3rem" }} />
-            </>
+            </Box>
           ))}
         </List>
       </Paper>