added scroll feature in top contributor

SUGAM-ARORA · Jul 4, 2024 · c6f65c0 · c6f65c0
1 parent eab1b9f
commit c6f65c0
Show file tree

Hide file tree

Showing 4 changed files with 1,238 additions and 198 deletions.
diff --git a/src/Components/MainContainer.css b/src/Components/MainContainer.css
@@ -229,6 +229,19 @@
   padding: 10px 20px;
 }
 
+
+
+.maincontainer .right .bottom_card {
+  height: 375px; /* Set a fixed height */
+  overflow-y: auto; /* Enable vertical scrolling */
+  scrollbar-width: none; /* Firefox */
+}
+.maincontainer .right .bottom_card::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+
+
 .maincontainer .right .topCard .topCard_name,
 .maincontainer .right .bottom_card .bottomCard_name {
   display: flex;
@@ -391,7 +404,21 @@
     width: 30px;
     height: 30px;
   }
-
+  .bottom_card {
+    height: 500px;
+    overflow-y: scroll;
+  }
+
+  .bottom_card::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .bottom_card {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
   .maincontainer .right .bottom_card .topSeller {
     margin: 20px 0;
   }

diff --git a/src/Components/MainRightBottomCard.js b/src/Components/MainRightBottomCard.js
@@ -1,21 +1,52 @@
-import React, { useState } from "react";
-import TopSeller from "./TopSeller";
+import React, { useState, useEffect, useRef } from 'react';
+import TopSeller from './TopSeller';
 
 function MainRightBottomCard() {
   const [visibleSellers, setVisibleSellers] = useState(3);
+  const [allSellersLoaded, setAllSellersLoaded] = useState(false);
   const [showMore, setShowMore] = useState(false);
+  const profileListRef = useRef(null);
+
+  const loadMoreSellers = () => {
+    setVisibleSellers((prevVisibleSellers) => {
+      const newVisibleSellers = prevVisibleSellers + 3;
+      if (newVisibleSellers >= TopSeller.length) {
+        setAllSellersLoaded(true);
+      }
+      return newVisibleSellers;
+    });
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (profileListRef.current) {
+        const { scrollTop, clientHeight, scrollHeight } = profileListRef.current;
+        if (scrollTop + clientHeight >= scrollHeight - 10 && !allSellersLoaded) {
+          loadMoreSellers();
+        }
+      }
+    };
+
+    const profileListElem = profileListRef.current;
+    profileListElem.addEventListener('scroll', handleScroll);
+
+    return () => {
+      if (profileListElem) {
+        profileListElem.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [allSellersLoaded]);
 
   const handleViewMore = () => {
-    if (showMore) {
-      setVisibleSellers(3);
-    } else {
-      setVisibleSellers(TopSeller.length);
-    }
-    setShowMore(!showMore);
+    setShowMore((prevShowMore) => !prevShowMore);
+    setVisibleSellers((prevVisibleSellers) => 
+      showMore ? 3 : TopSeller.length
+    );
+    setAllSellersLoaded(!showMore); // Reset scroll loading state when toggling
   };
 
   return (
-    <div className="bottom_card">
+    <div className="bottom_card" ref={profileListRef}>
       <div className="bottomCard_name">
         <h2>Top Contributor</h2>
         <a href="#" onClick={handleViewMore}>
@@ -33,14 +64,11 @@ function MainRightBottomCard() {
               {seller?.seller_name} <span>{seller?.username}</span>
             </p>
           </div>
-          <a href="#" className="button">
-            Follow
-          </a>
+          <a href="#" className="button">Follow</a>
         </div>
       ))}
     </div>
   );
 }
 
 export default MainRightBottomCard;
-
diff --git a/src/Components/TopSeller.js b/src/Components/TopSeller.js
@@ -5,11 +5,20 @@ import seller4 from "../img/seller4.jpg";
 import seller5 from "../img/seller5.jpg";
 
 const TopSeller = [
+  { id: 4, seller_name: "Ralph Edwards", username: "@ralph", imgSrc: seller4 },
+
   { id: 1, seller_name: "Jane Cooper", username: "@jane", imgSrc: seller1 },
   { id: 2, seller_name: "Ariene McCoy", username: "@ariene", imgSrc: seller2 },
   { id: 3, seller_name: "Theresa Webb", username: "@theresa", imgSrc: seller3 },
   { id: 4, seller_name: "Ralph Edwards", username: "@ralph", imgSrc: seller4 },
+  { id: 2, seller_name: "Ariene McCoy", username: "@ariene", imgSrc: seller2 },
+  { id: 2, seller_name: "Ariene McCoy", username: "@ariene", imgSrc: seller2 },
+  { id: 4, seller_name: "Ralph Edwards", username: "@ralph", imgSrc: seller4 },
+  { id: 2, seller_name: "Ariene McCoy", username: "@ariene", imgSrc: seller2 },
+  { id: 2, seller_name: "Ariene McCoy", username: "@ariene", imgSrc: seller2 },
   { id: 5, seller_name: "Raplhie", username: "@raplhie", imgSrc: seller5 },
+  { id: 4, seller_name: "Ralph Edwards", username: "@ralph", imgSrc: seller4 },
+
 ];
 
 export default TopSeller;