:feature: Notifications

Signed-off-by: Pau Costa <mico@micodev.es>

client/src/components/notificationBell.tsx

@@ -1,11 +1,16 @@
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { Badge, Tooltip } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 
 export default function NotificationBell() {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate("/notifications");
+  };
   return (
-    <Badge badgeContent={4} color="secondary">
+    <Badge badgeContent={0} color="secondary">
       <Tooltip title="Notifications">
-        <NotificationsIcon />
+        <NotificationsIcon onClick={handleClick} />
       </Tooltip>
     </Badge>
   );

client/src/routes/notification.tsx

@@ -1,3 +1,31 @@
-export default function Notification() {
+import { useSelector } from "react-redux";
-  return <>Notification</>;
+import { selectUserInfo } from "../app/loginSlice";
+import { Box, List, ListItem, Paper } from "@mui/material";
+
+export default function ANotification() {
+  const userInfo = useSelector(selectUserInfo);
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column" }}>
+      <List sx={{ width: "100%" }}>
+        {userInfo.notifications.length === 0 ? (
+          <ListItem sx={{ width: "100%" }}>No notifications</ListItem>
+        ) : (
+          userInfo.notifications.map((notification: any) => (
+            <ListItem key={notification.id} sx={{ width: "100%" }}>
+              <Paper
+                sx={{
+                  width: "100%",
+                  margin: "1rem",
+                  padding: "0.2rem 1rem 0.2rem 1rem",
+                }}
+              >
+                {notification.message}
+              </Paper>
+            </ListItem>
+          ))
+        )}
+      </List>
+    </Box>
+  );
 }