Renamed query hooks. Fixed conversion bugs.

src/components/hooks/index.ts

@@ -1,32 +1,32 @@
-export * from './queries/useConfig';
-export * from './queries/useEventDataEvents';
-export * from './queries/useEventDataProperties';
-export * from './queries/useEventDataValues';
-export * from './queries/useLogin';
-export * from './queries/useRealtime';
-export * from './queries/useReport';
-export * from './queries/useReports';
-export * from './queries/useSessionActivity';
-export * from './queries/useSessionData';
-export * from './queries/useSessionDataProperties';
-export * from './queries/useSessionDataValues';
-export * from './queries/useWebsiteSession';
-export * from './queries/useWebsiteSessions';
-export * from './queries/useWebsiteSessionsWeekly';
-export * from './queries/useShareToken';
-export * from './queries/useTeam';
-export * from './queries/useTeams';
-export * from './queries/useTeamWebsites';
-export * from './queries/useTeamMembers';
-export * from './queries/useUser';
-export * from './queries/useUsers';
-export * from './queries/useWebsite';
+export * from './queries/useEventDataEventsQuery';
+export * from './queries/useEventDataPropertiesQuery';
+export * from './queries/useEventDataValuesQuery';
+export * from './queries/useLoginQuery';
+export * from './queries/useRealtimeQuery';
+export * from './queries/useReportQuery';
+export * from './queries/useReportsQuery';
+export * from './queries/useSessionActivityQuery';
+export * from './queries/useSessionDataQuery';
+export * from './queries/useSessionDataPropertiesQuery';
+export * from './queries/useSessionDataValuesQuery';
+export * from './queries/useWebsiteSessionQuery';
+export * from './queries/useWebsiteSessionsQuery';
+export * from './queries/useWebsiteSessionsWeeklyQuery';
+export * from './queries/useShareTokenQuery';
+export * from './queries/useTeamQuery';
+export * from './queries/useTeamsQuery';
+export * from './queries/useTeamWebsitesQuery';
+export * from './queries/useTeamMembersQuery';
+export * from './queries/useUserQuery';
+export * from './queries/useUsersQuery';
+export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
-export * from './queries/useWebsiteEvents';
-export * from './queries/useWebsiteEventsSeries';
-export * from './queries/useWebsiteMetrics';
-export * from './queries/useWebsiteValues';
+export * from './queries/useWebsiteEventsQuery';
+export * from './queries/useWebsiteEventsSeriesQuery';
+export * from './queries/useWebsiteMetricsQuery';
+export * from './queries/useWebsiteValuesQuery';
 export * from './useApi';
+export * from './useConfig';
 export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
@@ -39,10 +39,9 @@ export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
 export * from './useModified';
-export * from './useNavigation';
 export * from './usePagedQuery';
 export * from './useRegionNames';
 export * from './useSticky';
-export * from './useTeamUrl';
+export * from './useNavigation';
 export * from './useTheme';
 export * from './useTimezone';

src/components/hooks/queries/useEventDataEventsQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataEvents(
+export function useEventDataEventsQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {

src/components/hooks/queries/useEventDataPropertiesQuery.ts

@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataProperties(
+export function useEventDataPropertiesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {

src/components/hooks/queries/useEventDataValuesQuery.ts

@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useEventDataValues(
+export function useEventDataValuesQuery(
   websiteId: string,
   eventName: string,
   propertyName: string,

src/components/hooks/queries/useLoginQuery.ts

@@ -4,7 +4,7 @@ import { useApi } from '../useApi';
 
 const selector = (state: { user: any }) => state.user;
 
-export function useLogin(): {
+export function useLoginQuery(): {
   user: any;
   setUser: (data: any) => void;
 } & UseQueryResult {

src/components/hooks/queries/useRealtimeQuery.ts

@@ -3,7 +3,7 @@ import { REALTIME_INTERVAL } from '@/lib/constants';
 import { RealtimeData } from '@/lib/types';
 import { useApi } from '../useApi';
 
-export function useRealtime(websiteId: string) {
+export function useRealtimeQuery(websiteId: string) {
   const { get, useQuery } = useApi();
   const { timezone } = useTimezone();
   const { data, isLoading, error } = useQuery<RealtimeData>({

src/components/hooks/queries/useReportQuery.ts

@@ -5,7 +5,7 @@ import { useTimezone } from '../useTimezone';
 import { useMessages } from '../useMessages';
 import { parseDateRange } from '@/lib/date';
 
-export function useReport(
+export function useReportQuery(
   reportId: string,
   defaultParameters?: { type: string; parameters: { [key: string]: any } },
 ) {

src/components/hooks/queries/useReportsQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
+export function useReportsQuery({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
   const { get, del, useMutation } = useApi();
   const queryResult = usePagedQuery({

src/components/hooks/queries/useRevenueValuesQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useRevenueValues(websiteId: string, startDate: Date, endDate: Date) {
+export function useRevenueValuesQuery(websiteId: string, startDate: Date, endDate: Date) {
   const { get, useQuery } = useApi();
 
   return useQuery({

src/components/hooks/queries/useSessionActivityQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useSessionActivity(
+export function useSessionActivityQuery(
   websiteId: string,
   sessionId: string,
   startDate: Date,

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useSessionDataProperties(
+export function useSessionDataPropertiesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {

src/components/hooks/queries/useSessionDataQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useSessionData(websiteId: string, sessionId: string) {
+export function useSessionDataQuery(websiteId: string, sessionId: string) {
   const { get, useQuery } = useApi();
 
   return useQuery({

src/components/hooks/queries/useSessionDataValuesQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useSessionDataValues(
+export function useSessionDataValuesQuery(
   websiteId: string,
   propertyName: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,

src/components/hooks/queries/useShareTokenQuery.ts

@@ -3,7 +3,7 @@ import { useApi } from '../useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;
 
-export function useShareToken(shareId: string): {
+export function useShareTokenQuery(shareId: string): {
   shareToken: any;
   isLoading?: boolean;
   error?: Error;

src/components/hooks/queries/useTeamMembersQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeamMembers(teamId: string) {
+export function useTeamMembersQuery(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams:members`);
 

src/components/hooks/queries/useTeamQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useTeam(teamId: string) {
+export function useTeamQuery(teamId: string) {
   const { get, useQuery } = useApi();
   return useQuery({
     queryKey: ['teams', teamId],

src/components/hooks/queries/useTeamWebsitesQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeamWebsites(teamId: string) {
+export function useTeamWebsitesQuery(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`websites`);
 

src/components/hooks/queries/useTeamsQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useTeams(userId: string) {
+export function useTeamsQuery(userId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams`);
 

src/components/hooks/queries/useUserQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useUser(userId: string, options?: { [key: string]: any }) {
+export function useUserQuery(userId: string, options?: { [key: string]: any }) {
   const { get, useQuery } = useApi();
   return useQuery({
     queryKey: ['users', userId],

src/components/hooks/queries/useUsersQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 
-export function useUsers() {
+export function useUsersQuery() {
   const { get } = useApi();
   const { modified } = useModified(`users`);
 

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -3,7 +3,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 import { usePagedQuery } from '../usePagedQuery';
 
-export function useWebsiteEvents(
+export function useWebsiteEventsQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {

src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteEventsSeries(
+export function useWebsiteEventsSeriesQuery(
   websiteId: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
 ) {

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -3,7 +3,7 @@ import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 import { useSearchParams } from 'next/navigation';
 
-export function useWebsiteMetrics(
+export function useWebsiteMetricsQuery(
   websiteId: string,
   queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,

src/components/hooks/queries/useWebsitePageviewsQuery.ts

@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsitePageviews(
+export function useWebsitePageviewsQuery(
   websiteId: string,
   compare?: string,
   options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,

src/components/hooks/queries/useWebsiteQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useWebsite(websiteId: string, options?: { [key: string]: any }) {
+export function useWebsiteQuery(websiteId: string, options?: { [key: string]: any }) {
   const { get, useQuery } = useApi();
 
   return useQuery({

src/components/hooks/queries/useWebsiteSessionQuery.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 
-export function useWebsiteSession(websiteId: string, sessionId: string) {
+export function useWebsiteSessionQuery(websiteId: string, sessionId: string) {
   const { get, useQuery } = useApi();
 
   return useQuery({

src/components/hooks/queries/useWebsiteSessionStatsQuery.ts

@@ -1,7 +1,10 @@
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteSessionStats(websiteId: string, options?: { [key: string]: string }) {
+export function useWebsiteSessionStatsQuery(
+  websiteId: string,
+  options?: { [key: string]: string },
+) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteSessionsQuery.ts

@@ -3,7 +3,10 @@ import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
-export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
+export function useWebsiteSessionsQuery(
+  websiteId: string,
+  params?: { [key: string]: string | number },
+) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
   const filters = useFilterParams(websiteId);

src/components/hooks/queries/useWebsiteSessionsWeeklyQuery.ts

@@ -2,7 +2,7 @@ import { useApi } from '../useApi';
 import { useModified } from '../useModified';
 import { useFilterParams } from '@/components/hooks/useFilterParams';
 
-export function useWebsiteSessionsWeekly(
+export function useWebsiteSessionsWeeklyQuery(
   websiteId: string,
   params?: { [key: string]: string | number },
 ) {

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,7 +1,7 @@
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
-export function useWebsiteStats(
+export function useWebsiteStatsQuery(
   websiteId: string,
   compare?: string,
   options?: { [key: string]: string },

src/components/hooks/queries/useWebsiteValuesQuery.ts

@@ -3,7 +3,7 @@ import { useCountryNames } from '@/components/hooks/useCountryNames';
 import { useRegionNames } from '@/components/hooks/useRegionNames';
 import { useLocale } from '../useLocale';
 
-export function useWebsiteValues({
+export function useWebsiteValuesQuery({
   websiteId,
   type,
   startDate,

src/components/hooks/queries/useWebsites.ts

@@ -1,6 +1,6 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
-import { useLogin } from './useLogin';
+import { useLoginQuery } from './useLoginQuery';
 import { useModified } from '../useModified';
 
 export function useWebsites(
@@ -8,7 +8,7 @@ export function useWebsites(
   params?: { [key: string]: string | number },
 ) {
   const { get } = useApi();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { modified } = useModified(`websites`);
 
   return usePagedQuery({

src/components/hooks/useGlobalState.ts

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 const store = create(() => ({}));
 
 const useGlobalState = (key: string, value?: any) => {
-  if (value !== undefined && !store.getState()[key]) {
+  if (value !== undefined && store.getState()[key] === undefined) {
     store.setState({ [key]: value });
   }
 

src/components/hooks/useNavigation.ts

@@ -2,15 +2,11 @@ import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from '@/lib/url';
 
-export function useNavigation(): {
-  pathname: string;
-  query: { [key: string]: string };
-  router: any;
-  renderUrl: (params: any, reset?: boolean) => string;
-} {
+export function useNavigation() {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();
+  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
 
   const query = useMemo(() => {
     const obj = {};
@@ -26,5 +22,9 @@ export function useNavigation(): {
     return reset ? pathname : buildUrl(pathname, { ...query, ...params });
   }
 
-  return { pathname, query, router, renderUrl };
+  function renderTeamUrl(url: string) {
+    return teamId ? `/teams/${teamId}${url}` : url;
+  }
+
+  return { pathname, query, router, renderUrl, renderTeamUrl, teamId };
 }

src/components/hooks/useTeamUrl.ts

@@ -1,12 +0,0 @@
-import { usePathname } from 'next/navigation';
-
-export function useTeamUrl() {
-  const pathname = usePathname();
-  const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
-
-  function renderTeamUrl(url: string) {
-    return teamId ? `/teams/${teamId}${url}` : url;
-  }
-
-  return { teamId, renderTeamUrl, pathname };
-}

src/components/input/ProfileButton.tsx

@@ -12,11 +12,11 @@ import {
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
 import { User, LogOut, CircleUserRound } from 'lucide-react';
-import { useMessages, useLogin } from '@/components/hooks';
+import { useMessages, useLoginQuery } from '@/components/hooks';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const router = useRouter();
   const cloudMode = !!process.env.cloudMode;
 

src/components/input/RefreshButton.tsx

@@ -1,4 +1,4 @@
-import { LoadingButton, Icon, TooltipPopup } from '@umami/react-zen';
+import { LoadingButton, Icon, Tooltip, TooltipTrigger } from '@umami/react-zen';
 import { setWebsiteDateRange } from '@/store/websites';
 import { useDateRange } from '@/components/hooks';
 import { Icons } from '@/components/icons';
@@ -21,12 +21,13 @@ export function RefreshButton({
   }
 
   return (
-    <TooltipPopup label={formatMessage(labels.refresh)}>
-      <LoadingButton isLoading={isLoading} onClick={handleClick}>
+    <TooltipTrigger>
+      <LoadingButton isLoading={isLoading} onPress={handleClick}>
         <Icon>
           <Icons.Refresh />
         </Icon>
       </LoadingButton>
-    </TooltipPopup>
+      <Tooltip>{formatMessage(labels.refresh)}</Tooltip>
+    </TooltipTrigger>
   );
 }

src/components/input/TeamsButton.tsx

@@ -15,7 +15,7 @@ import {
   Icons,
 } from '@umami/react-zen';
 import { User, Users } from 'lucide-react';
-import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
+import { useLoginQuery, useMessages, useTeamsQuery, useNavigation } from '@/components/hooks';
 
 export function TeamsButton({
   className,
@@ -24,10 +24,10 @@ export function TeamsButton({
   className?: string;
   showText?: boolean;
 }) {
-  const { user } = useLogin();
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
-  const { result } = useTeams(user.id);
-  const { teamId } = useTeamUrl();
+  const { result } = useTeamsQuery(user.id);
+  const { teamId } = useNavigation();
   const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
   const [selectedKeys, setSelectedKeys] = useState<any>(new Set([teamId || user.id]));

src/components/metrics/EventsChart.tsx

@@ -1,6 +1,6 @@
 import { colord } from 'colord';
 import { BarChart } from '@/components/charts/BarChart';
-import { useDateRange, useLocale, useWebsiteEventsSeries } from '@/components/hooks';
+import { useDateRange, useLocale, useWebsiteEventsSeriesQuery } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
 import { CHART_COLORS } from '@/lib/constants';
 import { useMemo } from 'react';
@@ -15,7 +15,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     dateRange: { startDate, endDate, unit, value },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEventsSeries(websiteId);
+  const { data, isLoading } = useWebsiteEventsSeriesQuery(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricsBar.tsx

@@ -22,7 +22,7 @@ export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBar
         !error &&
         isFetched &&
         cloneChildren(children, child => {
-          return { format: child.props['format'] || formatFunc };
+          return { format: child?.props['format'] || formatFunc };
         })}
     </Row>
   );

src/components/metrics/MetricsTable.tsx

@@ -1,14 +1,14 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField } from '@umami/react-zen';
-import classNames from 'classnames';
+import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { useNavigation, useWebsiteMetrics, useMessages, useFormat } from '@/components/hooks';
+import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
 import styles from './MetricsTable.module.css';
+import { Panel } from '@/components/layout/Panel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -46,7 +46,7 @@ export function MetricsTable({
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetrics(
+  const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
     websiteId,
     { type, limit, search: searchFormattedValues ? undefined : search, ...params },
     {
@@ -85,15 +85,7 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <div
-      className={classNames(styles.container, className)}
-      style={{
-        background: 'var(--background-color)',
-        border: '1px solid var(--border-color)',
-        borderRadius: 'var(--border-radius)',
-        padding: '16px',
-      }}
-    >
+    <Panel>
       {error && <ErrorMessage />}
       <div className={styles.actions}>
         {allowSearch && (
@@ -111,7 +103,7 @@ export function MetricsTable({
         <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
       )}
       {!data && isLoading && !isFetched && <Loading icon="dots" />}
-      <div className={styles.footer}>
+      <Row justifyContent="center">
         {showMore && data && !error && limit && (
           <LinkButton href={renderUrl({ view: type })} variant="quiet">
             <Text>{formatMessage(labels.more)}</Text>
@@ -120,7 +112,7 @@ export function MetricsTable({
             </Icon>
           </LinkButton>
         )}
-      </div>
-    </div>
+      </Row>
+    </Panel>
   );
 }

src/components/metrics/WorldMap.tsx

@@ -3,7 +3,7 @@ import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simp
 import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
-import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
+import { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
 import { useCountryNames } from '@/components/hooks';
 import { useLocale } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
@@ -32,7 +32,7 @@ export function WorldMap({
   const {
     dateRange: { startDate, endDate },
   } = useDateRange(websiteId);
-  const { data: mapData } = useWebsiteMetrics(websiteId, {
+  const { data: mapData } = useWebsiteMetricsQuery(websiteId, {
     type: 'country',
     startAt: +startDate,
     endAt: +endDate,