From af3417b0d5582ba68badcfe700cc2519503972ed Mon Sep 17 00:00:00 2001
From: sina_sajjadi <alisina.a.a50182@gmail.com@google.com>
Date: Wed, 5 Feb 2025 11:03:21 +0330
Subject: [PATCH] refactor: clean up code formatting and improve scroll
 detection logic in DuaComponent

---
 src/pages/duas/[slug].tsx | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/pages/duas/[slug].tsx b/src/pages/duas/[slug].tsx
index 7006170..b62290a 100644
--- a/src/pages/duas/[slug].tsx
+++ b/src/pages/duas/[slug].tsx
@@ -85,24 +85,22 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
         setDuaParts((prev) => [...prev, ...duaResponse.data.results]);
         console.log(duaResponse);
         getAudio(id);
-        
       } catch (error) {
-        router.replace("/404")
+        router.replace("/404");
         console.log("Error fetching Dua parts:", error);
       } finally {
         setLoading(false);
         setFetching(false); // Reset fetching state after fetching is done
       }
-
     },
     [slug, fetching, duaParts, getAudio]
   ); // Dependencies for fetchData
 
   // Use the memoized fetchData in the effect hook
   useEffect(() => {
-    setDuaParts([]); 
-    
-      fetchData(false); // Fetch data for the first page
+    setDuaParts([]);
+
+    fetchData(false); // Fetch data for the first page
   }, [slug]); // Only slug changes should trigger this effect
 
   // Play audio from a specific part
@@ -224,30 +222,31 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
     }
   }, [recitingPart, duaParts]);
 
-  
-
   const handleScroll = useCallback(
     (e: React.UIEvent<HTMLDivElement>) => {
       const target = e.currentTarget;
-      const isBottom =
-        target.scrollHeight - target.scrollTop === target.clientHeight;
-
-      if (isBottom && !fetching) {
+      const isNearBottom =
+        target.scrollHeight - target.scrollTop - target.clientHeight <= 900; // Trigger when near bottom (100px from the bottom)
+  
+      if (isNearBottom && !fetching) {
         // Only fetch when not already fetching
         fetchData(true);
       }
-
+  
+      console.log(target.scrollHeight, target.scrollTop + 100, target.clientHeight);
+  
       setScrollPosition(target.scrollTop); // Update scroll position
     },
     [fetching]
   );
-  console.log(duaParts[0]?.seo_field);
   
+  console.log(duaParts[0]?.seo_field);
+
   if (!slug) {
     return null; // Handling the case where slug is not available
   }
-  const title = duaParts[0]?.seo_field?.title  // Title derived from slug
-  const description = duaParts[0]?.seo_field?.description;  // You can customize this further
+  const title = duaParts[0]?.seo_field?.title; // Title derived from slug
+  const description = duaParts[0]?.seo_field?.description; // You can customize this further
   const keywords = "dua, islam, prayer, supplication, dua parts"; // Keywords for SEO
 
   return (
@@ -294,7 +293,11 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
                 padding: "1px",
               }}
             >
-              <div className={`p-3 rounded-3xl ${recitingPart === item ? "bg-[#F9F2F1]" :"bg-white" }`}>
+              <div
+                className={`p-3 rounded-3xl ${
+                  recitingPart === item ? "bg-[#F9F2F1]" : "bg-white"
+                }`}
+              >
                 {item.text && (
                   <div
                     className={`mb-4 text-right ${