diff --git a/frontend/src/routes/findpage.jsx b/frontend/src/routes/findpage.jsx index 5952c888..2a2cb5d8 100644 --- a/frontend/src/routes/findpage.jsx +++ b/frontend/src/routes/findpage.jsx @@ -1,5 +1,7 @@ -import { useEffect } from "react"; -import { Badge, Card, ListGroup } from "react-bootstrap"; +import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; +import Icon from "@mdi/react"; +import { useEffect, useState } from "react"; +import { Badge, Button, Card, ListGroup } from "react-bootstrap"; import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router"; @@ -12,9 +14,63 @@ import Mistaken from "./mistaken.jsx"; export default function FindPage() { const dispatch = useDispatch(); const { slugdata: findtext } = useParams(); - const { data: dict, isLoading, error } = useRetrieveDiscoverQuery(findtext, { skip: false }); + const [badgePage, setBadgePage] = useState(1); + const [badgePaginating, setBadgePaginating] = useState(false); + const [userPage, setUserPage] = useState(1); + const [userPaginating, setUserPaginating] = useState(false); + const { data: dict, isLoading, error } = useRetrieveDiscoverQuery({ + discover: findtext, + page_badges: badgePage, + page_users: userPage, + per_page: 10, + }, + {skip: false} + ); + useEffect(() => { + setBadgePage(1); + setUserPage(1); + }, [findtext]); const vibe = useSelector((data) => data.area.vibe); + // Badge Pagination handlers + const handleNextBadgePage = () => { + setBadgePaginating(true); + setBadgePage((prev) => prev + 1); + }; + + const handlePrevBadgePage = () => { + setBadgePaginating(true); + if (badgePage > 1) { + setBadgePage(badgePage - 1); + } + }; + + // User Pagination handlers + const handleNextUserPage = () => { + setUserPaginating(true); + setUserPage((prev) => prev + 1); + }; + + const handlePrevUserPage = () => { + setUserPaginating(true); + if (userPage > 1) { + setUserPage(userPage - 1); + } + }; + + const haveNextBadgePage = dict?.pagination?.badges?.has_next; + const havePrevBadgePage = dict?.pagination?.badges?.has_prev; + const haveNextUserPage = dict?.pagination?.users?.has_next; + const havePrevUserPage = dict?.pagination?.users?.has_prev; + + useEffect(() => { + setBadgePaginating(false); + }, [dict?.badges]); + + useEffect(() => { + setUserPaginating(false); + }, [dict?.users]); + // Show or Hide LoadNote useEffect(() => { if (isLoading) { @@ -52,7 +108,7 @@ export default function FindPage() { Badges - Found {dict.badges.length} badge(s) + Found {dict.pagination?.badges_total} badge(s)
{dict.badges.length > 0 ? ( @@ -74,6 +130,31 @@ export default function FindPage() { )} +
+ + + {dict?.pagination?.badges?.page} of {dict?.pagination?.badges?.pages} + + +
@@ -103,6 +184,31 @@ export default function FindPage() { )} +
+ + + {dict?.pagination?.users?.page} of {dict?.pagination?.users?.pages} + + +