Connect with The Chatbot

SUGAM-ARORA · Jul 6, 2024 · d7ad62b · d7ad62b
2 parents 7a9bbe9 + 413b417
commit d7ad62b
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 143 deletions.
diff --git a/.github/workflows/mkdocs.yaml b/.github/workflows/mkdocs.yaml
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;
diff --git a/yarn.lock b/yarn.lock
@@ -284,7 +284,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.7":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.24.7":
   version "7.24.7"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz"
   integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
@@ -1119,7 +1119,7 @@
   resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.24.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz"
   integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
@@ -3679,7 +3679,7 @@ argparse@^2.0.1:
   resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^5.0.0, aria-query@5.3.0:
+aria-query@^5.0.0, aria-query@^5.3.0:
   version "5.3.0"
   resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
@@ -4854,35 +4854,6 @@ dedent@^0.7.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-dedent@^1.0.0:
-  version "1.5.3"
-  resolved "https://registry.npmjs.org/dedent/-/dedent-1.5.3.tgz"
-  integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
-
-deep-equal@^2.0.5:
-  version "2.2.3"
-  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz"
-  integrity sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.5"
-    es-get-iterator "^1.1.3"
-    get-intrinsic "^1.2.2"
-    is-arguments "^1.1.1"
-    is-array-buffer "^3.0.2"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
-    isarray "^2.0.5"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    side-channel "^1.0.4"
-    which-boxed-primitive "^1.0.2"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.13"
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -5567,7 +5538,7 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^4.0.0"
 
-eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || ^8.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", "eslint@^7.5.0 || ^8.0.0", "eslint@^7.5.0 || ^8.0.0 || ^9.0.0", eslint@^8.0.0, eslint@^8.1.0, eslint@^8.3.0, eslint@^8.57.0, "eslint@>= 6":
+eslint@^8.3.0:
   version "8.57.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -6534,25 +6505,17 @@ intl-messageformat@10.5.14:
     "@formatjs/icu-messageformat-parser" "2.7.8"
     tslib "^2.4.0"
 
-ipaddr.js@^2.0.1:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz"
-  integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
-  dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
+ipaddr.js@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz"
+  integrity sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==
 
-is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+is-array-buffer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz"
   integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
@@ -10270,26 +10233,10 @@ statuses@2.0.1:
   resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-stop-iteration-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz"
-  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
-  dependencies:
-    internal-slot "^1.0.4"
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
 string-length@^4.0.1:
   version "4.0.2"