Added teams pages. Refactored hooks.

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();

src/components/hooks/useLanguageNames.ts

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

src/components/hooks/useLocale.ts

@@ -3,8 +3,8 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import useForceUpdate from 'components/hooks/useForceUpdate';
-import enUS from 'public/intl/country/en-US.json';
+import { useForceUpdate } from 'components/hooks';
+import enUS from '../../../public/intl/country/en-US.json';
 
 const messages = {
   'en-US': enUS,

src/components/hooks/useTimezone.ts

@@ -7,7 +7,7 @@ export function useTimezone() {
   const [timezone, setTimezone] = useState(getItem(TIMEZONE_CONFIG) || getTimezone());
 
   const saveTimezone = useCallback(
-    value => {
+    (value: string) => {
       setItem(TIMEZONE_CONFIG, value);
       setTimezone(value);
     },

src/components/input/DateFilter.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react';
 import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
-import useLocale from 'components/hooks/useLocale';
-import useMessages from 'components/hooks/useMessages';
+import { useLocale } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { formatDate } from 'lib/date';
 

src/components/input/LanguageButton.tsx

@@ -1,7 +1,7 @@
 import { Icon, Button, PopupTrigger, Popup, Text } from 'react-basics';
 import classNames from 'classnames';
 import { languages } from 'lib/lang';
-import useLocale from 'components/hooks/useLocale';
+import { useLocale } from 'components/hooks';
 import Icons from 'components/icons';
 import styles from './LanguageButton.module.css';
 

src/components/input/LogoutButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Icons, TooltipPopup } from 'react-basics';
 import Link from 'next/link';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function LogoutButton({
   tooltipPosition = 'top',

src/components/input/ProfileButton.tsx

@@ -1,9 +1,9 @@
 import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
-import useUser from 'components/hooks/useUser';
-import useLocale from 'components/hooks/useLocale';
+import { useMessages } from 'components/hooks';
+import { useUser } from 'components/hooks';
+import { useLocale } from 'components/hooks';
 import { CURRENT_VERSION } from 'lib/constants';
 import styles from './ProfileButton.module.css';
 

src/components/input/RefreshButton.tsx

@@ -1,8 +1,8 @@
 import { LoadingButton, Icon, TooltipPopup } from 'react-basics';
 import { setWebsiteDateRange } from 'store/websites';
-import useDateRange from 'components/hooks/useDateRange';
+import { useDateRange } from 'components/hooks';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function RefreshButton({
   websiteId,

src/components/input/SettingsButton.tsx

@@ -2,7 +2,7 @@ import { Button, Icon, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
 import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
 import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './SettingsButton.module.css';
 
 export function SettingsButton() {

src/components/input/ThemeButton.tsx

@@ -1,6 +1,6 @@
 import { useTransition, animated } from '@react-spring/web';
 import { Button, Icon } from 'react-basics';
-import useTheme from 'components/hooks/useTheme';
+import { useTheme } from 'components/hooks';
 import Icons from 'components/icons';
 import styles from './ThemeButton.module.css';
 

src/components/input/WebsiteDateFilter.tsx

@@ -1,4 +1,4 @@
-import useDateRange from 'components/hooks/useDateRange';
+import { useDateRange } from 'components/hooks';
 import { isAfter } from 'date-fns';
 import { incrementDateRange } from 'lib/date';
 import { Button, Icon, Icons } from 'react-basics';

src/components/input/WebsiteSelect.tsx

@@ -1,7 +1,7 @@
 import { useState, Key } from 'react';
 import { Dropdown, Item } 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 styles from './WebsiteSelect.module.css';
 import Empty from 'components/common/Empty';
 

src/components/layout/Page.tsx

@@ -2,7 +2,7 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading } from 'react-basics';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './Page.module.css';
 
 export function Page({

src/components/messages.ts

@@ -198,6 +198,7 @@ export const labels = defineMessages({
     id: 'label.number-of-records',
     defaultMessage: '{x} {x, plural, one {record} other {records}}',
   },
+  select: { id: 'label.select', defaultMessage: 'Select' },
 });
 
 export const messages = defineMessages({

src/components/metrics/ActiveUsers.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { StatusLight } 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 styles from './ActiveUsers.module.css';
 
 export function ActiveUsers({

src/components/metrics/BarChart.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import Chart from 'chart.js/auto';
 import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
-import useLocale from 'components/hooks/useLocale';
-import useTheme from 'components/hooks/useTheme';
+import { useLocale } from 'components/hooks';
+import { useTheme } from 'components/hooks';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import { renderNumberLabels } from 'lib/charts';
 import styles from './BarChart.module.css';

src/components/metrics/BrowsersTable.tsx

@@ -1,7 +1,7 @@
 import FilterLink from 'components/common/FilterLink';
 import MetricsTable, { MetricsTableProps } from 'components/metrics/MetricsTable';
-import useMessages from 'components/hooks/useMessages';
-import useFormat from 'components/hooks/useFormat';
+import { useMessages } from 'components/hooks';
+import { useFormat } from 'components/hooks';
 
 export function BrowsersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/CitiesTable.tsx

@@ -1,9 +1,9 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { emptyFilter } from 'lib/filters';
 import FilterLink from 'components/common/FilterLink';
-import useLocale from 'components/hooks/useLocale';
-import useMessages from 'components/hooks/useMessages';
-import useCountryNames from 'components/hooks/useCountryNames';
+import { useLocale } from 'components/hooks';
+import { useMessages } from 'components/hooks';
+import { useCountryNames } from 'components/hooks';
 
 export function CitiesTable(props: MetricsTableProps) {
   const { locale } = useLocale();

src/components/metrics/CountriesTable.tsx

@@ -1,5 +1,5 @@
 import FilterLink from 'components/common/FilterLink';
-import useCountryNames from 'components/hooks/useCountryNames';
+import { useCountryNames } from 'components/hooks';
 import { useLocale, useMessages, useFormat } from 'components/hooks';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 

src/components/metrics/DatePickerForm.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
 import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
-import useLocale from 'components/hooks/useLocale';
+import { useLocale } from 'components/hooks';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './DatePickerForm.module.css';
 
 export function DatePickerForm({

src/components/metrics/DevicesTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import { useFormat } from 'components/hooks';
 
 export function DevicesTable(props: MetricsTableProps) {

src/components/metrics/EventsTable.tsx

@@ -1,5 +1,5 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function EventsTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/FilterTags.tsx

@@ -1,8 +1,8 @@
 import { safeDecodeURI } from 'next-basics';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import useNavigation from 'components/hooks/useNavigation';
-import useMessages from 'components/hooks/useMessages';
-import useFormat from 'components/hooks/useFormat';
+import { useNavigation } from 'components/hooks';
+import { useMessages } from 'components/hooks';
+import { useFormat } from 'components/hooks';
 import styles from './FilterTags.module.css';
 
 export function FilterTags({ params }) {

src/components/metrics/LanguagesTable.tsx

@@ -1,8 +1,8 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import { percentFilter } from 'lib/filters';
-import useLanguageNames from 'components/hooks/useLanguageNames';
-import useLocale from 'components/hooks/useLocale';
-import useMessages from 'components/hooks/useMessages';
+import { useLanguageNames } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 
 export function LanguagesTable({
   onDataLoad,

src/components/metrics/Legend.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { StatusLight } from 'react-basics';
 import { colord } from 'colord';
 import classNames from 'classnames';
-import useLocale from 'components/hooks/useLocale';
-import useForceUpdate from 'components/hooks/useForceUpdate';
+import { useLocale } from 'components/hooks';
+import { useForceUpdate } from 'components/hooks';
 import styles from './Legend.module.css';
 
 export function Legend({ chart }) {

src/components/metrics/ListTable.tsx

@@ -3,7 +3,7 @@ import { useSpring, animated, config } from '@react-spring/web';
 import classNames from 'classnames';
 import Empty from 'components/common/Empty';
 import { formatLongNumber } from 'lib/format';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './ListTable.module.css';
 import { ReactNode } from 'react';
 

src/components/metrics/MetricsTable.tsx

@@ -1,17 +1,17 @@
 import { ReactNode, useMemo, useState } from 'react';
 import { Loading, Icon, Text, SearchField } from 'react-basics';
 import classNames from 'classnames';
-import useApi from 'components/hooks/useApi';
+import { useApi } from 'components/hooks';
 import { percentFilter } from 'lib/filters';
-import useDateRange from 'components/hooks/useDateRange';
-import useNavigation from 'components/hooks/useNavigation';
+import { useDateRange } from 'components/hooks';
+import { useNavigation } from 'components/hooks';
 import ErrorMessage from 'components/common/ErrorMessage';
 import LinkButton from 'components/common/LinkButton';
 import ListTable, { ListTableProps } from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Icons from 'components/icons';
-import useMessages from 'components/hooks/useMessages';
-import useLocale from 'components/hooks/useLocale';
+import { useMessages } from 'components/hooks';
+import { useLocale } from 'components/hooks';
 import useFormat from 'components//hooks/useFormat';
 import styles from './MetricsTable.module.css';
 

src/components/metrics/OSTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 const names = {
   'Mac OS': 'macOS',

src/components/metrics/PagesTable.tsx

@@ -1,8 +1,8 @@
 import FilterLink from 'components/common/FilterLink';
 import FilterButtons from 'components/common/FilterButtons';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import useMessages from 'components/hooks/useMessages';
-import useNavigation from 'components/hooks/useNavigation';
+import { useMessages } from 'components/hooks';
+import { useNavigation } from 'components/hooks';
 import { emptyFilter } from 'lib/filters';
 
 export interface PagesTableProps extends MetricsTableProps {

src/components/metrics/QueryParametersTable.tsx

@@ -4,7 +4,7 @@ import FilterButtons from 'components/common/FilterButtons';
 import { emptyFilter, paramFilter } from 'lib/filters';
 import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 import styles from './QueryParametersTable.module.css';
 
 const filters = {

src/components/metrics/ReferrersTable.tsx

@@ -1,6 +1,6 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function ReferrersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/RegionsTable.tsx

@@ -1,8 +1,8 @@
 import FilterLink from 'components/common/FilterLink';
 import { emptyFilter } from 'lib/filters';
-import useLocale from 'components/hooks/useLocale';
-import useMessages from 'components/hooks/useMessages';
-import useCountryNames from 'components/hooks/useCountryNames';
+import { useLocale } from 'components/hooks';
+import { useMessages } from 'components/hooks';
+import { useCountryNames } from 'components/hooks';
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
 import regions from '../../../public/iso-3166-2.json';
 

src/components/metrics/ScreenTable.tsx

@@ -1,5 +1,5 @@
 import MetricsTable, { MetricsTableProps } from './MetricsTable';
-import useMessages from 'components/hooks/useMessages';
+import { useMessages } from 'components/hooks';
 
 export function ScreenTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();

src/components/metrics/WorldMap.tsx

@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import useTheme from 'components/hooks/useTheme';
-import useCountryNames from 'components/hooks/useCountryNames';
-import useLocale from 'components/hooks/useLocale';
-import useMessages from 'components/hooks/useMessages';
+import { useTheme } from 'components/hooks';
+import { useCountryNames } from 'components/hooks';
+import { useLocale } from 'components/hooks';
+import { useMessages } from 'components/hooks';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';