Fix some nulls....

UB-ES-2023-A2 · Dec 15, 2023 · 836f078 · 836f078
1 parent cd4a3e7
commit 836f078
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git 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,13 +62,17 @@ export default function NotificationBell() {
       })
       .catch((error) => { 
         console.error("Error al obtenir notificacions:", error)
+        setNotifications([])
       });
   };
 
   useEffect(() => {
     getRecipes()
   }, [])
 
+  if (currentUserUsername === null || notifications === null || notifications.length === 0) {
+    return null;
+  }
   return (
     <>
 
@@ -76,7 +85,7 @@ export default function NotificationBell() {
       </CustomToggle>
 
       <Dropdown.Menu style={{ maxHeight: '50vh', overflowY: 'auto', overflowX: 'hidden', backgroundColor: '#ffe7df' }}>
-        {notifications.map(notification => (
+        {notifications.length > 0 && notifications?.map(notification => (
             <Dropdown.Item
             className="my-dropdown-item"
             onClick={(e) => e.stopPropagation()}

diff --git a/src/components/NotificationCard.jsx b/src/components/NotificationCard.jsx
@@ -29,9 +29,9 @@ export default function NotificationCard({ notification, username, onStatusChang
             <Card.Img variant="top" src={notification.image} />
           </div>
           <div className="col-md-8">
-            <Card.Title>Card title</Card.Title>
+            <Card.Title>{notification.type}</Card.Title>
             <Card.Text>
-              <Link to={`/users/${notification.username}`}>{notification.username}</Link> ha fet {notification.text}
+              <Link to={`/users/${notification.username}`}>{notification.username}</Link> {notification.text}
             </Card.Text>
             <Card.Text>
               <small className="text-muted">{moment.utc(notification.date).fromNow()}</small>

diff --git 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() {
     <Timer method={getRecipes} />
 
     <Container>
-        {notifications.map(notification => (
+        {notifications?.map(notification => (
             <Row key={notification.id}>
                 <Col xs={12}>
                     <NotificationCard