refactor: clean up code formatting and improve scroll detection logic in DuaComponent

src/pages/duas/[slug].tsx

@@ -85,15 +85,13 @@ 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
@@ -102,7 +100,7 @@ const DuaComponent: React.FC<DuaComponentProps> = ({
   useEffect(() => {
     setDuaParts([]);
 
-      fetchData(false); // Fetch data for the first page
+    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;
+      const isNearBottom =
+        target.scrollHeight - target.scrollTop - target.clientHeight <= 900; // Trigger when near bottom (100px from the bottom)
   
-      if (isBottom && !fetching) {
+      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);
 
   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 ${