diff --git a/src/components/NotificationBell.jsx b/src/components/NotificationBell.jsx index b9ec8fc..a6c9ee5 100644 --- a/src/components/NotificationBell.jsx +++ b/src/components/NotificationBell.jsx @@ -1,7 +1,6 @@ //He de fer un fetch a les notificacions de l'usuari i mostrar-les en NotificationsCard cadascuna //React import React, { useState, useEffect } from 'react' -import { Container, Row, Col } from "react-bootstrap" import NotificationCard from "./NotificationCard" import Dropdown from 'react-bootstrap/Dropdown'; import { BellFill } from 'react-bootstrap-icons'; @@ -39,13 +38,19 @@ export default function NotificationBell() { const currentUserUsername = localStorage.getItem('currentUser') const handleStatusChange = (id, newStatus) => { - setNotifications(notifications.map(notification => + if (notifications === null) { + return; + } + setNotifications(notifications?.map(notification => notification.id === id ? { ...notification, status: newStatus } : notification )); }; const getUnreadNotifications = () => { - return notifications.filter(notification => notification.status === "unread").length; + if (notifications === null || notifications.length === 0 || !Array.isArray(notifications)) { + return 0; + } + return notifications?.filter(notification => notification.status === "unread").length; } const getRecipes = () => { @@ -57,6 +62,7 @@ export default function NotificationBell() { }) .catch((error) => { console.error("Error al obtenir notificacions:", error) + setNotifications([]) }); }; @@ -64,6 +70,9 @@ export default function NotificationBell() { getRecipes() }, []) + if (currentUserUsername === null || notifications === null || notifications.length === 0) { + return null; + } return ( <> @@ -76,7 +85,7 @@ export default function NotificationBell() { - {notifications.map(notification => ( + {notifications.length > 0 && notifications?.map(notification => ( e.stopPropagation()} diff --git a/src/components/NotificationCard.jsx b/src/components/NotificationCard.jsx index a969555..9951270 100644 --- a/src/components/NotificationCard.jsx +++ b/src/components/NotificationCard.jsx @@ -29,9 +29,9 @@ export default function NotificationCard({ notification, username, onStatusChang
- Card title + {notification.type} - {notification.username} ha fet {notification.text} + {notification.username} {notification.text} {moment.utc(notification.date).fromNow()} diff --git a/src/components/Notifications.jsx b/src/components/Notifications.jsx index 5f4336d..f2414df 100644 --- a/src/components/Notifications.jsx +++ b/src/components/Notifications.jsx @@ -26,14 +26,14 @@ export default function Notifications() { const currentUserUsername = localStorage.getItem('currentUser') const handleStatusChange = (id, newStatus) => { - setNotifications(notifications.map(notification => + setNotifications(notifications?.map(notification => notification.id === id ? { ...notification, status: newStatus } : notification )); }; - // const getUnreadNotifications = () => { - // return notifications.filter(notification => notification.status === "unread").length; - // } + const getUnreadNotifications = () => { + return notifications.filter(notification => notification.status === "unread").length; + } const getRecipes = () => { console.log("Fetching notifications..."); @@ -57,7 +57,7 @@ export default function Notifications() { - {notifications.map(notification => ( + {notifications?.map(notification => (