Added Infinite Scrolling and Previous Item Persistence in Notifications

ohcnetwork · Oct 13, 2024 · a6920a3 · a6920a3
1 parent cad0b65
commit a6920a3
Showing 1 changed file with 35 additions and 3 deletions.
diff --git 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<typeof setTimeout>;
     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 = (
       <div className="flex items-center justify-center">
@@ -414,6 +445,7 @@ export default function NotificationsList({
               setShowNotifications={setOpen}
             />
           ))}
+        <div ref={observerRef} />
         {isLoading && (
           <div className="flex items-center justify-center">
             <CircularProgress />