Samandar/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added pagination params page

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-11-17 13:09:24 +05:00
parent 41fe8725c7
commit 0f650ad15a
13 changed files with 544 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/faq/ui/FaqCategory.tsx
View File

@@ -45,6 +45,7 @@ import {
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { toast } from "sonner";
import z from "zod";
@@ -55,13 +56,22 @@ const categoryFormSchema = z.object({
const FaqCategory = () => {
const [deleteId, setDeleteId] = useState<number | null>(null);
const [currentPage, setCurrentPage] = useState(1);
const [searchParams, setSearchParams] = useSearchParams();
const initialPage = Number(searchParams.get("page")) || 1;
const [page, setPage] = useState(initialPage);
const [categories, setCategories] = useState<number | null>(null);
const queryClient = useQueryClient();
const updatePage = (newPage: number) => {
setPage(newPage);
setSearchParams({ page: newPage.toString() });
};
const { data: category } = useQuery({
queryKey: ["all_faqcategory", currentPage],
queryKey: ["all_faqcategory", page],
queryFn: () => {
return getAllFaqCategory({ page: currentPage, page_size: 10 });
return getAllFaqCategory({ page: page, page_size: 20 });
},
select(data) {
return data.data.data;
@@ -255,37 +265,38 @@ const FaqCategory = () => {
</Table>
</div>
<div className="flex justify-end gap-2">
<div className="flex justify-end mt-10 gap-3">
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
disabled={page === 1}
onClick={() => updatePage(Math.max(page - 1, 1))}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
>
<ChevronLeft className="w-5 h-5" />
</button>
{[...Array(category?.total_pages)].map((_, i) => (
<button
key={i}
onClick={() => setCurrentPage(i + 1)}
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
currentPage === i + 1
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
}`}
>
{i + 1}
</button>
))}
{[...Array(category?.total_pages)].map((_, i) => {
const pageNum = i + 1;
return (
<button
key={i}
onClick={() => updatePage(pageNum)}
className={`px-4 py-2 rounded-lg border font-medium transition-all ${
page === pageNum
? "bg-gradient-to-r from-blue-600 to-cyan-600 text-white border-blue-500"
: "border-slate-600 text-slate-300 hover:bg-slate-700/50"
}`}
>
{pageNum}
</button>
);
})}
<button
disabled={currentPage === category?.total_pages}
disabled={page === category?.total_pages}
onClick={() =>
setCurrentPage((p) =>
Math.min(p + 1, category ? category.total_pages : 0),
)
updatePage(Math.min(page + 1, category?.total_pages ?? 1))
}
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50"
>
<ChevronRight className="w-5 h-5" />
</button>