fix: fix type for SearchParamsProps in all pages

app/(prowler)/compliance/page.tsx

@@ -9,24 +9,34 @@ import {
 } from "@/components/compliance";
 import { FilterControls } from "@/components/filters";
 import { Header } from "@/components/ui";
-import { searchParamsProps } from "@/types";
+import { SearchParamsProps } from "@/types";
+
+export default async function Compliance({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
 
-export default async function Compliance({ searchParams }: searchParamsProps) {
   return (
     <>
       <Header title="Compliance" icon="fluent-mdl2:compliance-audit" />
       <Spacer y={4} />
       <FilterControls mutedFindings={false} />
       <Spacer y={4} />
-      <Suspense key={searchParams.page} fallback={<ComplianceSkeletonGrid />}>
+      <Suspense key={searchParamsKey} fallback={<ComplianceSkeletonGrid />}>
         <SSRComplianceGrid searchParams={searchParams} />
       </Suspense>
     </>
   );
 }
 
-const SSRComplianceGrid = async ({ searchParams }: searchParamsProps) => {
-  const page = searchParams.page ? parseInt(searchParams.page) : 1;
+const SSRComplianceGrid = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
   const compliancesData = await getCompliance({ page });
   const [compliances] = await Promise.all([compliancesData]);
 

app/(prowler)/services/page.tsx

@@ -6,9 +6,14 @@ import { getService } from "@/actions/services";
 import { FilterControls } from "@/components/filters";
 import { ServiceCard, ServiceSkeletonGrid } from "@/components/services";
 import { Header } from "@/components/ui";
-import { searchParamsProps } from "@/types";
+import { SearchParamsProps } from "@/types";
 
-export default async function Services({ searchParams }: searchParamsProps) {
+export default async function Services({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
   return (
     <>
       <Header
@@ -18,15 +23,19 @@ export default async function Services({ searchParams }: searchParamsProps) {
       <Spacer y={4} />
       <FilterControls />
       <Spacer y={4} />
-      <Suspense key={searchParams.page} fallback={<ServiceSkeletonGrid />}>
+      <Suspense key={searchParamsKey} fallback={<ServiceSkeletonGrid />}>
         <SSRServiceGrid searchParams={searchParams} />
       </Suspense>
     </>
   );
 }
 
-const SSRServiceGrid = async ({ searchParams }: searchParamsProps) => {
-  const page = searchParams.page ? parseInt(searchParams.page) : 1;
+const SSRServiceGrid = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
   const servicesData = await getService({ page });
   const [services] = await Promise.all([servicesData]);
 

app/(prowler)/users/page.tsx

@@ -11,14 +11,20 @@ import {
   DataTableUser,
   SkeletonTableUser,
 } from "@/components/users";
-import { searchParamsProps } from "@/types";
+import { SearchParamsProps } from "@/types";
 
-export default async function Users({ searchParams }: searchParamsProps) {
+export default async function Users({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
   const session = await auth();
   if (session?.user?.role !== "admin") {
     redirect("/");
   }
 
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
   return (
     <>
       <Header title="User Management" icon="ci:users" />
@@ -28,7 +34,7 @@ export default async function Users({ searchParams }: searchParamsProps) {
           <AddUserModal />
         </div>
         <Spacer y={6} />
-        <Suspense key={searchParams.page} fallback={<SkeletonTableUser />}>
+        <Suspense key={searchParamsKey} fallback={<SkeletonTableUser />}>
           <SSRDataTable searchParams={searchParams} />
         </Suspense>
       </div>
@@ -36,8 +42,12 @@ export default async function Users({ searchParams }: searchParamsProps) {
   );
 }
 
-const SSRDataTable = async ({ searchParams }: searchParamsProps) => {
-  const page = searchParams.page ? parseInt(searchParams.page) : 1;
+const SSRDataTable = async ({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) => {
+  const page = parseInt(searchParams.page?.toString() || "1", 10);
   const usersData = await getUsers({ page });
   const [users] = await Promise.all([usersData]);
 

types/components.ts

@@ -9,11 +9,6 @@ export type IconProps = {
   style?: React.CSSProperties;
 };
 
-// export interface searchParamsProps {
-//   searchParams: {
-//     page?: string;
-//   };
-// }
 export interface SearchParamsProps {
   [key: string]: string | string[] | undefined;
 }