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() {