Skip to content

Commit a47bf07

Browse files
Implement pagination on the search page for
users and badges from endpoints Signed-off-by: Olamide Ojo <peterojoolamide@gmail.com>
1 parent c2c395f commit a47bf07

File tree

17 files changed

+189
-54
lines changed

17 files changed

+189
-54
lines changed

frontend/src/features/call.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,12 @@ export const callUnit = createApi({
4343
providesTags: ["AccoList"],
4444
}),
4545
retrieveDiscover: builder.query({
46-
query: (discover) => ({
46+
query: ({ discover, page_badges, page_users, per_page }) => ({
4747
url: `search/${discover}`,
4848
method: "GET",
49+
params: { page_badges, page_users, per_page },
4950
}),
50-
providesTags: (result, error, discover) => [{ type: "Discover", id: discover }],
51+
providesTags: (result, error, { discover }) => [{ type: "Discover", id: discover }],
5152
}),
5253
retrieveRarities: builder.query({
5354
query: (rarities) => `rarities/${rarities}`,

frontend/src/routes/findpage.jsx

Lines changed: 110 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import { useEffect } from "react";
2-
import { Badge, Card, ListGroup } from "react-bootstrap";
1+
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
2+
import Icon from "@mdi/react";
3+
import { useEffect,useState } from "react";
4+
import { Badge, Button, Card, ListGroup } from "react-bootstrap";
35
import { useDispatch, useSelector } from "react-redux";
46
import { useParams } from "react-router";
57

@@ -12,9 +14,63 @@ import Mistaken from "./mistaken.jsx";
1214
export default function FindPage() {
1315
const dispatch = useDispatch();
1416
const { slugdata: findtext } = useParams();
15-
const { data: dict, isLoading, error } = useRetrieveDiscoverQuery(findtext, { skip: false });
17+
const [badgePage, setBadgePage] = useState(1);
18+
const [badgePaginating, setBadgePaginating] = useState(false);
19+
const [userPage, setUserPage] = useState(1);
20+
const [userPaginating, setUserPaginating] = useState(false);
21+
const { data: dict, isLoading, error } = useRetrieveDiscoverQuery({
22+
discover: findtext,
23+
page_badges: badgePage,
24+
page_users: userPage,
25+
per_page: 10,
26+
},
27+
{skip: false}
28+
);
29+
useEffect(() => {
30+
setBadgePage(1);
31+
setUserPage(1);
32+
}, [findtext]);
1633
const vibe = useSelector((data) => data.area.vibe);
1734

35+
// Badge Pagination handlers
36+
const handleNextBadgePage = () => {
37+
setBadgePaginating(true);
38+
setBadgePage((prev) => prev + 1);
39+
};
40+
41+
const handlePrevBadgePage = () => {
42+
setBadgePaginating(true);
43+
if (badgePage > 1) {
44+
setBadgePage(badgePage - 1);
45+
}
46+
};
47+
48+
// User Pagination handlers
49+
const handleNextUserPage = () => {
50+
setUserPaginating(true);
51+
setUserPage((prev) => prev + 1);
52+
};
53+
54+
const handlePrevUserPage = () => {
55+
setUserPaginating(true);
56+
if (userPage > 1) {
57+
setUserPage(userPage - 1);
58+
}
59+
};
60+
61+
const haveNextBadgePage = dict?.pagination?.badges?.has_next;
62+
const havePrevBadgePage = dict?.pagination?.badges?.has_prev;
63+
const haveNextUserPage = dict?.pagination?.users?.has_next;
64+
const havePrevUserPage = dict?.pagination?.users?.has_prev;
65+
66+
useEffect(() => {
67+
setBadgePaginating(false);
68+
}, [dict?.badges]);
69+
70+
useEffect(() => {
71+
setUserPaginating(false);
72+
}, [dict?.users]);
73+
1874
// Show or Hide LoadNote
1975
useEffect(() => {
2076
if (isLoading) {
@@ -52,7 +108,7 @@ export default function FindPage() {
52108
<Card.Title className="mb-0 ps-2 dataelem" style={{ textTransform: "capitalize" }}>
53109
Badges
54110
</Card.Title>
55-
<Card.Text className="mb-0 ps-2 small">Found {dict.badges.length} badge(s)</Card.Text>
111+
<Card.Text className="mb-0 ps-2 small">Found {dict.pagination?.badges_total} badge(s)</Card.Text>
56112
<hr className="mt-2 mb-0" />
57113
<ListGroup variant="flush">
58114
{dict.badges.length > 0 ? (
@@ -74,6 +130,31 @@ export default function FindPage() {
74130
<VertItem head="No badges found" body="Try refining your search" />
75131
)}
76132
</ListGroup>
133+
<div className="d-flex justify-content-between align-items-center mt-2">
134+
<Button
135+
variant="outline-secondary"
136+
size="sm"
137+
onClick={handlePrevBadgePage}
138+
disabled={!havePrevBadgePage || badgePaginating}
139+
className="vibe-border d-flex align-items-center justify-content-center"
140+
style={{ "--vibe": vibe }}
141+
>
142+
<Icon path={mdiArrowLeft} size={0.875} />
143+
</Button>
144+
<span className="small text-muted">
145+
{dict?.pagination?.badges?.page} of {dict?.pagination?.badges?.pages}
146+
</span>
147+
<Button
148+
variant="outline-secondary"
149+
size="sm"
150+
onClick={handleNextBadgePage}
151+
disabled={!haveNextBadgePage || badgePaginating}
152+
className="vibe-border d-flex align-items-center justify-content-center"
153+
style={{ "--vibe": vibe }}
154+
>
155+
<Icon path={mdiArrowRight} size={0.875} />
156+
</Button>
157+
</div>
77158
</Card.Body>
78159
</Card>
79160
<Card className="mb-2 vibe-border" style={{ "--vibe": vibe }}>
@@ -103,6 +184,31 @@ export default function FindPage() {
103184
<VertItem head="No users found" body="Try refining your search" />
104185
)}
105186
</ListGroup>
187+
<div className="d-flex justify-content-between align-items-center mt-2">
188+
<Button
189+
variant="outline-secondary"
190+
size="sm"
191+
onClick={handlePrevUserPage}
192+
disabled={!havePrevUserPage || userPaginating}
193+
className="vibe-border d-flex align-items-center justify-content-center"
194+
style={{ "--vibe": vibe }}
195+
>
196+
<Icon path={mdiArrowLeft} size={0.875} />
197+
</Button>
198+
<span className="small text-muted">
199+
{dict?.pagination?.users?.page} of {dict?.pagination?.users?.pages}
200+
</span>
201+
<Button
202+
variant="outline-secondary"
203+
size="sm"
204+
onClick={handleNextUserPage}
205+
disabled={!haveNextUserPage || userPaginating}
206+
className="vibe-border d-flex align-items-center justify-content-center"
207+
style={{ "--vibe": vibe }}
208+
>
209+
<Icon path={mdiArrowRight} size={0.875} />
210+
</Button>
211+
</div>
106212
</Card.Body>
107213
</Card>
108214
</div>

tahrir/__init__.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@
44

55
import importlib.metadata
66

7-
87
__version__ = importlib.metadata.version("tahrir")

tahrir/admin.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
from .database import db
77

8-
98
admin = Admin(name="Database", url="/dbadmin", endpoint="dbadmin", template_mode="bootstrap4")
109

1110

tahrir/app.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
from tahrir.views import add_static_view, internal_server_error, page_not_found
2424
from tahrir.views import blueprint as root_bp
2525

26-
2726
# Forms
2827
csrf = CSRFProtect()
2928

tahrir/cli.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
from tahrir.database import db
1010
from tahrir.utils.badge import ISSUER
1111

12-
1312
tahrir_cli = AppGroup("tahrir")
1413
"""Commands for the Tahrir application."""
1514

tahrir/defaults.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import os
44

5-
65
BASE_PATH = os.path.dirname(os.path.abspath(__file__))
76

87

tahrir/endpoints/__init__.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
from flask import Blueprint, jsonify
22

3-
43
blueprint = Blueprint("api", __name__)
54

65

tahrir/endpoints/admin/__init__.py

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
from flask import Blueprint, jsonify
22

3-
43
blueprint = Blueprint("admin", __name__)
54

65

tahrir/endpoints/admin/authorizations.py

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,15 @@ def add_authorization():
3131
if not result:
3232
return abort(400, "Failed to add authorization")
3333

34-
return jsonify(
35-
{
36-
"message": f"Badge {data.get(required_fields[0])!r} authorized to {data.get(required_fields[1])!r}"
37-
}
38-
), 201
34+
return (
35+
jsonify(
36+
{
37+
"message": f"Badge {data.get(required_fields[0])!r} /"
38+
f" authorized to {data.get(required_fields[1])!r}"
39+
}
40+
),
41+
201,
42+
)
3943

4044

4145
@bp.route("/api/admin/authorization", methods=["DELETE"])
@@ -64,8 +68,12 @@ def remove_authorization():
6468
if not result:
6569
return abort(404, "Authorization not found or failed to remove")
6670

67-
return jsonify(
68-
{
69-
"message": f"Badge {data.get(required_fields[0])!r} authorization revoked from {data.get(required_fields[1])!r}"
70-
}
71-
), 200
71+
return (
72+
jsonify(
73+
{
74+
"message": f"Badge {data.get(required_fields[0])!r} authorization "
75+
f"revoked from {data.get(required_fields[1])!r}"
76+
}
77+
),
78+
200,
79+
)

0 commit comments

Comments
 (0)