this repo has no description
pagination controles
+52
-4
+52
-4
src/routes/basic.tsx
+52
-4
src/routes/basic.tsx
···
9
9
TableRow,
10
10
} from "~/components/ui/table";
11
11
import { $pokeApiClient } from "../data/client";
12
+
import { useMemo, useState } from "react";
13
+
14
+
const POKEMON_LIMIT = 20;
15
+
16
+
const matchPokemonIdExp = /\/api\/v2\/pokemon\/(\d+)\/?/;
12
17
13
18
export const Route = createFileRoute("/basic")({
14
19
component: RouteComponent,
···
19
24
url: string;
20
25
}
21
26
22
-
function RouteComponent() {
27
+
function RouteComponent() {
28
+
29
+
const [currentOffset, setCurrentOffset] = useState<number | undefined>(undefined);
23
30
const { data, error } = useQuery(
24
-
$pokeApiClient.queryOptions("get", "/api/v2/pokemon/"),
31
+
$pokeApiClient.queryOptions("get", "/api/v2/pokemon/", {
32
+
params: {
33
+
query: {
34
+
limit: POKEMON_LIMIT,
35
+
offset: currentOffset ?? undefined,
36
+
},
37
+
},
38
+
}),
25
39
);
26
40
41
+
const previousOffset = useMemo(() => {
42
+
if(data?.previous == null) {
43
+
return null;
44
+
}
45
+
46
+
return new URL(data.previous).searchParams.get("offset") ?? null;
47
+
}, [data?.previous]);
48
+
49
+
const nextOffset = useMemo(() => {
50
+
if(data?.next == null) {
51
+
return null;
52
+
}
53
+
54
+
return new URL(data.next).searchParams.get("offset") ?? null;
55
+
}, [data?.next]);
56
+
27
57
if (data) {
28
58
const results = data.results ?? [];
29
59
return (
30
60
<div className="p-4">
31
61
<h1 className="text-2xl font-bold mb-4">
32
-
National Pokédex: Pokémon 1-50
62
+
National Pokédex: Pokémon {currentOffset + 1}-{currentOffset + POKEMON_LIMIT}
33
63
</h1>
34
64
<Table>
35
65
<TableHeader>
···
42
72
<TableBody>
43
73
{results.map((pokemon: PokemonListResult, idx: number) => (
44
74
<TableRow key={pokemon.name}>
45
-
<TableCell>{idx + 1}</TableCell>
75
+
<TableCell>{pokemon.url.match(matchPokemonIdExp)?.[1]}</TableCell>
46
76
<TableCell className="capitalize">{pokemon.name}</TableCell>
47
77
<TableCell>
48
78
<a
···
58
88
))}
59
89
</TableBody>
60
90
</Table>
91
+
<div className="flex justify-center gap-4 mt-4">
92
+
<button
93
+
type="button"
94
+
onClick={() => setCurrentOffset(previousOffset ? parseInt(previousOffset) : undefined)}
95
+
disabled={!previousOffset}
96
+
className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed"
97
+
>
98
+
Previous
99
+
</button>
100
+
<button
101
+
type="button"
102
+
onClick={() => setCurrentOffset(nextOffset ? parseInt(nextOffset) : undefined)}
103
+
disabled={!nextOffset}
104
+
className="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed"
105
+
>
106
+
Next
107
+
</button>
108
+
</div>
61
109
</div>
62
110
);
63
111
}