feat: autoscroll

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

@@ -1,4 +1,4 @@
-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";
@@ -19,6 +19,8 @@ export default function ResultsBar({
  const { user } = UserAuth();
 
  const [itemsonScreenLimit, setItemsOnScreenLimit] = useState(10);
+ const [isAutoScrolling, setIsAutoScrolling] = useState(true);
+ const resultsBarRef = useRef(null);
 
  const filterItemCallback = useCallback(
  (item) => filterItem(item, findFilter, user),
@@ -60,7 +62,6 @@ 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]);
@@ -80,15 +81,11 @@ export default function ResultsBar({
  </Button>
  );
 
- // 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
  const viewableResults = allResults.slice(
  0,
  Math.min(itemsonScreenLimit, allResults.length)
  );
 
- // Define JSX for empty results bar (no result cards)
  const noResults = (
  <Flex height="80%" width="100%" justifyContent="center" alignItems="center">
  <Text fontSize="4xl" as="b" color="gray">
@@ -97,16 +94,38 @@ export default function ResultsBar({
  </Flex>
  );
 
+ useEffect(() => {
+ let scrollInterval;
+ if (isAutoScrolling && resultsBarRef.current) {
+ scrollInterval = setInterval(() => {
+ if (resultsBarRef.current.scrollTop + resultsBarRef.current.clientHeight < resultsBarRef.current.scrollHeight) {
+ resultsBarRef.current.scrollTop += 1;
+ } else {
+ resultsBarRef.current.scrollTop = 0;
+ }
+ }, 50);
+ }
+ return () => clearInterval(scrollInterval);
+ }, [isAutoScrolling]);
+
+ const handleUserInteraction = () => {
+ setIsAutoScrolling(false);
+ };
+
  return (
  <Box
  paddingX="5px"
  width={{ base: "90vw", md: "21vw" }}
  height="80vh"
  overflowY="scroll"
  overflowX="hidden"
+ ref={resultsBarRef}
+ onMouseEnter={handleUserInteraction}
+ onWheel={handleUserInteraction}
+ onTouchStart={handleUserInteraction}
  >
  {allResults.length > 0 ? viewableResults : noResults}
  {viewableResults.length < allResults.length && loadMoreButton}
  </Box>
  );
-}
+}