Use context hooks.

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -9,15 +9,13 @@ import {
   PasswordField,
   useToast,
 } from '@umami/react-zen';
-import { useApi, useLoginQuery, useMessages, useModified } from '@/components/hooks';
+import { useApi, useLoginQuery, useMessages, useModified, useUser } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { useContext } from 'react';
-import { UserContext } from './UserProvider';
 
 export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () => void }) {
   const { formatMessage, labels, messages, getMessage } = useMessages();
   const { post, useMutation } = useApi();
-  const user = useContext(UserContext);
+  const user = useUser();
   const { user: login } = useLoginQuery();
   const { toast } = useToast();
   const { touch } = useModified();

src/app/(main)/admin/users/[userId]/UserHeader.tsx

@@ -1,10 +1,9 @@
-import { useContext } from 'react';
 import { User } from '@/components/icons';
 import { PageHeader } from '@/components/common/PageHeader';
-import { UserContext } from '@/app/(main)/admin/users/[userId]/UserProvider';
+import { useUser } from '@/components/hooks';
 
 export function UserHeader() {
-  const user = useContext(UserContext);
+  const user = useUser();
 
   return <PageHeader title={user?.username} icon={<User />} />;
 }

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

@@ -8,9 +8,7 @@ import {
   useToast,
 } from '@umami/react-zen';
 import { getRandomChars } from '@/lib/crypto';
-import { useContext } from 'react';
+import { useApi, useMessages, useModified, useTeam } from '@/components/hooks';
-import { useApi, useMessages, useModified } from '@/components/hooks';
-import { TeamContext } from '@/app/(main)/teams/TeamProvider';
 
 const generateId = () => `team_${getRandomChars(16)}`;
 
@@ -23,7 +21,7 @@ export function TeamEditForm({
   allowEdit?: boolean;
   onSave?: () => void;
 }) {
-  const team = useContext(TeamContext);
+  const team = useTeam();
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { toast } = useToast();

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

@@ -1,7 +1,6 @@
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
-import { TeamContext } from '@/app/(main)/teams/TeamProvider';
+import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
-import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
 
 import { ROLES } from '@/lib/constants';
 import { Users } from '@/components/icons';
@@ -14,7 +13,7 @@ import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 
 export function TeamSettings({ teamId }: { teamId: string }) {
-  const team = useContext(TeamContext);
+  const team = useTeam();
   const { formatMessage, labels } = useMessages();
   const { user } = useLoginQuery();
   const { query, pathname } = useNavigation();

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

@@ -1,14 +1,19 @@
 import { useFormat } from '@/components//hooks/useFormat';
 import { Empty } from '@/components/common/Empty';
 import { FilterButtons } from '@/components/input/FilterButtons';
-import { useCountryNames, useLocale, useMessages, useTimezone } from '@/components/hooks';
+import {
+  useCountryNames,
+  useLocale,
+  useMessages,
+  useTimezone,
+  useWebsite,
+} from '@/components/hooks';
 import { Eye, Visitor, Bolt } from '@/components/icons';
 import { BROWSERS, OS_NAMES } from '@/lib/constants';
 import { stringToColor } from '@/lib/format';
-import { useContext, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Icon, SearchField, StatusLight, Text } from '@umami/react-zen';
 import { FixedSizeList } from 'react-window';
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
 import styles from './RealtimeLog.module.css';
 
 const TYPE_ALL = 'all';
@@ -23,7 +28,7 @@ const icons = {
 };
 
 export function RealtimeLog({ data }: { data: any }) {
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
   const [search, setSearch] = useState('');
   const { formatMessage, labels, messages } = useMessages();
   const { formatValue } = useFormat();

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

@@ -1,18 +1,16 @@
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import { Row } from '@umami/react-zen';
 import thenby from 'thenby';
 import { percentFilter } from '@/lib/filters';
 import { ListTable } from '@/components/metrics/ListTable';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useWebsite } from '@/components/hooks';
-import { RealtimeData } from '@/lib/types';
-import { WebsiteContext } from '../WebsiteProvider';
 import { FilterButtons } from '@/components/input/FilterButtons';
 
 const FILTER_REFERRERS = 'filter-referrers';
 const FILTER_PAGES = 'filter-pages';
 
-export function RealtimeUrls({ data }: { data: RealtimeData }) {
+export function RealtimeUrls({ data }: { data: any }) {
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
   const { formatMessage, labels } = useMessages();
   const { referrers, urls } = data || {};
   const [filter, setFilter] = useState(FILTER_REFERRERS);

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

@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import {
   FormSubmitButton,
   Form,
@@ -7,12 +6,11 @@ import {
   TextField,
   useToast,
 } from '@umami/react-zen';
-import { useApi, useMessages, useModified } from '@/components/hooks';
+import { useApi, useMessages, useModified, useWebsite } from '@/components/hooks';
 import { DOMAIN_REGEX } from '@/lib/constants';
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
 
 export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSave?: () => void }) {
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
   const { toast } = useToast();

src/app/(main)/websites/[websiteId]/settings/WebsiteSettings.tsx

@@ -1,14 +1,12 @@
-import { useContext } from 'react';
 import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
+import { useMessages, useWebsite } from '@/components/hooks';
-import { useMessages } from '@/components/hooks';
 import { WebsiteShareForm } from './WebsiteShareForm';
 import { WebsiteTrackingCode } from './WebsiteTrackingCode';
 import { WebsiteData } from './WebsiteData';
 import { WebsiteEditForm } from './WebsiteEditForm';
 
 export function WebsiteSettings({ websiteId }: { websiteId: string; openExternal?: boolean }) {
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
   const { formatMessage, labels } = useMessages();
 
   return (

src/app/(main)/websites/[websiteId]/settings/WebsiteSettingsHeader.tsx

@@ -1,10 +1,9 @@
-import { useContext } from 'react';
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Globe } from '@/components/icons';
+import { useWebsite } from '@/components/hooks';
 
 export function WebsiteSettingsHeader() {
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
 
   return <PageHeader title={website?.name} icon={<Globe />} />;
 }

src/app/(main)/websites/[websiteId]/settings/WebsiteTransferForm.tsx

@@ -1,4 +1,4 @@
-import { Key, useContext, useState } from 'react';
+import { Key, useState } from 'react';
 import {
   Button,
   Form,
@@ -10,8 +10,13 @@ import {
   ListItem,
   Text,
 } from '@umami/react-zen';
-import { useApi, useLoginQuery, useMessages, useUserTeamsQuery } from '@/components/hooks';
+import {
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
+  useApi,
+  useLoginQuery,
+  useMessages,
+  useUserTeamsQuery,
+  useWebsite,
+} from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
 
 export function WebsiteTransferForm({
@@ -24,7 +29,7 @@ export function WebsiteTransferForm({
   onClose?: () => void;
 }) {
   const { user } = useLoginQuery();
-  const website = useContext(WebsiteContext);
+  const website = useWebsite();
   const [teamId, setTeamId] = useState<string>(null);
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();

src/components/hooks/context/useUser.ts

@@ -0,0 +1,6 @@
+import { UserContext } from '@/app/(main)/admin/users/[userId]/UserProvider';
+import { useContext } from 'react';
+
+export function useUser() {
+  return useContext(UserContext);
+}

src/components/hooks/index.ts

@@ -4,6 +4,7 @@
 export * from './context/useLink';
 export * from './context/usePixel';
 export * from './context/useTeam';
+export * from './context/useUser';
 export * from './context/useWebsite';
 
 // Query hooks

src/components/metrics/PagesTable.tsx

@@ -1,9 +1,7 @@
-import { WebsiteContext } from '@/app/(main)/websites/WebsiteProvider';
 import { FilterButtons } from '@/components/input/FilterButtons';
 import { FilterLink } from '@/components/common/FilterLink';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
 import { emptyFilter } from '@/lib/filters';
-import { useContext } from 'react';
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
 
 export interface PagesTableProps extends MetricsTableProps {
@@ -14,7 +12,7 @@ export interface PagesTableProps extends MetricsTableProps {
 export function PagesTable({ type, allowFilter, ...props }: PagesTableProps) {
   const { router, updateParams } = useNavigation();
   const { formatMessage, labels } = useMessages();
-  const { domain } = useContext(WebsiteContext);
+  const { domain } = useWebsite();
 
   const handleChange = (id: any) => {
     router.push(updateParams({ view: id }));