Fixed paging. Updated edit props.

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

@@ -1,13 +1,12 @@
 'use client';
 import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
-import { useMessages, useLogin } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { ROLES } from 'lib/constants';
 import LinkButton from 'components/common/LinkButton';
 
 export function TeamsTable({
   data = [],
-  allowEdit = false,
   showActions = true,
 }: {
   data: any[];
@@ -15,7 +14,6 @@ export function TeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
   const breakpoint = useBreakpoint();
 
   return (
@@ -30,34 +28,22 @@ export function TeamsTable({
       <GridColumn name="members" label={formatMessage(labels.members)}>
         {row => row._count.teamUser}
       </GridColumn>
-      <GridColumn name="action" label=" " alignment="end">
+      {showActions && (
-        {row => {
+        <GridColumn name="action" label=" " alignment="end">
-          const { id, teamUser } = row;
+          {row => {
-          const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
+            const { id } = row;
-          const isOwner = user.id === owner?.userId;
 
-          return (
+            return (
-            showActions && (
+              <LinkButton href={`/teams/${id}/settings`}>
-              <>
+                <Icon>
-                {allowEdit && isOwner && (
+                  <Icons.ArrowRight />
-                  <LinkButton href={`/teams/${id}/settings`}>
+                </Icon>
-                    <Icon>
+                <Text>{formatMessage(labels.view)}</Text>
-                      <Icons.Edit />
+              </LinkButton>
-                    </Icon>
+            );
-                    <Text>{formatMessage(labels.edit)}</Text>
+          }}
-                  </LinkButton>
+        </GridColumn>
-                )}
+      )}
-                <LinkButton href={`/teams/${id}`}>
-                  <Icon>
-                    <Icons.Change />
-                  </Icon>
-                  <Text>{formatMessage(labels.switch)}</Text>
-                </LinkButton>
-              </>
-            )
-          );
-        }}
-      </GridColumn>
     </GridTable>
   );
 }

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

@@ -5,15 +5,15 @@ import WebsiteAddButton from './WebsiteAddButton';
 
 export interface WebsitesHeaderProps {
   teamId?: string;
-  showActions?: boolean;
+  allowCreate?: boolean;
 }
 
-export function WebsitesHeader({ teamId, showActions = true }: WebsitesHeaderProps) {
+export function WebsitesHeader({ teamId, allowCreate = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>
-      {!process.env.cloudMode && showActions && <WebsiteAddButton teamId={teamId} />}
+      {allowCreate && !process.env.cloudMode && <WebsiteAddButton teamId={teamId} />}
     </PageHeader>
   );
 }

src/components/input/ProfileButton.module.css

@@ -20,3 +20,9 @@
   text-align: right;
   margin-right: 10px;
 }
+
+.name {
+  color: var(--font-color200);
+  background: var(--base75);
+  padding: var(--size300) var(--size600);
+}

src/components/input/ProfileButton.tsx

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import Icons from 'components/icons';
 import { useMessages, useLogin, useLocale } from 'components/hooks';
 import { CURRENT_VERSION } from 'lib/constants';
-import Avatar from 'components/common/Avatar';
 import styles from './ProfileButton.module.css';
 
 export function ProfileButton() {
@@ -34,12 +33,7 @@ export function ProfileButton() {
       <Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
         {(close: () => void) => (
           <Menu onSelect={key => handleSelect(key, close)} className={styles.menu}>
-            <Item key="user" className={styles.item}>
+            <Text className={styles.name}>{user.username}</Text>
-              <Icon size="lg">
-                <Avatar value={user.id} />
-              </Icon>
-              <Text>{user.username}</Text>
-            </Item>
             <Item key="profile" className={styles.item} divider={true}>
               <Icon>
                 <Icons.User />

src/lib/prisma.ts

@@ -195,7 +195,7 @@ async function pagedQuery<T>(model: string, criteria: T, filters: SearchFilter)
 
   const count = await prisma.client[model].count({ where: (criteria as any).where });
 
-  return { data, count, page: +page, pageSize, orderBy };
+  return { data, count, page: +page, pageSize: size, orderBy };
 }
 
 function getQueryMode(): Prisma.QueryMode {

src/pages/api/teams/[teamId]/websites/index.ts

@@ -48,7 +48,7 @@ export default async (
     const websites = await getTeamWebsites(teamId, {
       page,
       query,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, websites);

src/pages/api/teams/index.ts

@@ -40,7 +40,7 @@ export default async (
     const results = await getUserTeams(userId, {
       page,
       query,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, results);

src/pages/api/users/[userId]/teams.ts

@@ -44,7 +44,7 @@ export default async (
     const teams = await getUserTeams(userId, {
       query,
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
     });
 
     return ok(res, teams);

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

@@ -30,7 +30,7 @@ export default async (req: NextApiRequestQueryBody, res: NextApiResponse) => {
 
     const websites = await getUserWebsites(userId, {
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
       query,
       ...rest,
     });

src/pages/api/websites/[websiteId]/reports.ts

@@ -37,7 +37,7 @@ export default async (
 
     const data = await getWebsiteReports(websiteId, {
       page,
-      pageSize: +pageSize || undefined,
+      pageSize,
       query,
     });