Implement pagination on the search page for

users and badges from endpoints

Signed-off-by: Olamide Ojo
<peterojoolamide@gmail.com>

Author: olamidepeterojo

frontend/src/features/call.js

@@ -43,11 +43,12 @@ export const callUnit = createApi({
       providesTags: ["AccoList"],
     }),
     retrieveDiscover: builder.query({
-      query: (discover) => ({
+      query: ({ discover, page_badges, page_users, per_page }) => ({
         url: `search/${discover}`,
         method: "GET",
+        params: { page_badges, page_users, per_page },
       }),
-      providesTags: (result, error, discover) => [{ type: "Discover", id: discover }],
+      providesTags: (result, error, { discover }) => [{ type: "Discover", id: discover }],
     }),
     retrieveRarities: builder.query({
       query: (rarities) => `rarities/${rarities}`,

frontend/src/routes/findpage.jsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect,useState } from "react";
 import { Badge, Card, ListGroup } from "react-bootstrap";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router";
@@ -12,7 +12,20 @@ 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 [userPage, setUserPage] = useState(1);
+  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);
 
   // Show or Hide LoadNote
@@ -52,7 +65,7 @@ export default function FindPage() {
             <Card.Title className="mb-0 ps-2 dataelem" style={{ textTransform: "capitalize" }}>
               Badges
             </Card.Title>
-            <Card.Text className="mb-0 ps-2 small">Found {dict.badges.length} badge(s)</Card.Text>
+            <Card.Text className="mb-0 ps-2 small">Found {dict.pagination?.badges_total} badge(s)</Card.Text>
             <hr className="mt-2 mb-0" />
             <ListGroup variant="flush">
               {dict.badges.length > 0 ? (
@@ -74,6 +87,21 @@ export default function FindPage() {
                 <VertItem head="No badges found" body="Try refining your search" />
               )}
             </ListGroup>
+            <div className="d-flex justify-content-between p-2">
+              <button
+                disabled={!dict?.pagination?.badges?.has_prev}
+                onClick={() => setBadgePage((prev) => prev - 1)}
+              >
+                Previous
+              </button>
+
+              <button
+                disabled={!dict?.pagination?.badges?.has_next}
+                onClick={() => setBadgePage((prev) => prev + 1)}
+              >
+                Next
+              </button>
+            </div>
           </Card.Body>
         </Card>
         <Card className="mb-2 vibe-border" style={{ "--vibe": vibe }}>
@@ -103,6 +131,21 @@ export default function FindPage() {
                 <VertItem head="No users found" body="Try refining your search" />
               )}
             </ListGroup>
+            <div className="d-flex justify-content-between p-2">
+              <button
+                disabled={!dict?.pagination?.users?.has_prev}
+                onClick={() => setUserPage((prev) => prev - 1)}
+              >
+                Previous
+              </button>
+
+              <button
+                disabled={!dict?.pagination?.users?.has_next}
+                onClick={() => setUserPage((prev) => prev + 1)}
+              >
+                Next
+              </button>
+            </div>
           </Card.Body>
         </Card>
       </div>

tahrir/__init__.py

@@ -4,5 +4,4 @@
 
 import importlib.metadata
 
-
 __version__ = importlib.metadata.version("tahrir")

tahrir/admin.py

@@ -5,7 +5,6 @@
 
 from .database import db
 
-
 admin = Admin(name="Database", url="/dbadmin", endpoint="dbadmin", template_mode="bootstrap4")
 
 

tahrir/app.py

@@ -23,7 +23,6 @@
 from tahrir.views import add_static_view, internal_server_error, page_not_found
 from tahrir.views import blueprint as root_bp
 
-
 # Forms
 csrf = CSRFProtect()
 

tahrir/cli.py

@@ -9,7 +9,6 @@
 from tahrir.database import db
 from tahrir.utils.badge import ISSUER
 
-
 tahrir_cli = AppGroup("tahrir")
 """Commands for the Tahrir application."""
 

tahrir/defaults.py

@@ -2,7 +2,6 @@
 
 import os
 
-
 BASE_PATH = os.path.dirname(os.path.abspath(__file__))
 
 

tahrir/endpoints/__init__.py

@@ -1,6 +1,5 @@
 from flask import Blueprint, jsonify
 
-
 blueprint = Blueprint("api", __name__)
 
 

tahrir/endpoints/admin/__init__.py

@@ -1,6 +1,5 @@
 from flask import Blueprint, jsonify
 
-
 blueprint = Blueprint("admin", __name__)
 
 

tahrir/endpoints/admin/authorizations.py

@@ -31,11 +31,15 @@ def add_authorization():
     if not result:
         return abort(400, "Failed to add authorization")
 
-    return jsonify(
-        {
-            "message": f"Badge {data.get(required_fields[0])!r} authorized to {data.get(required_fields[1])!r}"
-        }
-    ), 201
+    return (
+        jsonify(
+            {
+                "message": f"Badge {data.get(required_fields[0])!r} /"
+                f" authorized to {data.get(required_fields[1])!r}"
+            }
+        ),
+        201,
+    )
 
 
 @bp.route("/api/admin/authorization", methods=["DELETE"])
@@ -64,8 +68,12 @@ def remove_authorization():
     if not result:
         return abort(404, "Authorization not found or failed to remove")
 
-    return jsonify(
-        {
-            "message": f"Badge {data.get(required_fields[0])!r} authorization revoked from {data.get(required_fields[1])!r}"
-        }
-    ), 200
+    return (
+        jsonify(
+            {
+                "message": f"Badge {data.get(required_fields[0])!r} authorization "
+                f"revoked from {data.get(required_fields[1])!r}"
+            }
+        ),
+        200,
+    )