Results Bar Scroll to Top

packages/web/src/components/Filter/Filter.jsx

@@ -44,7 +44,6 @@ export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
   }, []);
 
   const handleIsShowReturned = useCallback(() => {
-    console.log("isShowReturned");
     setFindFilter((prev) => ({
       ...prev,
       isShowReturned: !prev.isShowReturned,

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

@@ -1,7 +1,8 @@
-import { useContext, useCallback, useState } from "react";
+import { useContext, useCallback, useRef, useState } from "react";
 import "./ResultsBar.css";
 import ResultCard from "../ResultCard/ResultCard";
-import { Box, Flex, Text, Button } from "@chakra-ui/react";
+import { Box, Button, Flex, Text, IconButton } from "@chakra-ui/react";
+import { ArrowUpIcon } from "@chakra-ui/icons"
 import DataContext from "../../context/DataContext";
 import { UserAuth } from "../../context/AuthContext";
 import Fuse from "fuse.js";
@@ -65,6 +66,14 @@ export default function ResultsBar({
     setItemsOnScreenLimit(itemsonScreenLimit + 10);
   }, [itemsonScreenLimit]);
 
+  // scroll to the top of results bar
+  const handleScrollToTop = useCallback(() => {
+    boxRef.current.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  });
+
   const loadMoreButton = (
     <Button
       onClick={handleLoadMore}
@@ -80,6 +89,27 @@ export default function ResultsBar({
     </Button>
   );
 
+  const boxRef = useRef(null);
+  const scrollToTopButton = (
+    <IconButton
+      isRound={true}
+      size={["md", "lg"]}
+      position="absolute"
+      top={["5%", "10%"]}
+      right={["10%", "20%"]}
+      // top={['5%', '10%']}
+      // right={['5%', '10%', '20%']}
+      onClick={handleScrollToTop}
+      variant={"solid"}
+      colorScheme="blue"
+      opacity={0.5}
+      _hover={{
+        opacity: "1"
+      }}
+      icon={<ArrowUpIcon/>}
+    />
+  );
+
   // Retrieve all items that meet the filter criteria
 
   // Display only the first 10 items on the screen, all items if there are less than 10 items left to be loaded
@@ -99,6 +129,7 @@ export default function ResultsBar({
 
   return (
     <Box
+      ref={boxRef}
       paddingX="5px"
       width={{ base: "90vw", md: "21vw" }}
       height="80vh"
@@ -107,6 +138,7 @@ export default function ResultsBar({
     >
       {allResults.length > 0 ? viewableResults : noResults}
       {viewableResults.length < allResults.length && loadMoreButton}
+      {viewableResults.length > 10 && scrollToTopButton}
     </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)) &&