added item pagination with 10 items per page and 4 buttons to select from along with arrows

packages/web/src/components/ResultsBar/ResultsBar.jsx

@@ -1,7 +1,8 @@
-import { useContext, useCallback, useState } from "react";
+import { useContext, useCallback, useState, useEffect, useRef } from "react";
 import "./ResultsBar.css";
 import ResultCard from "../ResultCard/ResultCard";
-import { Box, Flex, Text, Button } from "@chakra-ui/react";
+import { Box, Flex, Text, Button, IconButton } from "@chakra-ui/react";
+import { ChevronRightIcon, ChevronLeftIcon } from "@chakra-ui/icons";
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
 import Fuse from "fuse.js";
@@ -18,8 +19,6 @@ export default function ResultsBar({
   const { data, setData } = useContext(DataContext);
   const { user } = UserAuth();
 
-  const [itemsonScreenLimit, setItemsOnScreenLimit] = useState(10);
-
   const filterItemCallback = useCallback(
     (item) => filterItem(item, findFilter, user),
     [findFilter, user]
@@ -60,33 +59,128 @@ export default function ResultsBar({
       ? data.filter(filterItemCallback).map(mapItem)
       : results.filter(filterItemCallback).map(mapItem);
 
-  // Callback function that increases the number of items displayed on the screen by 10
-  const handleLoadMore = useCallback(() => {
-    setItemsOnScreenLimit(itemsonScreenLimit + 10);
-  }, [itemsonScreenLimit]);
 
-  const loadMoreButton = (
+
+
+  // Display only the 10 items on the screen and only 4 buttons (the last one is always there)
+  const itemsOnScreenLimit = 10;
+  const buttonLimit = 3;
+
+  const [selectedPageNumber, setSelectedPageNumber] = useState(1);
+  const [paginationButtons, setPaginationButtons] = useState([])
+  const [viewableResults, setViewableResults] = useState([])
+
+  const changeViewToNewPage = useCallback((newSelectedPage) => {
+    const pageStart = (newSelectedPage * itemsOnScreenLimit) - itemsOnScreenLimit
+    const pageEnd = Math.min((newSelectedPage * itemsOnScreenLimit), allResults.length)
+
+    setViewableResults(allResults.slice(
+      pageStart,
+      pageEnd
+    ));
+  }, [allResults, allResults.length]);
+
+  const updatePaginationButtons = useCallback(
+    (newSelectedPage) => {
+      changeViewToNewPage(newSelectedPage);
+      setSelectedPageNumber(newSelectedPage);
+
+      const maxIndex = Math.floor(allResults.length / itemsOnScreenLimit) + 1;
+      if (newSelectedPage >= maxIndex - buttonLimit) {
+        setPaginationButtons(createPaginationButtons(maxIndex - buttonLimit, newSelectedPage));
+      }
+      else {
+        const startPage = newSelectedPage - ((newSelectedPage - 1) % 3);
+        setPaginationButtons(createPaginationButtons(startPage, newSelectedPage));
+      }
+    },
+    [allResults, allResults.length, changeViewToNewPage]
+  )
+  const PageButton = useCallback(({ keyProp, selected }) => (
     <Button
-      onClick={handleLoadMore}
-      variant="outline"
+      onClick={() => updatePaginationButtons(keyProp)}
+      key={keyProp}
+      variant={selected ? "solid" : "outline"}
+
       colorScheme="blue"
-      width="100%"
-      height={"80px"}
+      width="40px"
+      height={"40px"}
       marginTop="10px"
       marginBottom="10px"
       fontSize={"xl"}
     >
-      Load More
+      {keyProp}
     </Button>
-  );
+  ), [updatePaginationButtons]);
 
-  // Retrieve all items that meet the filter criteria
+  function createPaginationButtons(startPageNumber, selectedPageNumber) {
+    const buttons_array = [];
+    for (let i = startPageNumber; i < startPageNumber + buttonLimit; i++) {
+      buttons_array.push(<PageButton keyProp={i} selected={i == selectedPageNumber} />);
+    }
+    return buttons_array;
+  }
+
+
+  const handlePageArrowClick = useCallback((direction) => {
+    const maxIndex = Math.floor(allResults.length / itemsOnScreenLimit) + 1
+
+    let startPage = 0;
+    let selected = 0;
+    if (direction == "right" && selectedPageNumber < maxIndex) {
+      if (selectedPageNumber >= maxIndex - buttonLimit) {
+        startPage = maxIndex - buttonLimit;
+        selected = maxIndex;
+      }
+      else {
+        startPage = selectedPageNumber + (3 - ((selectedPageNumber - 1) % 3));
+        selected = startPage + ((selectedPageNumber - 1) % 3);
+        if (startPage > maxIndex - buttonLimit)
+          startPage = maxIndex - buttonLimit;
+      }
+
+      setSelectedPageNumber(selected);
+      changeViewToNewPage(selected);
+      setPaginationButtons(createPaginationButtons(startPage, selected));
+    }
+    else if (direction == "left" && selectedPageNumber > 0) {
+      if (selectedPageNumber <= 3) {
+        startPage = 1;
+        selected = 1;
+      }
+      else if (selectedPageNumber == maxIndex) {
+        startPage = maxIndex - 4;
+        selected = maxIndex - 4;
+      }
+      else {
+        startPage = selectedPageNumber - (3 + (selectedPageNumber - 1) % 3);
+        selected = startPage + ((selectedPageNumber - 1) % 3);
+      }
+
+      setSelectedPageNumber(selected);
+      changeViewToNewPage(selected);
+      setPaginationButtons(createPaginationButtons(startPage, selected));
+    }
+  }, [allResults, allResults.length, selectedPageNumber])
+
+
+
+  const firstRender = useRef(true);
+  useEffect(() => {
+    if (!firstRender.current || allResults.length === 0)
+      return;
+
+    firstRender.current = false;
+    const pageStart = (selectedPageNumber * itemsOnScreenLimit) - itemsOnScreenLimit
+    const pageEnd = Math.min((selectedPageNumber * itemsOnScreenLimit), allResults.length)
+
+    setViewableResults(allResults.slice(
+      pageStart,
+      pageEnd
+    ));
+    setPaginationButtons(createPaginationButtons(1, 1));
+  }, [allResults])
 
-  // 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 = (
@@ -100,13 +194,20 @@ export default function ResultsBar({
   return (
     <Box
       paddingX="5px"
-      width={{ base: "90vw", md: "21vw" }}
+      width={{ base: "30vw", md: "21vw" }}
       height="80vh"
       overflowY="scroll"
       overflowX="hidden"
     >
       {allResults.length > 0 ? viewableResults : noResults}
-      {viewableResults.length < allResults.length && loadMoreButton}
+      <Box height="100%" width="100%" display="flex">
+        <Box height="100%" width="100%" display="flex" justifyContent={"space-between"}>
+          <IconButton icon={<ChevronLeftIcon />} height="40px" width="10px" marginTop="10px" marginBottom="10px" onClick={() => handlePageArrowClick("left")} />
+          {paginationButtons}
+          <PageButton keyProp={Math.floor(allResults.length / 10) + 1} selected={Math.floor(allResults.length / 10) + 1 == selectedPageNumber} />
+          <IconButton icon={<ChevronRightIcon />} height="40px" width="10px" marginTop="10px" marginBottom="10px" onClick={() => handlePageArrowClick("right")} />
+        </Box>
+      </Box>
     </Box>
   );
 }

packages/web/src/utils/Utils.js

@@ -1,6 +1,5 @@
 // Define callback function to return filtered items (filtered according to search bar and filter markers)
 const filterItem = (item, findFilter, user) => {
-  console.log(item);
   return (
     ((findFilter.islost && item.islost) ||
       (findFilter.isFound && !item.islost)) &&