Updated clients.

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

@@ -2,11 +2,13 @@ import useApi from 'components/hooks/useApi';
 import { useState } from 'react';
 import { Button, Form, FormButtons, GridColumn, Loading, SubmitButton, Toggle } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
-import WebsitesDataTable from '../../websites/WebsitesDataTable';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 import Empty from 'components/common/Empty';
 import { setValue } from 'store/cache';
+import { useUser } from 'components/hooks';
 
 export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
+  const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
@@ -37,7 +39,7 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
       {!isLoading && !hasData && <Empty />}
       {hasData && (
         <Form onSubmit={handleSubmit} error={error}>
-          <WebsitesDataTable showHeader={false} showActions={false}>
+          <WebsitesDataTable userId={user.id} showHeader={false} showActions={false}>
             <GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
               {row => (
                 <Toggle

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

@@ -0,0 +1,15 @@
+'use client';
+import { useUser } from 'components/hooks';
+import WebsitesDataTable from './WebsitesDataTable';
+import WebsitesHeader from './WebsitesHeader';
+
+export default function Websites() {
+  const { user } = useUser();
+
+  return (
+    <>
+      <WebsitesHeader />
+      <WebsitesDataTable userId={user.id} />
+    </>
+  );
+}

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

@@ -1,13 +1,13 @@
 'use client';
 import { ReactNode } from 'react';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import useUser from 'components/hooks/useUser';
 import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import useCache from 'store/cache';
 
 export interface WebsitesDataTableProps {
+  userId: string;
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
@@ -17,25 +17,25 @@ export interface WebsitesDataTableProps {
   children?: ReactNode;
 }
 
-function useWebsites({ includeTeams, onlyTeams }) {
-  const { user } = useUser();
+function useWebsites(userId: string, { includeTeams, onlyTeams }) {
   const { get } = useApi();
   const modified = useCache((state: any) => state?.websites);
 
   return useFilterQuery(
     ['websites', { includeTeams, onlyTeams, modified }],
     (params: any) => {
-      return get(`/users/${user?.id}/websites`, {
+      return get(`/users/${userId}/websites`, {
         includeTeams,
         onlyTeams,
         ...params,
       });
     },
-    { enabled: !!user },
+    { enabled: !!userId },
   );
 }
 
 export function WebsitesDataTable({
+  userId,
   allowEdit = true,
   allowView = true,
   showActions = true,
@@ -44,7 +44,7 @@ export function WebsitesDataTable({
   onlyTeams,
   children,
 }: WebsitesDataTableProps) {
-  const queryResult = useWebsites({ includeTeams, onlyTeams });
+  const queryResult = useWebsites(userId, { includeTeams, onlyTeams });
 
   return (
     <DataTable queryResult={queryResult}>

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

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

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

@@ -1,6 +1,6 @@
 'use client';
 import WebsitesDataTable from '../settings/websites/WebsitesDataTable';
-import { useMessages } from 'components/hooks';
+import { useMessages, useUser } from 'components/hooks';
 import { useState } from 'react';
 import { Item, Tabs } from 'react-basics';
 
@@ -10,6 +10,7 @@ const TABS = {
 };
 
 export function WebsitesBrowse() {
+  const { user } = useUser();
   const { formatMessage, labels } = useMessages();
   const [tab, setTab] = useState(TABS.myWebsites);
   const allowEdit = !process.env.cloudMode;
@@ -20,9 +21,14 @@ export function WebsitesBrowse() {
         <Item key={TABS.myWebsites}>{formatMessage(labels.myWebsites)}</Item>
         <Item key={TABS.teamWebsites}>{formatMessage(labels.teamWebsites)}</Item>
       </Tabs>
-      {tab === TABS.myWebsites && <WebsitesDataTable allowEdit={allowEdit} />}
+      {tab === TABS.myWebsites && <WebsitesDataTable userId={user.id} allowEdit={allowEdit} />}
       {tab === TABS.teamWebsites && (
-        <WebsitesDataTable showTeam={true} onlyTeams={true} allowEdit={allowEdit} />
+        <WebsitesDataTable
+          userId={user.id}
+          showTeam={true}
+          onlyTeams={true}
+          allowEdit={allowEdit}
+        />
       )}
     </>
   );