diff --git a/src/Components/Notifications/NotificationsList.tsx b/src/Components/Notifications/NotificationsList.tsx index de9618809b4..30c380fe9a6 100644 --- a/src/Components/Notifications/NotificationsList.tsx +++ b/src/Components/Notifications/NotificationsList.tsx @@ -1,5 +1,5 @@ import { navigate } from "raviger"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Spinner from "../Common/Spinner"; import { NOTIFICATION_EVENTS } from "../../Common/constants"; import { Error, Success, Warn } from "../../Utils/Notifications.js"; @@ -183,6 +183,7 @@ export default function NotificationsList({ const [isSubscribed, setIsSubscribed] = useState(""); const [isSubscribing, setIsSubscribing] = useState(false); const [showUnread, setShowUnread] = useState(false); + const observerRef = useRef(null); const { t } = useTranslation(); useEffect(() => { @@ -194,6 +195,26 @@ export default function NotificationsList({ if (open) document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); }, [open]); + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting && data.length < totalCount) { + setOffset((prevOffset) => prevOffset + RESULT_LIMIT); + } + }, + { threshold: 1.0 }, + ); + + if (observerRef.current) { + observer.observe(observerRef.current); + } + + return () => { + if (observerRef.current) { + observer.unobserve(observerRef.current); + } + }; + }, [data, totalCount]); useEffect(() => { let intervalId: ReturnType; if (isSubscribing) { @@ -374,7 +395,15 @@ export default function NotificationsList({ }) .then((res) => { if (res && res.data) { - setData(res.data.results); + setData((prev) => { + const newNotifications = res?.data?.results || []; + const allNotifications = + offset === 0 ? newNotifications : [...prev, ...newNotifications]; + const uniqueNotifications = Array.from( + new Set(allNotifications.map((n) => n.id)), + ).map((id) => allNotifications.find((n) => n.id === id)); + return uniqueNotifications; + }); setUnreadCount( res.data.results?.reduce( (acc: number, result: any) => acc + (result.read_at ? 0 : 1), @@ -391,7 +420,9 @@ export default function NotificationsList({ }); intialSubscriptionState(); }, [reload, open, offset, eventFilter, isSubscribed]); - + useEffect(() => { + setOffset(0); + }, [eventFilter, showUnread]); if (!offset && isLoading) { manageResults = (
@@ -414,27 +445,12 @@ export default function NotificationsList({ setShowNotifications={setOpen} /> ))} +
{isLoading && (
)} - {!showUnread && - totalCount > RESULT_LIMIT && - offset < totalCount - RESULT_LIMIT && ( -
- setOffset((prev) => prev + RESULT_LIMIT)} - > - {isLoading ? t("loading") : t("load_more")} - -
- )} ); } else if (data && data.length === 0) {