Fixed websites paging.

src/app/(main)/settings/teams/TeamsSettingsPage.tsx

@@ -2,7 +2,7 @@
 import TeamsDataTable from './TeamsDataTable';
 import TeamsHeader from './TeamsHeader';
 
-export default function TeamsPage() {
+export default function TeamsSettingsPage() {
   return (
     <>
       <TeamsHeader />

src/app/(main)/settings/teams/page.tsx

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import TeamsPage from './TeamsPage';
+import TeamsSettingsPage from './TeamsSettingsPage';
 
 export default function () {
-  return <TeamsPage />;
+  return <TeamsSettingsPage />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/users/UsersSettingsPage.tsx

@@ -2,7 +2,7 @@
 import UsersDataTable from './UsersDataTable';
 import UsersHeader from './UsersHeader';
 
-export default function UsersPage() {
+export default function UsersSettingsPage() {
   return (
     <>
       <UsersHeader />

src/app/(main)/settings/users/page.tsx

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import UsersPage from './UsersPage';
+import UsersSettingsPage from './UsersSettingsPage';
 
 export default function () {
-  return <UsersPage />;
+  return <UsersSettingsPage />;
 }
 export const metadata: Metadata = {
   title: 'Users',

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -4,21 +4,19 @@ import DataTable from 'components/common/DataTable';
 import { useWebsites } from 'components/hooks';
 
 export function WebsitesDataTable({
-  userId,
   teamId,
   allowEdit = true,
   allowView = true,
   showActions = true,
   children,
 }: {
-  userId?: string;
   teamId?: string;
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
   children?: ReactNode;
 }) {
-  const queryResult = useWebsites({ userId, teamId });
+  const queryResult = useWebsites({ teamId });
 
   return (
     <DataTable queryResult={queryResult}>

src/app/(main)/settings/websites/WebsitesPage.tsx

@@ -1,15 +0,0 @@
-'use client';
-import { useLogin } from 'components/hooks';
-import WebsitesDataTable from './WebsitesDataTable';
-import WebsitesHeader from './WebsitesHeader';
-
-export default function WebsitesPage({ teamId }: { teamId: string }) {
-  const { user } = useLogin();
-
-  return (
-    <>
-      <WebsitesHeader teamId={teamId} allowCreate={user.role !== 'view-only'} />
-      <WebsitesDataTable teamId={teamId} userId={user.id} allowEdit={true} />
-    </>
-  );
-}

src/app/(main)/settings/websites/WebsitesSettingsPage.tsx

@@ -0,0 +1,12 @@
+'use client';
+import WebsitesDataTable from './WebsitesDataTable';
+import WebsitesHeader from './WebsitesHeader';
+
+export default function WebsitesSettingsPage({ teamId }: { teamId: string }) {
+  return (
+    <>
+      <WebsitesHeader teamId={teamId} />
+      <WebsitesDataTable teamId={teamId} />
+    </>
+  );
+}

src/app/(main)/settings/websites/[websiteId]/WebsiteSettingsPage.tsx

@@ -2,7 +2,7 @@
 import WebsiteProvider from 'app/(main)/websites/[websiteId]/WebsiteProvider';
 import WebsiteSettings from './WebsiteSettings';
 
-export default function WebsitePage({ websiteId }: { websiteId: string }) {
+export default function WebsiteSettingsPage({ websiteId }: { websiteId: string }) {
   return (
     <WebsiteProvider websiteId={websiteId}>
       <WebsiteSettings websiteId={websiteId} />

src/app/(main)/settings/websites/[websiteId]/page.tsx

@@ -1,8 +1,8 @@
-import WebsitePage from './WebsitePage';
+import WebsiteSettingsPage from './WebsiteSettingsPage';
 import { Metadata } from 'next';
 
 export default async function ({ params: { websiteId } }) {
-  return <WebsitePage websiteId={websiteId} />;
+  return <WebsiteSettingsPage websiteId={websiteId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/settings/websites/page.tsx

@@ -1,8 +1,8 @@
 import { Metadata } from 'next';
-import WebsitesPage from './WebsitesPage';
+import WebsitesSettingsPage from './WebsitesSettingsPage';
 
 export default function ({ params: { teamId } }: { params: { teamId: string } }) {
-  return <WebsitesPage teamId={teamId} />;
+  return <WebsitesSettingsPage teamId={teamId} />;
 }
 
 export const metadata: Metadata = {

src/app/(main)/websites/WebsitesPage.tsx

@@ -1,12 +1,15 @@
 'use client';
 import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
 import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
+import { useLogin } from 'components/hooks';
+
+export default function WebsitesPage({ teamId }: { teamId: string; userId: string }) {
+  const { user } = useLogin();
 
-export default function WebsitesPage({ teamId, userId }: { teamId: string; userId: string }) {
   return (
     <>
-      <WebsitesHeader teamId={teamId} />
+      <WebsitesHeader teamId={teamId} allowCreate={user.role !== 'view-only'} />
-      <WebsitesDataTable teamId={teamId} userId={userId} allowEdit={false} />
+      <WebsitesDataTable teamId={teamId} allowEdit={false} />
     </>
   );
 }

src/components/common/Pager.tsx

@@ -23,6 +23,7 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
 
   const handlePageChange = (value: number) => {
     const nextPage = page + value;
+
     if (nextPage > 0 && nextPage <= maxPage) {
       onPageChange(nextPage);
     }

src/components/hooks/queries/useWebsites.ts

@@ -13,8 +13,9 @@ export function useWebsites(
 
   return useFilterQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],
-    queryFn: () => {
+    queryFn: (data: any) => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {
+        ...data,
         ...params,
       });
     },

src/components/input/WebsiteSelect.tsx

@@ -7,12 +7,10 @@ import styles from './WebsiteSelect.module.css';
 export function WebsiteSelect({
   websiteId,
   teamId,
-  userId,
   onSelect,
 }: {
   websiteId?: string;
   teamId?: string;
-  userId?: string;
   onSelect?: (key: any) => void;
 }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -21,7 +19,7 @@ export function WebsiteSelect({
 
   const { data: website } = useWebsite(selectedId as string);
 
-  const queryResult = useWebsites({ teamId, userId }, { query, pageSize: 5 });
+  const queryResult = useWebsites({ teamId }, { query, pageSize: 5 });
 
   const renderValue = () => {
     return website?.name;