diff --git a/packages/web/src/components/ResultsBar/ResultsBar.jsx b/packages/web/src/components/ResultsBar/ResultsBar.jsx
index 23ba064..5a67dcf 100644
--- a/packages/web/src/components/ResultsBar/ResultsBar.jsx
+++ b/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({
);
- // 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 = (
@@ -97,6 +94,24 @@ export default function ResultsBar({
);
+ 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 (
{allResults.length > 0 ? viewableResults : noResults}
{viewableResults.length < allResults.length && loadMoreButton}
);
-}
+}
\ No newline at end of file