Typescript conversion.

src/components/hooks/useCountryNames.ts

@@ -6,10 +6,10 @@ const countryNames = {
   'en-US': enUS,
 };
 
-export function useCountryNames(locale) {
+export function useCountryNames(locale: string) {
   const [list, setList] = useState(countryNames[locale] || enUS);
 
-  async function loadData(locale) {
+  async function loadData(locale: string) {
     const { data } = await httpGet(`${process.env.basePath}/intl/country/${locale}.json`);
 
     if (data) {

src/components/hooks/useDateRange.ts

@@ -6,7 +6,7 @@ import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import useApi from './useApi';
 
-export function useDateRange(websiteId) {
+export function useDateRange(websiteId: string) {
   const { get } = useApi();
   const { locale } = useLocale();
   const websiteConfig = websiteStore(state => state[websiteId]?.dateRange);
@@ -20,7 +20,7 @@ export function useDateRange(websiteId) {
 
       if (typeof value === 'string') {
         if (value === 'all') {
-          const result = await get(`/websites/${websiteId}/daterange`);
+          const result: any = await get(`/websites/${websiteId}/daterange`);
           const { mindate, maxdate } = result;
 
           const startDate = new Date(mindate);

src/components/hooks/useDocumentClick.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-export function useDocumentClick(handler) {
+export function useDocumentClick(handler: (event: MouseEvent) => any) {
   useEffect(() => {
     document.addEventListener('click', handler);
 

src/components/hooks/useEscapeKey.js

@@ -1,21 +0,0 @@
-import { useEffect, useCallback } from 'react';
-
-export function useEscapeKey(handler) {
-  const escFunction = useCallback(event => {
-    if (event.keyCode === 27) {
-      handler(event);
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('keydown', escFunction, false);
-
-    return () => {
-      document.removeEventListener('keydown', escFunction, false);
-    };
-  }, [escFunction]);
-
-  return null;
-}
-
-export default useEscapeKey;

src/components/hooks/useEscapeKey.ts

@@ -0,0 +1,21 @@
+import { useEffect, useCallback, KeyboardEvent } from 'react';
+
+export function useEscapeKey(handler: (event: KeyboardEvent) => void) {
+  const escFunction = useCallback((event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      handler(event);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction as any, false);
+
+    return () => {
+      document.removeEventListener('keydown', escFunction as any, false);
+    };
+  }, [escFunction]);
+
+  return null;
+}
+
+export default useEscapeKey;

src/components/hooks/useFormat.ts

@@ -9,23 +9,23 @@ export function useFormat() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
-  const formatBrowser = value => {
+  const formatBrowser = (value: string) => {
     return BROWSERS[value] || value;
   };
 
-  const formatCountry = value => {
+  const formatCountry = (value: string) => {
     return countryNames[value] || value;
   };
 
-  const formatRegion = value => {
+  const formatRegion = (value: string) => {
     return regions[value] ? regions[value] : value;
   };
 
-  const formatDevice = value => {
+  const formatDevice = (value: string) => {
     return formatMessage(labels[value] || labels.unknown);
   };
 
-  const formatValue = (value, type) => {
+  const formatValue = (value: string, type: string) => {
     switch (type) {
       case 'browser':
         return formatBrowser(value);

src/components/hooks/useMessages.ts

@@ -4,13 +4,13 @@ import { messages, labels } from 'components/messages';
 export function useMessages() {
   const intl = useIntl();
 
-  const getMessage = id => {
+  const getMessage = (id: string) => {
     const message = Object.values(messages).find(value => value.id === id);
 
     return message ? formatMessage(message) : id;
   };
 
-  const formatMessage = (descriptor, values, opts) => {
+  const formatMessage = (descriptor: any, values?: any, opts?: any) => {
     return descriptor ? intl.formatMessage(descriptor, values, opts) : null;
   };
 

src/components/hooks/useReport.ts

@@ -18,7 +18,7 @@ export function useReport(reportId, defaultParameters) {
   };
 
   const loadReport = async id => {
-    const data = await get(`/reports/${id}`);
+    const data: any = await get(`/reports/${id}`);
 
     const { dateRange } = data?.parameters || {};
     const { startDate, endDate } = dateRange || {};
@@ -40,7 +40,7 @@ export function useReport(reportId, defaultParameters) {
       const data = await post(`/reports/${type}`, { ...parameters, timezone });
 
       setReport(
-        produce(state => {
+        produce((state: any) => {
           state.parameters = parameters;
           state.data = data;
 
@@ -56,7 +56,7 @@ export function useReport(reportId, defaultParameters) {
   const updateReport = useCallback(
     async data => {
       setReport(
-        produce(state => {
+        produce((state: any) => {
           const { parameters, ...rest } = data;
 
           if (parameters) {

src/components/hooks/useShareToken.ts

@@ -1,9 +1,9 @@
 import useStore, { setShareToken } from 'store/app';
 import useApi from './useApi';
 
-const selector = state => state.shareToken;
+const selector = (state: { shareToken: string }) => state.shareToken;
 
-export function useShareToken(shareId) {
+export function useShareToken(shareId: string) {
   const shareToken = useStore(selector);
   const { get, useQuery } = useApi();
   const { isLoading, error } = useQuery(['share', shareId], async () => {

src/components/hooks/useSticky.ts

@@ -5,8 +5,9 @@ export function useSticky({ enabled = true, threshold = 1 }) {
   const ref = useRef(null);
 
   useEffect(() => {
-    let observer;
-    const handler = ([entry]) => setIsSticky(entry.intersectionRatio < threshold);
+    let observer: IntersectionObserver | undefined;
+    const handler: IntersectionObserverCallback = ([entry]) =>
+      setIsSticky(entry.intersectionRatio < threshold);
 
     if (enabled && ref.current) {
       observer = new IntersectionObserver(handler, { threshold: [threshold] });

src/components/hooks/useTheme.ts

@@ -4,7 +4,7 @@ import { getItem, setItem } from 'next-basics';
 import { THEME_COLORS, THEME_CONFIG } from 'lib/constants';
 import { colord } from 'colord';
 
-const selector = state => state.theme;
+const selector = (state: { theme: string }) => state.theme;
 
 export function useTheme() {
   const defaultTheme =

src/components/hooks/useWebsite.ts

@@ -1,6 +1,6 @@
 import useApi from './useApi';
 
-export function useWebsite(websiteId) {
+export function useWebsite(websiteId: string) {
   const { get, useQuery } = useApi();
   return useQuery(['websites', websiteId], () => get(`/websites/${websiteId}`), {
     enabled: !!websiteId,