From a4ba28eaef4cd66b6d5416b162ae2f7c785f7912 Mon Sep 17 00:00:00 2001
From: Pau Costa <mico@micodev.es>
Date: Mon, 12 Feb 2024 12:02:39 +0100
Subject: [PATCH] :feature: Notifications

Signed-off-by: Pau Costa <mico@micodev.es>
---
 client/src/components/notificationBell.tsx | 11 ++++++--
 client/src/routes/notification.tsx         | 32 ++++++++++++++++++++--
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/client/src/components/notificationBell.tsx b/client/src/components/notificationBell.tsx
index 064cfb6..b78416a 100644
--- a/client/src/components/notificationBell.tsx
+++ b/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">
-      <Tooltip title="Notifications" >
-        <NotificationsIcon />
+    <Badge badgeContent={0} color="secondary">
+      <Tooltip title="Notifications">
+        <NotificationsIcon onClick={handleClick} />
       </Tooltip>
     </Badge>
   );
diff --git a/client/src/routes/notification.tsx b/client/src/routes/notification.tsx
index 9e98dfc..ab37f1d 100644
--- a/client/src/routes/notification.tsx
+++ b/client/src/routes/notification.tsx
@@ -1,3 +1,31 @@
-export default function Notification() {
-  return <>Notification</>;
+import { useSelector } from "react-redux";
+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>
+  );
 }