Added teams pages. Refactored hooks.

src/app/(main)/settings/SettingsContext.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 export const SettingsContext = createContext(null);

src/app/(main)/settings/layout.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import useUser from 'components/hooks/useUser';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import SideNav from 'components/layout/SideNav';
 import styles from './layout.module.css';
 

src/app/(main)/settings/profile/DateRangeSetting.tsx

@@ -1,8 +1,8 @@
 import DateFilter from 'components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
-import useDateRange from 'components/hooks/useDateRange';
+import { useDateRange } from 'components/hooks';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { DateRange } from 'lib/types';
 
 export function DateRangeSetting() {

src/app/(main)/settings/profile/LanguageSetting.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Button, Dropdown, Item, Flexbox } from 'react-basics';
-import useLocale from 'components/hooks/useLocale';
+import { useLocale } from 'components/hooks';
 import { DEFAULT_LOCALE } from 'lib/constants';
 import { languages } from 'lib/lang';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './LanguageSetting.module.css';
 
 export function LanguageSetting() {

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
 import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/profile/PasswordEditForm.tsx

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 export function PasswordEditForm({ onSave, onClose }) {
   const { formatMessage, labels, messages } = useMessages();

src/app/(main)/settings/profile/ProfileSettings.tsx

@@ -5,8 +5,8 @@ import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
 import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
 import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
-import useUser from 'components/hooks/useUser';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 
 export function ProfileSettings() {

src/app/(main)/settings/profile/ThemeSetting.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Button, Icon } from 'react-basics';
-import useTheme from 'components/hooks/useTheme';
+import { useTheme } from 'components/hooks';
 import Sun from 'assets/sun.svg';
 import Moon from 'assets/moon.svg';
 import styles from './ThemeSetting.module.css';

src/app/(main)/settings/profile/TimezoneSetting.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { Dropdown, Item, Button, Flexbox } from 'react-basics';
 import { listTimeZones } from 'timezone-support';
-import useTimezone from 'components/hooks/useTimezone';
-import useMessages from 'components/hooks/useMessages';
+import { useTimezone } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { getTimezone } from 'lib/date';
 import styles from './TimezoneSetting.module.css';
 

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

@@ -8,8 +8,8 @@ import {
   SubmitButton,
 } from 'react-basics';
 import { setValue } from 'store/cache';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
   const { formatMessage, labels } = useMessages();

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

@@ -1,6 +1,6 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamDeleteForm({

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

@@ -8,8 +8,8 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {

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

@@ -1,7 +1,7 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useLocale from 'components/hooks/useLocale';
-import useUser from 'components/hooks/useUser';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { useUser } from 'components/hooks';
 import TeamDeleteForm from './TeamLeaveForm';
 
 export function TeamLeaveButton({

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

@@ -1,6 +1,6 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function TeamLeaveForm({

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Modal, ModalTrigger, Text } from 'react-basics';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamAddForm from './TeamAddForm';
 
 export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {

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

@@ -1,8 +1,8 @@
 'use client';
 import DataTable from 'components/common/DataTable';
 import TeamsTable from 'app/(main)/settings/teams/TeamsTable';
-import useApi from 'components/hooks/useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useApi } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import useCache from 'store/cache';
 
 export function TeamsDataTable() {

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

@@ -2,8 +2,8 @@
 import { Flexbox } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { ROLES } from 'lib/constants';
-import useUser from 'components/hooks/useUser';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import TeamsJoinButton from './TeamsJoinButton';
 import TeamsAddButton from './TeamsAddButton';
 

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamJoinForm from './TeamJoinForm';
 
 export function TeamsJoinButton() {

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

@@ -1,10 +1,9 @@
 'use client';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
-import { ROLES } from 'lib/constants';
-import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
-import TeamLeaveButton from './TeamLeaveButton';
+import Link from 'next/link';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
+import { ROLES } from 'lib/constants';
 
 export function TeamsTable({ data = [] }: { data: any[] }) {
   const { formatMessage, labels } = useMessages();
@@ -25,17 +24,28 @@ export function TeamsTable({ data = [] }: { data: any[] }) {
       </GridColumn>
       <GridColumn name="action" label=" " alignment="end">
         {row => {
-          const { id, name, teamUser } = row;
+          const { id, teamUser } = row;
           const owner = teamUser.find(({ role }) => role === ROLES.teamOwner);
           const isOwner = user.id === owner?.userId;
 
           return (
             <>
-              {!isOwner && <TeamLeaveButton teamId={id} teamName={name} />}
-              <Link href={`/settings/teams/${id}`}>
+              {isOwner && (
+                <Link href={`/settings/teams/${id}`}>
+                  <Button>
+                    <Icon>
+                      <Icons.Edit />
+                    </Icon>
+                    <Text>{formatMessage(labels.edit)}</Text>
+                  </Button>
+                </Link>
+              )}
+              <Link href={`/teams/${id}`}>
                 <Button>
-                  <Icon>{isOwner ? <Icons.Edit /> : <Icons.ArrowRight />}</Icon>
-                  <Text>{formatMessage(isOwner ? labels.edit : labels.view)}</Text>
+                  <Icon>
+                    <Icons.External />
+                  </Icon>
+                  <Text>{formatMessage(labels.view)}</Text>
                 </Button>
               </Link>
             </>

src/app/(main)/settings/teams/[id]/TeamData.tsx

@@ -1,5 +1,5 @@
 import { ActionForm, Button, Modal, ModalTrigger } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import TeamDeleteForm from '../TeamDeleteForm';
 
 export function TeamData({ teamId }: { teamId: string; onSave?: (value: string) => void }) {

src/app/(main)/settings/teams/[id]/TeamEditForm.tsx

@@ -10,8 +10,8 @@ import {
 } from 'react-basics';
 import { getRandomChars } from 'next-basics';
 import { useRef, useState } from 'react';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 const generateId = () => getRandomChars(16);
 

src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.tsx

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 import { setValue } from 'store/cache';
 

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

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useApi } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import useCache from 'store/cache';
 import TeamMembersTable from './TeamMembersTable';

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

@@ -1,6 +1,6 @@
 import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
 

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

@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 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';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useUser } from 'components/hooks';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import TeamEditForm from './TeamEditForm';
 import TeamMembers from './TeamMembers';
 import TeamWebsites from './TeamWebsites';

src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { Icon, Icons, LoadingButton, Text } from 'react-basics';
 
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {

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

@@ -1,27 +1,7 @@
-import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import DataTable from 'components/common/DataTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
-import useApi from 'components/hooks/useApi';
-import useUser from 'components/hooks/useUser';
-import useCache from 'store/cache';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
 
 export function TeamWebsites({ teamId }: { teamId: string; readOnly: boolean }) {
-  const { get } = useApi();
-  const { user } = useUser();
-  const modified = useCache(state => state?.['team:websites']);
-  const queryResult = useFilterQuery({
-    queryKey: ['team:websites', { teamId, modified }],
-    queryFn: params => {
-      return get(`/teams/${teamId}/websites`, {
-        ...params,
-      });
-    },
-    enabled: !!user,
-  });
-
-  return (
-    <DataTable queryResult={queryResult}>{({ data }) => <WebsitesTable data={data} />}</DataTable>
-  );
+  return <WebsitesDataTable teamId={teamId} />;
 }
 
 export default TeamWebsites;

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

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function TeamWebsitesTable({
   data = [],

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Text, Modal, Icons, ModalTrigger, useToasts } from 'react-basics';
 import UserAddForm from './UserAddForm';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
 export function UserAddButton({ onSave }: { onSave?: () => void }) {

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

@@ -10,9 +10,9 @@ import {
   SubmitButton,
   Button,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function UserAddForm({ onSave, onClose }) {
   const { post, useMutation } = useApi();

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

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
 import UserDeleteForm from './UserDeleteForm';
 
 export function UserDeleteButton({

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

@@ -1,6 +1,6 @@
 import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 export function UserDeleteForm({ userId, username, onSave, onClose }) {
   const { formatMessage, FormattedMessage, labels, messages } = useMessages();

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

@@ -9,9 +9,9 @@ import {
   SubmitButton,
   PasswordField,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { ROLES } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function UserEditForm({
   userId,

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

@@ -1,7 +1,7 @@
 import Page from 'components/layout/Page';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 
 export function UserWebsites({ userId }) {

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

@@ -1,6 +1,6 @@
 'use client';
-import useApi from 'components/hooks/useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useApi } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import DataTable from 'components/common/DataTable';
 import UsersTable from './UsersTable';
 import useCache from 'store/cache';

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

@@ -1,6 +1,6 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import UserAddButton from './UserAddButton';
 
 export function UsersHeader({ onAdd }: { onAdd?: () => void }) {

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

@@ -2,8 +2,8 @@ import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
-import useLocale from 'components/hooks/useLocale';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
 import UserDeleteButton from './UserDeleteButton';
 
 export function UsersTable({

src/app/(main)/settings/users/[id]/UserSettings.tsx

@@ -3,8 +3,8 @@ import { Key, useEffect, useState } from 'react';
 import { Item, Loading, Tabs, useToasts } from 'react-basics';
 import UserEditForm from '../UserEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import UserWebsites from '../UserWebsites';
 
 export function UserSettings({ userId }) {

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

@@ -1,9 +1,9 @@
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
 import WebsiteAddForm from './WebsiteAddForm';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { setValue } from 'store/cache';
 
-export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
+export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
   const { showToast } = useToasts();
 
@@ -22,7 +22,9 @@ export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
         <Text>{formatMessage(labels.addWebsite)}</Text>
       </Button>
       <Modal title={formatMessage(labels.addWebsite)}>
-        {(close: () => void) => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+        {(close: () => void) => (
+          <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />
+        )}
       </Modal>
     </ModalTrigger>
   );

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

@@ -7,18 +7,26 @@ import {
   Button,
   SubmitButton,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { DOMAIN_REGEX } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../SettingsContext';
 
-export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
+export function WebsiteAddForm({
+  teamId,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels, messages } = useMessages();
   const { websitesUrl } = useContext(SettingsContext);
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
-    mutationFn: (data: any) => post(websitesUrl, data),
+    mutationFn: (data: any) => post(websitesUrl, { ...data, teamId }),
   });
 
   const handleSubmit = async (data: any) => {

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

@@ -8,8 +8,8 @@ import WebsiteEditForm from './[id]/WebsiteEditForm';
 import WebsiteData from './[id]/WebsiteData';
 import TrackingCode from './[id]/TrackingCode';
 import ShareUrl from './[id]/ShareUrl';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import SettingsContext from '../SettingsContext';
 
 export function WebsiteSettings({ websiteId, openExternal = false }) {

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

@@ -1,14 +1,12 @@
 'use client';
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
-import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
-import useFilterQuery from 'components/hooks/useFilterQuery';
-import useCache from 'store/cache';
-import SettingsContext from '../SettingsContext';
+import useWebsites from 'components/hooks/queries/useWebsites';
 
 export interface WebsitesDataTableProps {
-  userId: string;
+  userId?: string;
+  teamId?: string;
   allowEdit?: boolean;
   allowView?: boolean;
   showActions?: boolean;
@@ -17,24 +15,13 @@ export interface WebsitesDataTableProps {
 
 export function WebsitesDataTable({
   userId,
+  teamId,
   allowEdit = true,
   allowView = true,
   showActions = true,
   children,
 }: WebsitesDataTableProps) {
-  const { get } = useApi();
-  const modified = useCache((state: any) => state?.websites);
-  const { websitesUrl } = useContext(SettingsContext);
-
-  const queryResult = useFilterQuery({
-    queryKey: ['websites', { modified }],
-    queryFn: (params: any) => {
-      return get(websitesUrl, {
-        ...params,
-      });
-    },
-    enabled: !!userId,
-  });
+  const queryResult = useWebsites({ userId, teamId });
 
   return (
     <DataTable queryResult={queryResult}>

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

@@ -1,14 +1,19 @@
 'use client';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteAddButton from './WebsiteAddButton';
 
-export function WebsitesHeader({ showActions = true }) {
+export interface WebsitesHeaderProps {
+  teamId?: string;
+  showActions?: boolean;
+}
+
+export function WebsitesHeader({ teamId, showActions = true }: WebsitesHeaderProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <PageHeader title={formatMessage(labels.websites)}>
-      {!process.env.cloudMode && showActions && <WebsiteAddButton />}
+      {!process.env.cloudMode && showActions && <WebsiteAddButton teamId={teamId} />}
     </PageHeader>
   );
 }

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

@@ -1,15 +1,15 @@
-import { ReactNode, useContext } from 'react';
+import { ReactNode } from 'react';
 import Link from 'next/link';
 import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
-import SettingsContext from '../SettingsContext';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
 
 export interface WebsitesTableProps {
   data: any[];
   showActions?: boolean;
   allowEdit?: boolean;
   allowView?: boolean;
+  teamId?: string;
   children?: ReactNode;
 }
 
@@ -18,12 +18,12 @@ export function WebsitesTable({
   showActions,
   allowEdit,
   allowView,
+  teamId,
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
   const breakpoint = useBreakpoint();
-  const { settingsPath, websitesPath } = useContext(SettingsContext);
 
   return (
     <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
@@ -32,15 +32,13 @@ export function WebsitesTable({
       {showActions && (
         <GridColumn name="action" label=" " alignment="end">
           {row => {
-            const {
-              id,
-              user: { id: ownerId },
-            } = row;
+            const { id } = row;
+            const isOwner = row.userId === user.id || row.teamId === teamId;
 
             return (
               <>
-                {allowEdit && ownerId === user.id && (
-                  <Link href={`${settingsPath}/${id}`}>
+                {allowEdit && isOwner && (
+                  <Link href={`/settings/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.Edit />
@@ -50,7 +48,7 @@ export function WebsitesTable({
                   </Link>
                 )}
                 {allowView && (
-                  <Link href={`${websitesPath}/${id}`}>
+                  <Link href={teamId ? `/team/${teamId}/websites/${id}` : `/websites/${id}`}>
                     <Button>
                       <Icon>
                         <Icons.External />

src/app/(main)/settings/websites/[id]/ShareUrl.tsx

@@ -10,8 +10,8 @@ import {
 } from 'react-basics';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { getRandomChars } from 'next-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import SettingsContext from '../../SettingsContext';
 
 const generateId = () => getRandomChars(16);

src/app/(main)/settings/websites/[id]/TrackingCode.tsx

@@ -1,6 +1,6 @@
 import { TextArea } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
+import { useMessages } from 'components/hooks';
+import { useConfig } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteData.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
 import WebsiteDeleteForm from './WebsiteDeleteForm';
 import WebsiteResetForm from './WebsiteResetForm';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function WebsiteData({
   websiteId,

src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx

@@ -7,8 +7,8 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';
 

src/app/(main)/settings/websites/[id]/WebsiteEditForm.tsx

@@ -1,8 +1,8 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useContext, useRef } from 'react';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { DOMAIN_REGEX } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import SettingsContext from '../../SettingsContext';
 
 export function WebsiteEditForm({

src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx

@@ -7,8 +7,8 @@ import {
   SubmitButton,
   TextField,
 } from 'react-basics';
-import useApi from 'components/hooks/useApi';
-import useMessages from 'components/hooks/useMessages';
+import { useApi } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { useContext } from 'react';
 import SettingsContext from '../../SettingsContext';