diff --git a/actions/providers.ts b/actions/providers.ts index 30ac54ff5b..34471c0b1f 100644 --- a/actions/providers.ts +++ b/actions/providers.ts @@ -4,19 +4,36 @@ import { revalidatePath } from "next/cache"; import { parseStringify } from "@/lib"; -export const getProvider = async () => { +interface PaginationOptions { + page?: number; +} + +export const getProvider = async ({ page = 1 }: PaginationOptions) => { + if (isNaN(Number(page))) page = 1; + if (page < 1) page = 1; + const keyServer = process.env.LOCAL_SERVER_URL; try { - const providers = await fetch(`${keyServer}/providers`, { - headers: { - "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`, + const providers = await fetch( + `${keyServer}/providers?page%5Bnumber%5D=${page}`, + { + headers: { + "X-Tenant-ID": `${process.env.HEADER_TENANT_ID}`, + }, }, - }); + ); const data = await providers.json(); + const parsedData = parseStringify(data); revalidatePath("/providers"); - return parseStringify(data); + return { + providerDetails: parsedData?.data, + currentPage: parsedData?.meta?.pagination?.page, + totalPages: parsedData?.meta?.pagination?.pages, + totalItems: parsedData?.meta?.pagination?.count, + }; } catch (error) { + console.error("Error fetching providers:", error); return undefined; } }; diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx index c58d57db4a..f429bb2acc 100644 --- a/app/(prowler)/providers/page.tsx +++ b/app/(prowler)/providers/page.tsx @@ -1,4 +1,5 @@ import { Spacer } from "@nextui-org/react"; +import { redirect } from "next/navigation"; import { Suspense } from "react"; import { getProvider } from "@/actions"; @@ -8,9 +9,16 @@ import { DataTableProvider, SkeletonTableProvider, } from "@/components/providers"; -import { Header } from "@/components/ui"; +import { Header, Pagination } from "@/components/ui"; -export default async function Providers() { +export default async function Providers({ + searchParams, +}: { + searchParams: { + page: number; + }; +}) { + console.log({ searchParams }, "los searchParamsss!"); return ( <>
@@ -20,18 +28,40 @@ export default async function Providers() { - }> - + }> + ); } -const SSRDataTable = async () => { - const providersData = await getProvider(); - const [providers] = await Promise.all([providersData]); +const SSRDataTable = async ({ + searchParams, +}: { + searchParams: { + page: number; + }; +}) => { + // const perPage = searchParams['per_page'] ?? '5' + // const page = searchParams.page ? parseInt(searchParams.page) : 1; + const providersData = await getProvider({}); + // const [providers] = await Promise.all([providersData]); + // const { providerDetails, currentPage, totalPages, totalItems } = providersData; + // console.log(currentPage, totalPages, 'hehe') + // if (providers.meta.pagination.count === 0) { + // redirect('/'); + // } + // console.log(providers); + // const currentPage = providers.meta.pagination.page; + // const pages = providers.meta.pagination.pages; + // const count = providers.meta.pagination.count; + + // console.log(`Pages: ${pages}, Count: ${count}`); return ( - + <> + {/* */} + {/* */} + ); }; diff --git a/components/providers/AddProviderModal.tsx b/components/providers/AddProviderModal.tsx index a04c19c7bb..b9facbe627 100644 --- a/components/providers/AddProviderModal.tsx +++ b/components/providers/AddProviderModal.tsx @@ -48,7 +48,9 @@ export const AddProviderModal = () => { return ( - + diff --git a/components/providers/table/DataTablePagination.tsx b/components/providers/table/DataTablePagination.tsx index 6f31f826e6..4fe18c76dd 100644 --- a/components/providers/table/DataTablePagination.tsx +++ b/components/providers/table/DataTablePagination.tsx @@ -15,6 +15,7 @@ interface DataTablePaginationProps { export function DataTablePagination({ table, }: DataTablePaginationProps) { + // console.log(table); return (
diff --git a/components/providers/table/DataTableProvider.tsx b/components/providers/table/DataTableProvider.tsx index a6ddca5d65..522539d9e6 100644 --- a/components/providers/table/DataTableProvider.tsx +++ b/components/providers/table/DataTableProvider.tsx @@ -45,7 +45,6 @@ export function DataTableProvider({ sorting, }, }); - return ( <>
diff --git a/components/ui/index.ts b/components/ui/index.ts index f202f8ffe5..d2267337a5 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -1,6 +1,7 @@ export * from "./alert/Alert"; export * from "./dialog/Dialog"; export * from "./header/Header"; +export * from "./pagination/Pagination"; export * from "./select/Select"; export * from "./sidebar"; export * from "./table/StatusBadge"; diff --git a/components/ui/pagination/Pagination.tsx b/components/ui/pagination/Pagination.tsx new file mode 100644 index 0000000000..e490942398 --- /dev/null +++ b/components/ui/pagination/Pagination.tsx @@ -0,0 +1,95 @@ +"use client"; + +import Link from "next/link"; +import { usePathname, useSearchParams } from "next/navigation"; +import React from "react"; + +interface Props { + totalPages: number; + currentPage: number; + nextPage?: string; +} + +export const Pagination = ({ totalPages, currentPage }: Props) => { + const pathname = usePathname(); + const searchParams = useSearchParams(); + // const currentPage = searchParams["page"] ?? "1"; + const createPageUrl = (pageNumber: number | string) => { + const params = new URLSearchParams(searchParams); + + if (pageNumber === "...") return `${pathname}?${params.toString()}`; + + if (+pageNumber <= 0) { + return `${pathname}`; + } + if (+pageNumber > totalPages) { + return `${pathname}?${params.toString()}`; + } + params.set("page", pageNumber.toString()); + return `${pathname}?${params.toString()}`; + }; + + console.log(pathname, searchParams, currentPage); + + return ( +
+ +
+ ); +};