Replaced SettingsTable with DataTable.

src/app/(app)/dashboard/DashboardEdit.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useMemo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
@@ -7,7 +8,6 @@ import useDashboard, { saveDashboard } from 'store/dashboard';
 import useMessages from 'components/hooks/useMessages';
 import useApi from 'components/hooks/useApi';
 import styles from './DashboardEdit.module.css';
-import Page from 'components/layout/Page';
 
 const dragId = 'dashboard-website-ordering';
 
@@ -17,11 +17,7 @@ export function DashboardEdit() {
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
   const { get, useQuery } = useApi();
-  const {
+  const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
-    data: result,
-    isLoading,
-    error,
-  } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
   const { data: websites } = result || {};
 
   const ordered = useMemo(() => {
@@ -59,7 +55,7 @@ export function DashboardEdit() {
   }
 
   return (
-    <Page loading={isLoading} error={error}>
+    <>
       <div className={styles.buttons}>
         <Button onClick={handleSave} variant="action" size="small">
           {formatMessage(labels.save)}
@@ -105,7 +101,7 @@ export function DashboardEdit() {
           </Droppable>
         </DragDropContext>
       </div>
-    </Page>
+    </>
   );
 }
 

src/app/(app)/layout.tsx

@@ -1,4 +1,3 @@
-'use client';
 import Shell from './Shell';
 import NavBar from './NavBar';
 import Page from 'components/layout/Page';

src/app/(app)/reports/ReportsTable.js

@@ -4,7 +4,6 @@ import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
 import {
   Button,
-  Flexbox,
   GridColumn,
   GridTable,
   Icon,
@@ -43,7 +42,7 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
         {row => {
           const { id, name, userId, website } = row;
           return (
-            <Flexbox gap={10}>
+            <>
               <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
               {(user.id === userId || user.id === website?.userId) && (
                 <ModalTrigger>
@@ -64,7 +63,7 @@ export function ReportsTable({ data = [], onDelete, showDomain }) {
                   </Modal>
                 </ModalTrigger>
               )}
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

src/app/(app)/settings/layout.module.css

@@ -11,6 +11,8 @@
 }
 
 .content {
+  display: flex;
+  flex-direction: column;
   min-height: 50vh;
 }
 

src/app/(app)/settings/teams/TeamsTable.js

@@ -3,7 +3,7 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
-import { Button, Flexbox, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
@@ -24,7 +24,7 @@ export function TeamsTable({ data = [] }) {
           const showDelete = user.id === owner?.userId;
 
           return (
-            <Flexbox gap={10}>
+            <>
               <Link href={`/settings/teams/${id}`}>
                 <Button>
                   <Icon>
@@ -35,7 +35,7 @@ export function TeamsTable({ data = [] }) {
               </Link>
               {showDelete && <TeamDeleteButton teamId={id} teamName={name} />}
               {!showDelete && <TeamLeaveButton teamId={id} teamName={name} />}
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

src/app/(app)/settings/teams/[id]/TeamMembers.js

@@ -1,46 +1,25 @@
-import { Loading, useToasts } from 'react-basics';
 import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
-import useApiFilter from 'components/hooks/useApiFilter';
 import TeamMembersTable from './TeamMembersTable';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
 
 export function TeamMembers({ teamId, readOnly }) {
-  const { showToast } = useToasts();
+  const { get } = useApi();
-  const { formatMessage, messages } = useMessages();
+  const { getProps } = useFilterQuery(
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+    ['team:users', teamId],
-    useApiFilter();
+    params => {
-  const { get, useQuery } = useApi();
+      return get(`/teams/${teamId}/users`, {
-  const { data, isLoading, refetch } = useQuery(
+        ...params,
-    ['teams:users', teamId, filter, page, pageSize],
+      });
-    () =>
+    },
-      get(`/teams/${teamId}/users`, {
+    { enabled: !!teamId },
-        filter,
-        page,
-        pageSize,
-      }),
   );
 
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  const handleSave = async () => {
-    await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
-  };
-
   return (
     <>
-      <TeamMembersTable
+      <DataTable {...getProps()}>
-        onSave={handleSave}
+        {({ data }) => <TeamMembersTable data={data} readOnly={readOnly} />}
-        teamId={teamId}
+      </DataTable>
-        data={data}
-        readOnly={readOnly}
-        onFilterChange={handleFilterChange}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
-        filterValue={filter}
-      />
     </>
   );
 }

src/app/(app)/settings/teams/[id]/TeamMembersTable.js

@@ -1,67 +1,36 @@
+import { GridColumn, GridTable } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
-import SettingsTable from 'components/common/SettingsTable';
 
-export function TeamMembersTable({
+export function TeamMembersTable({ data = [], teamId, readOnly, onChange }) {
-  data = [],
-  teamId,
-  onSave,
-  readOnly,
-  filterValue,
-  onFilterChange,
-  onPageChange,
-  onPageSizeChange,
-}) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
-  const columns = [
+  const roles = {
-    { name: 'username', label: formatMessage(labels.username) },
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
-    { name: 'role', label: formatMessage(labels.role) },
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
-    { name: 'action', label: ' ' },
-  ];
-
-  const cellRender = (row, data, key) => {
-    if (key === 'username') {
-      return row?.username;
-    }
-    if (key === 'role') {
-      return formatMessage(
-        labels[
-          Object.keys(ROLES).find(key => ROLES[key] === row?.teamUser[0]?.role) || labels.unknown
-        ],
-      );
-    }
-    return data[key];
   };
 
   return (
-    <SettingsTable
+    <GridTable data={data}>
-      data={data}
+      <GridColumn name="username" label={formatMessage(labels.username)} />
-      columns={columns}
+      <GridColumn name="role" label={formatMessage(labels.role)}>
-      cellRender={cellRender}
+        {row => roles[row?.teamUser?.[0]?.role]}
-      showSearch={true}
+      </GridColumn>
-      showPaging={true}
+      <GridColumn name="action" label=" " alignment="end">
-      onFilterChange={onFilterChange}
+        {row => {
-      onPageChange={onPageChange}
+          return (
-      onPageSizeChange={onPageSizeChange}
+            !readOnly &&
-      filterValue={filterValue}
+            row?.teamUser?.[0]?.role !== ROLES.teamOwner &&
-    >
+            user?.id !== row?.id && (
-      {row => {
+              <TeamMemberRemoveButton teamId={teamId} userId={row.id} onSave={onChange} />
-        return (
+            )
-          !readOnly && (
+          );
-            <TeamMemberRemoveButton
+        }}
-              teamId={teamId}
+      </GridColumn>
-              userId={row.id}
+    </GridTable>
-              disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
-              onSave={onSave}
-            />
-          )
-        );
-      }}
-    </SettingsTable>
   );
 }
 

src/app/(app)/settings/teams/[id]/TeamSettings.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { Item, Loading, Tabs, useToasts } from 'react-basics';
+import { Item, Loading, Tabs, useToasts, Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
 import useUser from 'components/hooks/useUser';
@@ -46,7 +46,7 @@ export function TeamSettings({ teamId }) {
   }
 
   return (
-    <>
+    <Flexbox direction="column">
       <PageHeader title={values?.name} />
       <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
         <Item key="details">{formatMessage(labels.details)}</Item>
@@ -58,7 +58,7 @@ export function TeamSettings({ teamId }) {
       )}
       {tab === 'members' && <TeamMembers teamId={teamId} readOnly={!canEdit} />}
       {tab === 'websites' && <TeamWebsites teamId={teamId} readOnly={!canEdit} />}
-    </>
+    </Flexbox>
   );
 }
 

src/app/(app)/settings/teams/[id]/TeamWebsites.js

@@ -1,75 +1,49 @@
-import {
+import { ActionForm, Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-  ActionForm,
-  Button,
-  Icon,
-  Icons,
-  Loading,
-  Modal,
-  ModalTrigger,
-  Text,
-  useToasts,
-} from 'react-basics';
 import TeamWebsitesTable from './TeamWebsitesTable';
 import TeamAddWebsiteForm from './TeamAddWebsiteForm';
 import useApi from 'components/hooks/useApi';
 import useMessages from 'components/hooks/useMessages';
-import useApiFilter from 'components/hooks/useApiFilter';
+import useUser from 'components/hooks/useUser';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+import DataTable from 'components/common/DataTable';
 
 export function TeamWebsites({ teamId }) {
-  const { showToast } = useToasts();
   const { formatMessage, labels, messages } = useMessages();
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
+  const { user } = useUser();
-    useApiFilter();
+  const { get } = useApi();
-  const { get, useQuery } = useApi();
+  const { getProps, refetch } = useFilterQuery(
-  const { data, isLoading, refetch } = useQuery(
+    ['team:websites', teamId],
-    ['teams:websites', teamId, filter, page, pageSize],
+    params => {
-    () =>
+      return get(`/teams/${teamId}/websites`, {
-      get(`/teams/${teamId}/websites`, {
+        ...params,
-        filter,
+      });
-        page,
+    },
-        pageSize,
+    { enabled: !!user },
-      }),
   );
-  const hasData = data && data.length !== 0;
 
-  if (isLoading) {
+  const handleWebsiteAdd = () => {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
+    refetch();
-  }
-
-  const handleSave = async () => {
-    await refetch();
-    showToast({ message: formatMessage(messages.saved), variant: 'success' });
   };
 
-  const addButton = (
-    <ModalTrigger>
-      <Button variant="primary">
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-        <Text>{formatMessage(labels.addWebsite)}</Text>
-      </Button>
-      <Modal title={formatMessage(labels.addWebsite)}>
-        {close => <TeamAddWebsiteForm teamId={teamId} onSave={handleSave} onClose={close} />}
-      </Modal>
-    </ModalTrigger>
-  );
-
   return (
-    <div>
+    <>
-      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
+      <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>
-      {hasData && (
+        <ModalTrigger>
-        <TeamWebsitesTable
+          <Button variant="primary">
-          teamId={teamId}
+            <Icon>
-          data={data}
+              <Icons.Plus />
-          onSave={handleSave}
+            </Icon>
-          onFilterChange={handleFilterChange}
+            <Text>{formatMessage(labels.addWebsite)}</Text>
-          onPageChange={handlePageChange}
+          </Button>
-          onPageSizeChange={handlePageSizeChange}
+          <Modal title={formatMessage(labels.addWebsite)}>
-          filterValue={filter}
+            {close => (
-        />
+              <TeamAddWebsiteForm teamId={teamId} onSave={handleWebsiteAdd} onClose={close} />
-      )}
+            )}
-    </div>
+          </Modal>
+        </ModalTrigger>
+      </ActionForm>
+      <DataTable {...getProps()}>{({ data }) => <TeamWebsitesTable data={data} />}</DataTable>
+    </>
   );
 }
 

src/app/(app)/settings/teams/[id]/TeamWebsitesTable.js

@@ -1,65 +1,41 @@
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import Link from 'next/link';
-import { Button, Icon, Icons, Text } from 'react-basics';
+import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import TeamWebsiteRemoveButton from '../TeamWebsiteRemoveButton';
-import SettingsTable from 'components/common/SettingsTable';
 
-export function TeamWebsitesTable({
+export function TeamWebsitesTable({ data = [], onSave }) {
-  data = [],
-  onSave,
-  filterValue,
-  onFilterChange,
-  onPageChange,
-  onPageSizeChange,
-  openExternal = false,
-}) {
   const { formatMessage, labels } = useMessages();
-
   const { user } = useUser();
-  const columns = [
-    { name: 'name', label: formatMessage(labels.name) },
-    { name: 'domain', label: formatMessage(labels.domain) },
-    { name: 'action', label: ' ' },
-  ];
 
   return (
-    <SettingsTable
+    <GridTable data={data}>
-      columns={columns}
+      <GridColumn name="name" label={formatMessage(labels.name)} />
-      data={data}
+      <GridColumn name="domain" label={formatMessage(labels.domain)} />
-      showSearch={true}
+      <GridColumn name="action" label=" " alignment="end">
-      showPaging={true}
+        {row => {
-      onFilterChange={onFilterChange}
+          const { id: teamId, teamUser } = row.teamWebsite[0].team;
-      onPageChange={onPageChange}
+          const { id: websiteId, userId } = row;
-      onPageSizeChange={onPageSizeChange}
+          const owner = teamUser[0];
-      filterValue={filterValue}
+          const canRemove = user.id === userId || user.id === owner.userId;
-    >
+          return (
-      {row => {
+            <>
-        const { id: teamId, teamUser } = row.teamWebsite[0].team;
+              <Link href={`/websites/${websiteId}`}>
-        const { id: websiteId, name, domain, userId } = row;
+                <Button>
-        const owner = teamUser[0];
+                  <Icon>
-        const canRemove = user.id === userId || user.id === owner.userId;
+                    <Icons.External />
-
+                  </Icon>
-        row.name = name;
+                  <Text>{formatMessage(labels.view)}</Text>
-        row.domain = domain;
+                </Button>
-
+              </Link>
-        return (
+              {canRemove && (
-          <>
+                <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
-            <Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
+              )}
-              <Button>
+            </>
-                <Icon>
+          );
-                  <Icons.External />
+        }}
-                </Icon>
+      </GridColumn>
-                <Text>{formatMessage(labels.view)}</Text>
+    </GridTable>
-              </Button>
-            </Link>
-            {canRemove && (
-              <TeamWebsiteRemoveButton teamId={teamId} websiteId={websiteId} onSave={onSave} />
-            )}
-          </>
-        );
-      }}
-    </SettingsTable>
   );
 }
 

src/app/(app)/settings/users/UsersTable.js

@@ -1,4 +1,4 @@
-import { Button, Text, Icon, Icons, GridTable, GridColumn, Flexbox } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
@@ -36,7 +36,7 @@ export function UsersTable({ data = [] }) {
         {row => {
           const { id, username } = row;
           return (
-            <Flexbox gap={10}>
+            <>
               <Link href={`/settings/users/${id}`}>
                 <Button>
                   <Icon>
@@ -46,7 +46,7 @@ export function UsersTable({ data = [] }) {
                 </Button>
               </Link>
               <UserDeleteButton userId={id} username={username} />
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

src/app/(app)/settings/websites/Websites.js

@@ -6,7 +6,7 @@ import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import WebsitesHeader from './WebsitesHeader';
 
-export function WebsitesList({
+export function Websites({
   showHeader = true,
   showEditButton = true,
   showTeam,
@@ -40,4 +40,4 @@ export function WebsitesList({
   );
 }
 
-export default WebsitesList;
+export default Websites;

src/app/(app)/settings/websites/WebsitesTable.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Button, Text, Icon, Icons, GridTable, GridColumn, Flexbox } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
@@ -29,7 +29,7 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
           } = row;
 
           return (
-            <Flexbox gap={10}>
+            <>
               {showEditButton && (!showTeam || ownerId === user.id) && (
                 <Link href={`/settings/websites/${id}`}>
                   <Button>
@@ -48,7 +48,7 @@ export function WebsitesTable({ data = [], showTeam, showEditButton }) {
                   <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
-            </Flexbox>
+            </>
           );
         }}
       </GridColumn>

src/app/(app)/settings/websites/page.js

@@ -1,9 +1,9 @@
-import WebsitesList from 'app/(app)/settings/websites/WebsitesList';
+import Websites from './Websites';
 
 export default function () {
   if (process.env.cloudMode) {
     return null;
   }
 
-  return <WebsitesList />;
+  return <Websites />;
 }

src/app/(app)/websites/WebsitesBrowse.js

@@ -1,5 +1,5 @@
 'use client';
-import WebsiteList from 'app/(app)/settings/websites/WebsitesList';
+import WebsiteList from '../settings/websites/Websites';
 import { useMessages } from 'components/hooks';
 import { useState } from 'react';
 import { Item, Tabs } from 'react-basics';

src/components/common/DataTable.module.css

@@ -23,6 +23,9 @@
 }
 
 .body td {
+  display: flex;
+  gap: 10px;
+  min-height: 70px;
   align-items: center;
 }
 

src/components/common/SettingsTable.js

@@ -1,100 +0,0 @@
-import Empty from 'components/common/Empty';
-import useMessages from 'components/hooks/useMessages';
-import { useState } from 'react';
-import {
-  SearchField,
-  Table,
-  TableBody,
-  TableCell,
-  TableColumn,
-  TableHeader,
-  TableRow,
-} from 'react-basics';
-import styles from './SettingsTable.module.css';
-import Pager from 'components/common/Pager';
-
-export function SettingsTable({
-  columns = [],
-  data,
-  children,
-  cellRender,
-  showSearch,
-  showPaging,
-  onFilterChange,
-  onPageChange,
-  onPageSizeChange,
-  filterValue,
-}) {
-  const { formatMessage, labels, messages } = useMessages();
-  const [filter, setFilter] = useState(filterValue);
-  const { data: value, page, count, pageSize } = data;
-
-  const handleFilterChange = value => {
-    setFilter(value);
-    onFilterChange(value);
-  };
-
-  return (
-    <>
-      {showSearch && (value.length > 0 || filterValue) && (
-        <SearchField
-          onChange={handleFilterChange}
-          delay={1000}
-          value={filter}
-          autoFocus={true}
-          placeholder={formatMessage(labels.search)}
-          style={{ maxWidth: '300px', marginBottom: '10px' }}
-        />
-      )}
-      {value.length === 0 && filterValue && (
-        <Empty message={formatMessage(messages.noResultsFound)} />
-      )}
-      {value.length > 0 && (
-        <Table columns={columns} rows={value}>
-          <TableHeader className={styles.header}>
-            {(column, index) => {
-              return (
-                <TableColumn key={index} className={styles.cell} style={columns[index].style}>
-                  {column.label}
-                </TableColumn>
-              );
-            }}
-          </TableHeader>
-          <TableBody className={styles.body}>
-            {(row, keys, rowIndex) => {
-              row.action = children(row, keys, rowIndex);
-
-              return (
-                <TableRow key={rowIndex} data={row} keys={keys} className={styles.row}>
-                  {(data, key, colIndex) => {
-                    return (
-                      <TableCell
-                        key={colIndex}
-                        className={styles.cell}
-                        style={columns[colIndex].style}
-                      >
-                        <label className={styles.label}>{columns[colIndex].label}</label>
-                        {cellRender ? cellRender(row, data, key, colIndex) : data[key]}
-                      </TableCell>
-                    );
-                  }}
-                </TableRow>
-              );
-            }}
-          </TableBody>
-          {showPaging && (
-            <Pager
-              page={page}
-              pageSize={pageSize}
-              count={count}
-              onPageChange={onPageChange}
-              onPageSizeChange={onPageSizeChange}
-            />
-          )}
-        </Table>
-      )}
-    </>
-  );
-}
-
-export default SettingsTable;

src/components/common/SettingsTable.module.css

@@ -1,44 +0,0 @@
-.cell {
-  align-items: center;
-}
-
-.row .cell:last-child {
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-.label {
-  display: none;
-  font-weight: 700;
-}
-
-@media screen and (max-width: 992px) {
-  .header .cell {
-    display: none;
-  }
-
-  .label {
-    display: block;
-    min-width: 100px;
-  }
-
-  .row .cell {
-    padding-left: 0;
-    flex-basis: 100%;
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .row {
-    flex-wrap: wrap;
-  }
-
-  .header .cell:last-child {
-    display: none;
-  }
-
-  .row .cell:last-child {
-    padding-left: 0;
-    flex-basis: 100%;
-  }
-}

src/components/layout/Page.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading } from 'react-basics';

src/components/layout/PageHeader.tsx

@@ -5,7 +5,7 @@ import styles from './PageHeader.module.css';
 export interface PageHeaderProps {
   title?: string;
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export function PageHeader({ title, className, children }: PageHeaderProps) {

src/index.ts

@@ -12,7 +12,6 @@ export * from 'components/common/HoverTooltip';
 export * from 'components/common/LinkButton';
 export * from 'components/common/MobileMenu';
 export * from 'components/common/Pager';
-export * from 'components/common/SettingsTable';
 export * from 'components/common/UpdateNotice';
 export * from 'components/common/WorldMap';
 
@@ -113,5 +112,5 @@ export * from 'app/(app)/settings/websites/[id]/WebsiteDeleteForm';
 export * from 'app/(app)/settings/websites/[id]/WebsiteEditForm';
 export * from 'app/(app)/settings/websites/[id]/WebsiteResetForm';
 export * from 'app/(app)/settings/websites/WebsiteSettings';
-export * from 'app/(app)/settings/websites/WebsitesList';
+export * from './app/(app)/settings/websites/Websites';
 export * from 'app/(app)/settings/websites/WebsitesTable';

src/lib/prisma.ts

@@ -189,7 +189,7 @@ function getPageFilters(filters: SearchFilter): [
 
   return [
     {
-      ...(pageSize > 0 && { take: pageSize, skip: pageSize * (page - 1) }),
+      ...(pageSize > 0 && { take: +pageSize, skip: +pageSize * (page - 1) }),
       ...(orderBy && {
         orderBy: [
           {

src/pages/api/users/[id]/websites.ts

@@ -30,7 +30,7 @@ export default async (
   await useValidate(schema, req, res);
 
   const { user } = req.auth;
-  const { id: userId, page, query, includeTeams, onlyTeams } = req.query;
+  const { id: userId, page = 1, query = '', includeTeams, onlyTeams } = req.query;
 
   if (req.method === 'GET') {
     if (!user.isAdmin && user.id !== userId) {
@@ -38,8 +38,8 @@ export default async (
     }
 
     const websites = await getWebsitesByUserId(userId, {
-      page: +page,
+      page,
-      query: query as string,
+      query,
       includeTeams,
       onlyTeams,
     });