From 48467fc5488e539443c3dec37998a78388ffa398 Mon Sep 17 00:00:00 2001
From: tentsundue <tentsundue28@gmail.com>
Date: Sat, 23 Mar 2024 02:21:14 -0700
Subject: [PATCH 1/3] Fully functional load more button

---
 src/components/ResultsBar/ResultsBar.jsx | 30 +++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx
index f79872a..6b7b72c 100644
--- a/src/components/ResultsBar/ResultsBar.jsx
+++ b/src/components/ResultsBar/ResultsBar.jsx
@@ -1,7 +1,7 @@
-import { useContext, useCallback } from "react";
+import { useContext, useCallback, useState } from "react";
 import "./ResultsBar.css";
 import ResultCard from "../ResultCard/ResultCard";
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text, Button } from "@chakra-ui/react";
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
 export default function ResultsBar({
@@ -14,6 +14,8 @@ export default function ResultsBar({
   const { data, setData } = useContext(DataContext);
   const { user } = UserAuth();
 
+  const [itemsonScreenLimit, setItemsOnScreenLimit] = useState(10);
+
   // Define callback function to return filtered items (filtered according to search bar and filter markers)
   const filterItem = useCallback(
     (item) => {
@@ -66,8 +68,29 @@ export default function ResultsBar({
     },
     [setFocusLocation, onResultsBarClose, setData, setLeaderboard]
   );
+  
+  // Callback function that increases the number of items displayed on the screen by 10
+  const handleLoadMore = useCallback(() => { 
+    setItemsOnScreenLimit(itemsonScreenLimit + 10);
+  }, [itemsonScreenLimit]);
 
+  const loadMoreButton = (
+    <Button
+      onClick={handleLoadMore}
+      variant="solid"
+      colorScheme="blue"
+      width="100%"
+      marginTop="10px"
+      marginBottom="10px"
+    >
+      Load More
+    </Button>
+  );
+  
+  // Retrieve all items that meet the filter criteria
   const allResults = data.filter(filterItem).map(mapItem);
+  // Display only the first 10 items on the screen, all items if there are less than 10 items left to be loaded
+  const viewableResults = allResults.slice(0, Math.min(itemsonScreenLimit, allResults.length));
 
   // Define JSX for empty results bar (no result cards)
   const noResults = (
@@ -86,7 +109,8 @@ export default function ResultsBar({
       overflowY="scroll"
       overflowX={"hidden"}
     >
-      {allResults.length > 0 ? allResults : noResults}
+      {allResults.length > 0 ? viewableResults : noResults}
+      {loadMoreButton}
     </Box>
   );
 }

From 378d6932dd58307d0394d27bb749146a066c07de Mon Sep 17 00:00:00 2001
From: tentsundue <tentsundue28@gmail.com>
Date: Sat, 23 Mar 2024 03:01:00 -0700
Subject: [PATCH 2/3] Made sure button dissapears when all items are loaded.

---
 src/components/ResultsBar/ResultsBar.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx
index 6b7b72c..c5f9f86 100644
--- a/src/components/ResultsBar/ResultsBar.jsx
+++ b/src/components/ResultsBar/ResultsBar.jsx
@@ -89,6 +89,7 @@ export default function ResultsBar({
   
   // Retrieve all items that meet the filter criteria
   const allResults = data.filter(filterItem).map(mapItem);
+  
   // Display only the first 10 items on the screen, all items if there are less than 10 items left to be loaded
   const viewableResults = allResults.slice(0, Math.min(itemsonScreenLimit, allResults.length));
 
@@ -110,7 +111,7 @@ export default function ResultsBar({
       overflowX={"hidden"}
     >
       {allResults.length > 0 ? viewableResults : noResults}
-      {loadMoreButton}
+      {viewableResults.length < allResults.length && loadMoreButton}
     </Box>
   );
 }

From cf5472fe9db0027675d2948b94074e6cc2e460d7 Mon Sep 17 00:00:00 2001
From: Dang Nguyen Nguyen <93059380+NwinNwin@users.noreply.github.com>
Date: Mon, 15 Apr 2024 11:03:06 -0700
Subject: [PATCH 3/3] edited minor styling issue

---
 src/components/ResultsBar/ResultsBar.jsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/ResultsBar/ResultsBar.jsx b/src/components/ResultsBar/ResultsBar.jsx
index c5f9f86..8dca1c7 100644
--- a/src/components/ResultsBar/ResultsBar.jsx
+++ b/src/components/ResultsBar/ResultsBar.jsx
@@ -68,30 +68,35 @@ export default function ResultsBar({
     },
     [setFocusLocation, onResultsBarClose, setData, setLeaderboard]
   );
-  
+
   // Callback function that increases the number of items displayed on the screen by 10
-  const handleLoadMore = useCallback(() => { 
+  const handleLoadMore = useCallback(() => {
     setItemsOnScreenLimit(itemsonScreenLimit + 10);
   }, [itemsonScreenLimit]);
 
   const loadMoreButton = (
     <Button
       onClick={handleLoadMore}
-      variant="solid"
+      variant="outline"
       colorScheme="blue"
       width="100%"
+      height={"80px"}
       marginTop="10px"
       marginBottom="10px"
+      fontSize={"xl"}
     >
       Load More
     </Button>
   );
-  
+
   // Retrieve all items that meet the filter criteria
   const allResults = data.filter(filterItem).map(mapItem);
-  
+
   // Display only the first 10 items on the screen, all items if there are less than 10 items left to be loaded
-  const viewableResults = allResults.slice(0, Math.min(itemsonScreenLimit, allResults.length));
+  const viewableResults = allResults.slice(
+    0,
+    Math.min(itemsonScreenLimit, allResults.length)
+  );
 
   // Define JSX for empty results bar (no result cards)
   const noResults = (