diff --git a/actions/providers.ts b/actions/providers.ts index 34471c0b1f..6c6f3adee7 100644 --- a/actions/providers.ts +++ b/actions/providers.ts @@ -1,16 +1,12 @@ "use server"; import { revalidatePath } from "next/cache"; +import { redirect } from "next/navigation"; import { parseStringify } from "@/lib"; -interface PaginationOptions { - page?: number; -} - -export const getProvider = async ({ page = 1 }: PaginationOptions) => { - if (isNaN(Number(page))) page = 1; - if (page < 1) page = 1; +export const getProvider = async ({ page = 1 }) => { + if (isNaN(Number(page)) || page < 1) redirect("/providers"); const keyServer = process.env.LOCAL_SERVER_URL; @@ -26,12 +22,7 @@ export const getProvider = async ({ page = 1 }: PaginationOptions) => { const data = await providers.json(); const parsedData = parseStringify(data); revalidatePath("/providers"); - return { - providerDetails: parsedData?.data, - currentPage: parsedData?.meta?.pagination?.page, - totalPages: parsedData?.meta?.pagination?.pages, - totalItems: parsedData?.meta?.pagination?.count, - }; + return parsedData; } 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 f429bb2acc..2c79e94c79 100644 --- a/app/(prowler)/providers/page.tsx +++ b/app/(prowler)/providers/page.tsx @@ -9,16 +9,10 @@ import { DataTableProvider, SkeletonTableProvider, } from "@/components/providers"; -import { Header, Pagination } from "@/components/ui"; +import { Header } from "@/components/ui"; +import { searchParamsProps } from "@/types"; -export default async function Providers({ - searchParams, -}: { - searchParams: { - page: number; - }; -}) { - console.log({ searchParams }, "los searchParamsss!"); +export default async function Providers({ searchParams }: searchParamsProps) { return ( <>
@@ -36,32 +30,18 @@ export default async function Providers({ ); } -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; +const SSRDataTable = async ({ searchParams }: searchParamsProps) => { + const page = searchParams.page ? parseInt(searchParams.page) : 1; + const providersData = await getProvider({ page }); + const [providers] = await Promise.all([providersData]); + + if (providers?.errors) redirect("/providers"); - // console.log(`Pages: ${pages}, Count: ${count}`); return ( - <> - {/* */} - {/* */} - + ); }; diff --git a/components/providers/table/DataTablePagination.tsx b/components/providers/table/DataTablePagination.tsx index 4fe18c76dd..83fdd43be3 100644 --- a/components/providers/table/DataTablePagination.tsx +++ b/components/providers/table/DataTablePagination.tsx @@ -1,65 +1,83 @@ -import { Button } from "@nextui-org/react"; +"use client"; + import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from "@radix-ui/react-icons"; -import { type Table } from "@tanstack/react-table"; +import Link from "next/link"; +import { redirect, usePathname, useSearchParams } from "next/navigation"; -interface DataTablePaginationProps { - table: Table; +import { extractPaginationInfo } from "@/lib"; +import { MetaDataProps } from "@/types"; + +interface DataTablePaginationProps { pageSizeOptions?: number[]; + metadata?: MetaDataProps; } -export function DataTablePagination({ - table, -}: DataTablePaginationProps) { - // console.log(table); +export function DataTablePagination({ metadata }: DataTablePaginationProps) { + if (!metadata) return null; + const pathname = usePathname(); + const searchParams = useSearchParams(); + + const { currentPage, totalPages, totalEntries } = + extractPaginationInfo(metadata); + + const createPageUrl = (pageNumber: number | string) => { + const params = new URLSearchParams(searchParams); + + if (pageNumber === "...") return `${pathname}?${params.toString()}`; + + if (+pageNumber > totalPages) { + return `${pathname}?${params.toString()}`; + } + + params.set("page", pageNumber.toString()); + return `${pathname}?${params.toString()}`; + }; + return (
+
+ {totalEntries} entries in Total. +
- Page {table.getState().pagination.pageIndex + 1} of{" "} - {table.getPageCount()} + Page {currentPage} of {totalPages}
- - - - +
diff --git a/components/providers/table/DataTableProvider.tsx b/components/providers/table/DataTableProvider.tsx index 522539d9e6..cfbb095e57 100644 --- a/components/providers/table/DataTableProvider.tsx +++ b/components/providers/table/DataTableProvider.tsx @@ -19,20 +19,22 @@ import { TableHeader, TableRow, } from "@/components/ui/table/Table"; +import { MetaDataProps } from "@/types"; import { DataTablePagination } from "./DataTablePagination"; interface DataTableProps { columns: ColumnDef[]; data: TData[]; + metadata?: MetaDataProps; } export function DataTableProvider({ columns, data, + metadata, }: DataTableProps) { const [sorting, setSorting] = useState([]); - const table = useReactTable({ data, columns, @@ -97,8 +99,8 @@ export function DataTableProvider({ -
- +
+
); diff --git a/components/ui/index.ts b/components/ui/index.ts index d2267337a5..f202f8ffe5 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -1,7 +1,6 @@ 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 deleted file mode 100644 index e490942398..0000000000 --- a/components/ui/pagination/Pagination.tsx +++ /dev/null @@ -1,95 +0,0 @@ -"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 ( -
- -
- ); -}; diff --git a/lib/utils.ts b/lib/utils.ts index c3e96dd8df..84a5fe24e3 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,6 +1,8 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; +import { MetaDataProps } from "@/types"; + export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } @@ -9,6 +11,14 @@ export const parseStringify = (value: any) => JSON.parse(JSON.stringify(value)); export const convertFileToUrl = (file: File) => URL.createObjectURL(file); +export const extractPaginationInfo = (metadata: MetaDataProps) => { + const currentPage = metadata?.pagination.page ?? "1"; + const totalPages = metadata?.pagination.pages; + const totalEntries = metadata?.pagination.count; + + return { currentPage, totalPages, totalEntries }; +}; + // FORMAT DATE TIME export const formatDateTime = ( dateString: Date | string, diff --git a/types/components.ts b/types/components.ts index b7b53724e5..1d23c712a9 100644 --- a/types/components.ts +++ b/types/components.ts @@ -9,6 +9,12 @@ export type IconProps = { style?: React.CSSProperties; }; +export interface searchParamsProps { + searchParams: { + page?: string; + }; +} + export interface ProviderProps { id: string; type: "providers"; @@ -47,3 +53,12 @@ export interface FindingsProps { account: string; }; } + +export interface MetaDataProps { + pagination: { + page: number; + pages: number; + count: number; + }; + version: string; +}