diff --git a/src/components/elements/Notification/FloatNotification.tsx b/src/components/elements/Notification/FloatNotification.tsx index abe95792..2f0480bf 100644 --- a/src/components/elements/Notification/FloatNotification.tsx +++ b/src/components/elements/Notification/FloatNotification.tsx @@ -1,5 +1,5 @@ import classNames from "classnames"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { When } from "react-if"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; @@ -22,7 +22,7 @@ export interface FloatNotificationProps { const FloatNotification = () => { const [openModalNotification, setOpenModalNotification] = useState(false); const [isLoaded, { delayedJobs }] = useDelayedJobs(); - + const [notAcknowledgedJobs, setNotAcknowledgedJobs] = useState([]); const clearJobs = () => { if (delayedJobs === undefined) return; const newJobsData: DelayedJobData[] = delayedJobs.map((job: DelayedJobDto) => { @@ -36,6 +36,11 @@ const FloatNotification = () => { }); triggerBulkUpdate(newJobsData); }; + useEffect(() => { + if (delayedJobs === undefined) return; + const notAcknowledgedJobs = delayedJobs.filter((job: DelayedJobDto) => !job.isAcknowledged); + setNotAcknowledgedJobs(notAcknowledgedJobs); + }, [delayedJobs]); return (
@@ -60,8 +65,8 @@ const FloatNotification = () => {
{isLoaded && - delayedJobs && - delayedJobs.map((item, index) => ( + notAcknowledgedJobs && + notAcknowledgedJobs.map((item, index) => (
@@ -87,9 +92,9 @@ const FloatNotification = () => {
- 0}> + 0}>
- {delayedJobs?.length} + {notAcknowledgedJobs?.length}