Added teams pages. Refactored hooks.

src/app/(main)/NavBar.tsx

@@ -6,7 +6,7 @@ import Icons from 'components/icons';
 import ThemeButton from 'components/input/ThemeButton';
 import LanguageButton from 'components/input/LanguageButton';
 import ProfileButton from 'components/input/ProfileButton';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import HamburgerButton from 'components/common/HamburgerButton';
 import { usePathname } from 'next/navigation';
 import styles from './NavBar.module.css';

src/app/(main)/UpdateNotice.tsx

@@ -6,7 +6,7 @@ import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { usePathname } from 'next/navigation';
 
 export function UpdateNotice({ user, config }) {

src/app/(main)/console/TestConsole.tsx

@@ -8,8 +8,7 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
 import WebsiteChart from 'app/(main)/websites/[id]/WebsiteChart';
-import useApi from 'components/hooks/useApi';
-import useNavigation from 'components/hooks/useNavigation';
+import { useApi, useNavigation } from 'components/hooks';
 import styles from './TestConsole.module.css';
 
 export function TestConsole({ websiteId }: { websiteId: string }) {

src/app/(main)/dashboard/Dashboard.tsx

@@ -7,11 +7,11 @@ import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
 import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
 import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import useDashboard from 'store/dashboard';
-import useMessages from 'components/hooks/useMessages';
-import useLocale from 'components/hooks/useLocale';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { useFilterQuery } from 'components/hooks';
 import { useUser } from 'components/hooks';
 
 export function Dashboard() {

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -5,8 +5,8 @@ import classNames from 'classnames';
 import { Button } from 'react-basics';
 import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
-import useMessages from 'components/hooks/useMessages';
-import useApi from 'components/hooks/useApi';
+import { useMessages } from 'components/hooks';
+import { useApi } from 'components/hooks';
 import styles from './DashboardEdit.module.css';
 
 const dragId = 'dashboard-website-ordering';

src/app/(main)/dashboard/DashboardSettingsButton.tsx

@@ -1,7 +1,7 @@
 import { TooltipPopup, Icon, Text, Flexbox, Button } from 'react-basics';
 import Icons from 'components/icons';
 import { saveDashboard } from 'store/dashboard';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function DashboardSettingsButton() {
   const { formatMessage, labels } = useMessages();

src/app/(main)/reports/ReportsTable.tsx

@@ -1,7 +1,7 @@
 import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages } from 'components/hooks';
-import useUser from 'components/hooks/useUser';
+import { useUser } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
 import ReportDeleteButton from './ReportDeleteButton';
 

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,7 +1,7 @@
 import { JSX, useCallback, useContext, useMemo } from 'react';
 import { Loading, StatusLight } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
-import useTheme from 'components/hooks/useTheme';
+import { useMessages } from 'components/hooks';
+import { useTheme } from 'components/hooks';
 import BarChart from 'components/metrics/BarChart';
 import { formatLongNumber } from 'lib/format';
 import { ReportContext } from '../[id]/Report';

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';
 

src/app/(main)/teams/TeamsContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export const TeamsContext = createContext(null);
+
+export default TeamsContext;

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

@@ -0,0 +1,20 @@
+'use client';
+import TeamsContext from '../TeamsContext';
+import { Loading } from 'react-basics';
+import { useTeam } from 'components/hooks';
+import { useParams } from 'next/navigation';
+
+export default function Team({ children }) {
+  const { id: teamId } = useParams();
+  const { data: team, isLoading, error } = useTeam(teamId as string);
+
+  if (error) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <Loading position="page" />;
+  }
+
+  return <TeamsContext.Provider value={team}>{children}</TeamsContext.Provider>;
+}

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

@@ -0,0 +1,5 @@
+import Team from './Team';
+
+export default function ({ children }) {
+  return <Team>{children}</Team>;
+}

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

@@ -0,0 +1,14 @@
+'use client';
+import { useContext } from 'react';
+import TeamsContext from 'app/(main)/teams/TeamsContext';
+import WebsitesDataTable from 'app/(main)/settings/websites/WebsitesDataTable';
+
+export default function TeamWebsites() {
+  const team = useContext(TeamsContext);
+
+  if (!team) {
+    return null;
+  }
+
+  return <WebsitesDataTable teamId={team.id} />;
+}

src/app/(main)/teams/[id]/websites/page.tsx

@@ -0,0 +1,11 @@
+import TeamWebsites from './TeamWebsites';
+import WebsitesHeader from 'app/(main)/settings/websites/WebsitesHeader';
+
+export default function TeamWebsitesPage({ params: { id } }: { params: { id: string } }) {
+  return (
+    <>
+      <WebsitesHeader teamId={id} />
+      <TeamWebsites />
+    </>
+  );
+}

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

@@ -3,7 +3,7 @@ import { Loading } from 'react-basics';
 import { usePathname } from 'next/navigation';
 import Page from 'components/layout/Page';
 import FilterTags from 'components/metrics/FilterTags';
-import useNavigation from 'components/hooks/useNavigation';
+import { useNavigation } from 'components/hooks';
 import { useWebsite } from 'components/hooks';
 import WebsiteChart from './WebsiteChart';
 import WebsiteExpandedView from './WebsiteExpandedView';

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

@@ -12,8 +12,8 @@ import ReferrersTable from 'components/metrics/ReferrersTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import EventsTable from 'components/metrics/EventsTable';
 import SideNav from 'components/layout/SideNav';
-import useNavigation from 'components/hooks/useNavigation';
-import useMessages from 'components/hooks/useMessages';
+import { useNavigation } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import LinkButton from 'components/common/LinkButton';
 import styles from './WebsiteExpandedView.module.css';
 

src/app/(main)/websites/[id]/event-data/EventDataMetricsBar.tsx

@@ -1,6 +1,6 @@
 import { useApi, useDateRange } from 'components/hooks';
 import MetricCard from 'components/metrics/MetricCard';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricsBar from 'components/metrics/MetricsBar';
 import styles from './EventDataMetricsBar.module.css';

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

@@ -1,5 +1,5 @@
 import WebsiteDetails from './WebsiteDetails';
 
-export default function WebsiteReportsPage({ params: { id } }) {
+export default function WebsitePage({ params: { id } }) {
   return <WebsiteDetails websiteId={id} />;
 }

src/app/(main)/websites/[id]/realtime/Realtime.tsx

@@ -6,7 +6,7 @@ import { Grid, GridRow } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
 import WorldMap from 'components/metrics/WorldMap';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { useWebsite } from 'components/hooks';
 import { percentFilter } from 'lib/filters';
 import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';

src/app/(main)/websites/[id]/realtime/RealtimeCountries.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import ListTable from 'components/metrics/ListTable';
-import useLocale from 'components/hooks/useLocale';
-import useCountryNames from 'components/hooks/useCountryNames';
-import useMessages from 'components/hooks/useMessages';
+import { useLocale } from 'components/hooks';
+import { useCountryNames } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import classNames from 'classnames';
 import styles from './RealtimeCountries.module.css';
 

src/app/(main)/websites/[id]/realtime/RealtimeHeader.tsx

@@ -1,5 +1,5 @@
 import MetricCard from 'components/metrics/MetricCard';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { RealtimeData } from 'lib/types';
 import styles from './RealtimeHeader.module.css';
 

src/app/(main)/websites/[id]/realtime/RealtimeHome.tsx

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function RealtimeHome() {
   const { formatMessage, labels, messages } = useMessages();
@@ -22,7 +22,7 @@ export function RealtimeHome() {
   }, [data, router]);
 
   return (
-    <Page loading={isLoading || data?.length > 0} error={error}>
+    <Page isLoading={isLoading || data?.length > 0} error={error}>
       <PageHeader title={formatMessage(labels.realtime)} />
       {data?.length === 0 && (
         <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)} />

src/app/(main)/websites/[id]/realtime/RealtimeLog.tsx

@@ -6,10 +6,10 @@ import thenby from 'thenby';
 import { safeDecodeURI } from 'next-basics';
 import FilterButtons from 'components/common/FilterButtons';
 import Empty from 'components/common/Empty';
-import useLocale from 'components/hooks/useLocale';
-import useCountryNames from 'components/hooks/useCountryNames';
+import { useLocale } from 'components/hooks';
+import { useCountryNames } from 'components/hooks';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import useFormat from 'components//hooks/useFormat';
 import { BROWSERS } from 'lib/constants';
 import { stringToColor } from 'lib/format';

src/app/(main)/websites/[id]/realtime/RealtimeUrls.tsx

@@ -4,7 +4,7 @@ import thenby from 'thenby';
 import { percentFilter } from 'lib/filters';
 import ListTable from 'components/metrics/ListTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { RealtimeData } from 'lib/types';
 
 export function RealtimeUrls({

src/app/Providers.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactBasicsProvider } from 'react-basics';
 import ErrorBoundary from 'components/common/ErrorBoundary';
 import SettingsContext from 'app/(main)/settings/SettingsContext';
-import useLocale from 'components/hooks/useLocale';
+import { useLocale } from 'components/hooks';
 import 'chartjs-adapter-date-fns';
 
 const client = new QueryClient({

src/app/login/LoginForm.tsx

@@ -10,10 +10,9 @@ import {
   Icon,
 } from 'react-basics';
 import { useRouter } from 'next/navigation';
-import useApi from 'components/hooks/useApi';
+import { useApi, useMessages } from 'components/hooks';
 import { setUser } from 'store/app';
 import { setClientAuthToken } from 'lib/client';
-import useMessages from 'components/hooks/useMessages';
 import Logo from 'assets/logo.svg';
 import styles from './LoginForm.module.css';
 
@@ -25,13 +24,13 @@ export function LoginForm() {
     mutationFn: (data: any) => post('/auth/login', data),
   });
 
-  const handleSubmit = async data => {
+  const handleSubmit = async (data: any) => {
     mutate(data, {
       onSuccess: async ({ token, user }) => {
         setClientAuthToken(token);
         setUser(user);
 
-        await router.push('/dashboard');
+        router.push('/dashboard');
       },
     });
   };

src/app/logout/Logout.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { setUser } from 'store/app';
 import { removeClientAuthToken } from 'lib/client';
 

src/app/not-found.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Flexbox } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export default function () {
   const { formatMessage, labels } = useMessages();

src/app/share/[...id]/Share.tsx

@@ -1,6 +1,6 @@
 'use client';
 import WebsiteDetails from 'app/(main)/websites/[id]/WebsiteDetails';
-import useShareToken from 'components/hooks/useShareToken';
+import { useShareToken } from 'components/hooks';
 import styles from './Share.module.css';
 import Page from 'components/layout/Page';
 import Header from './Header';

src/components/common/ConfirmDeleteForm.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export interface ConfirmDeleteFormProps {
   name: string;

src/components/common/DataTable.tsx

@@ -5,7 +5,7 @@ import { useMessages } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
 import styles from './DataTable.module.css';
-import { FilterQueryResult } from 'components/hooks/useFilterQuery';
+import { FilterQueryResult } from 'components/hooks';
 
 const DEFAULT_SEARCH_DELAY = 600;
 

src/components/common/Empty.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './Empty.module.css';
 
 export interface EmptyProps {

src/components/common/ErrorBoundary.tsx

@@ -2,7 +2,7 @@
 import { ErrorInfo, ReactNode } from 'react';
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './ErrorBoundary.module.css';
 
 const logError = (error: Error, info: ErrorInfo) => {

src/components/common/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();

src/components/common/FilterLink.tsx

@@ -3,8 +3,8 @@ import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
-import useNavigation from 'components/hooks/useNavigation';
-import useMessages from 'components/hooks/useMessages';
+import { useNavigation } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import styles from './FilterLink.module.css';
 
 export interface FilterLinkProps {

src/components/common/Pager.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Button, Icon, Icons } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './Pager.module.css';
 
 export interface PagerProps {

src/components/hooks/index.js

@@ -1,5 +1,14 @@
-export * from './useApi';
-export * from './useConfig';
+export * from './queries/useApi';
+export * from './queries/useConfig';
+export * from './queries/useFilterQuery';
+export * from './queries/useLogin';
+export * from './queries/useReport';
+export * from './queries/useReports';
+export * from './queries/useShareToken';
+export * from './queries/useTeam';
+export * from './queries/useTeamWebsites';
+export * from './queries/useUser';
+export * from './queries/useWebsite';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
@@ -11,12 +20,6 @@ export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
 export * from './useNavigation';
-export * from './useReport';
-export * from './useReports';
-export * from './useLogin';
-export * from './useShareToken';
 export * from './useSticky';
 export * from './useTheme';
 export * from './useTimezone';
-export * from './useUser';
-export * from './useWebsite';

src/components/hooks/queries/useApi.ts

@@ -4,7 +4,7 @@ import { getClientAuthToken } from 'lib/client';
 import { SHARE_TOKEN_HEADER } from 'lib/constants';
 import useStore from 'store/app';
 
-const selector = state => state.shareToken;
+const selector = (state: { shareToken: { token?: string } }) => state.shareToken;
 
 export function useApi() {
   const shareToken = useStore(selector);

src/components/hooks/queries/useConfig.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
-import useApi from 'components/hooks/useApi';
+import { useApi } from './useApi';
 
 let loading = false;
 

src/components/hooks/queries/useFilterQuery.ts

@@ -1,6 +1,6 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState, Dispatch, SetStateAction } from 'react';
-import { useApi } from 'components/hooks/useApi';
+import { useApi } from './useApi';
 import { FilterResult, SearchFilter } from 'lib/types';
 
 export interface FilterQueryResult<T> {

src/components/hooks/queries/useLogin.ts

@@ -1,5 +1,5 @@
-import useApi from 'components/hooks/useApi';
-import useUser from 'components/hooks/useUser';
+import useApi from './useApi';
+import useUser from './useUser';
 
 export function useLogin() {
   const { get, useQuery } = useApi();

src/components/hooks/queries/useReport.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
-import { useTimezone } from './useTimezone';
-import useApi from './useApi';
-import useMessages from './useMessages';
+import { useApi } from './useApi';
+import { useTimezone } from '../useTimezone';
+import { useMessages } from '../useMessages';
 
 export function useReport(reportId: string, defaultParameters: { [key: string]: any }) {
   const [report, setReport] = useState(null);

src/components/hooks/queries/useReports.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useFilterQuery from 'components/hooks/useFilterQuery';
+import useFilterQuery from './useFilterQuery';
 
 export function useReports(websiteId?: string) {
   const [modified, setModified] = useState(Date.now());

src/components/hooks/queries/useTeam.ts

@@ -0,0 +1,12 @@
+import useApi from './useApi';
+
+export function useTeam(teamId: string) {
+  const { get, useQuery } = useApi();
+  return useQuery({
+    queryKey: ['teams', teamId],
+    queryFn: () => get(`/teams/${teamId}`),
+    enabled: !!teamId,
+  });
+}
+
+export default useTeam;

src/components/hooks/queries/useTeamWebsites.ts

@@ -0,0 +1,15 @@
+import useApi from './useApi';
+import useFilterQuery from './useFilterQuery';
+
+export function useTeamWebsites(teamId: string) {
+  const { get } = useApi();
+
+  return useFilterQuery({
+    queryKey: ['teams:websites', { teamId }],
+    queryFn: (params: any) => {
+      return get(`/teams/${teamId}/websites`, params);
+    },
+  });
+}
+
+export default useTeamWebsites;

src/components/hooks/queries/useUser.ts

@@ -1,6 +1,6 @@
 import useStore, { setUser } from 'store/app';
 
-const selector = state => state.user;
+const selector = (state: { user: any }) => state.user;
 
 export function useUser() {
   const user = useStore(selector);

src/components/hooks/queries/useWebsites.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import useFilterQuery from './useFilterQuery';
+import useCache from 'store/cache';
+
+export function useWebsites({ userId, teamId }: { userId?: string; teamId?: string }) {
+  const { get } = useApi();
+  const modified = useCache((state: any) => state?.websites);
+
+  return useFilterQuery({
+    queryKey: ['websites', { userId, teamId, modified }],
+    queryFn: (params: any) => {
+      return get(teamId ? `/teams/${teamId}/websites` : '/websites', {
+        ...params,
+      });
+    },
+    enabled: !!(userId || teamId),
+  });
+}
+
+export default useWebsites;

src/components/hooks/useCountryNames.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { httpGet } from 'next-basics';
-import enUS from 'public/intl/country/en-US.json';
+import enUS from '../../../public/intl/country/en-US.json';
 
 const countryNames = {
   'en-US': enUS,

src/components/hooks/useDateRange.ts

@@ -5,7 +5,7 @@ import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import { DateRange } from 'lib/types';
 import useLocale from './useLocale';
-import useApi from './useApi';
+import { useApi } from 'components/hooks';
 
 export function useDateRange(websiteId?: string) {
   const { get } = useApi();