From bff430602d85a690d3b9f51e8405ca35c05f8012 Mon Sep 17 00:00:00 2001 From: Kelvin Date: Fri, 10 Jan 2025 02:04:10 -0300 Subject: [PATCH] placed buttom and initial logic --- .../src/pages/catalogue/catalogue.tsx | 54 ++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index 14a9f4d6..aca21f65 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -21,6 +21,8 @@ import { useCatalogue } from "@renderer/hooks/use-catalogue"; import { GameItem } from "./game-item"; import { FilterItem } from "./filter-item"; import { debounce } from "lodash-es"; +import { Button } from "@renderer/components"; +import { ArrowUpIcon } from "@primer/octicons-react"; const filterCategoryColors = { genres: "hsl(262deg 50% 47%)", @@ -31,6 +33,8 @@ const filterCategoryColors = { }; const PAGE_SIZE = 20; +const TOTAL_ITEMS_TO_SHOW_GO_UP_BUTTOM = 10 +const LIMIT_SCROLL_TO_DISAPEAR_GO_UP_BUTTOM = 225 export default function Catalogue() { const abortControllerRef = useRef(null); @@ -46,6 +50,8 @@ export default function Catalogue() { const [isLoading, setIsLoading] = useState(true); const [results, setResults] = useState([]); + + const [wantGoUpButtonIsVisible, setWantGoUpButtonIsVisible] = useState(false) const [itemsCount, setItemsCount] = useState(0); @@ -78,13 +84,35 @@ export default function Catalogue() { }, 500) ).current; + useEffect(() => { + results.length > 0 && results.length <= TOTAL_ITEMS_TO_SHOW_GO_UP_BUTTOM ? setWantGoUpButtonIsVisible(true) : setWantGoUpButtonIsVisible(false) + console.log(cataloguePageRef.current?.scrollTop) + }, [results]) + + useEffect(() => { + const handleScroll = () => { + if (cataloguePageRef.current) { + console.log(cataloguePageRef.current.scrollTop) + // setScrollPosition(cataloguePageRef.current.scrollTop); + } + }; + + if(cataloguePageRef.current){ + cataloguePageRef.current.addEventListener("scroll", handleScroll); + } + + return () => { + cataloguePageRef.current?.removeEventListener("scroll", handleScroll); + }; + }, []); + useEffect(() => { setResults([]); setIsLoading(true); abortControllerRef.current?.abort(); debouncedSearch(filters, PAGE_SIZE, (page - 1) * PAGE_SIZE); - + return () => { debouncedSearch.cancel(); }; @@ -228,6 +256,16 @@ export default function Catalogue() { t, ]); + const handleWantGoUpButtonClick = () => { + if(cataloguePageRef.current){ + cataloguePageRef.current.scrollTo({ + top: 0, + behavior: 'smooth' + }) + setWantGoUpButtonIsVisible(false) + } + } + return (
+ + {wantGoUpButtonIsVisible && ( +
+ +
+ )} +