Refactored useQuery functions.

src/components/common/DataTable.tsx

@@ -1,29 +1,16 @@
-import { ReactNode, Dispatch, SetStateAction } from 'react';
+import { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Banner, Loading, SearchField } from 'react-basics';
 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';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataTableProps {
-  queryResult: {
-    result: {
-      page: number;
-      pageSize: number;
-      count: number;
-      data: any[];
-    };
-    params: {
-      query: string;
-      page: number;
-    };
-    setParams: Dispatch<SetStateAction<{ query: string; page: number }>>;
-    isLoading: boolean;
-    error: unknown;
-  };
+  queryResult: FilterQueryResult<any>;
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;
@@ -38,7 +25,12 @@ export function DataTable({
   children,
 }: DataTableProps) {
   const { formatMessage, labels, messages } = useMessages();
-  const { result, error, isLoading, params, setParams } = queryResult || {};
+  const {
+    result,
+    params,
+    setParams,
+    query: { error, isLoading },
+  } = queryResult || {};
   const { page, pageSize, count, data } = result || {};
   const { query } = params || {};
   const hasData = Boolean(!isLoading && data?.length);

src/components/common/FilterLink.tsx

@@ -13,7 +13,7 @@ export interface FilterLinkProps {
   label?: string;
   externalUrl?: string;
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export function FilterLink({

src/components/hooks/useFilterQuery.ts

@@ -1,24 +1,25 @@
-import { useState } from 'react';
+import { useState, Dispatch, SetStateAction } from 'react';
 import { useApi } from 'components/hooks/useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
+import { SearchFilter, FilterResult } from 'lib/types';
 
-export function useFilterQuery(key: any[], fn, options?: UseQueryOptions) {
-  const [params, setParams] = useState({
+export interface FilterQueryResult<T> {
+  result: FilterResult<any[]>;
+  query: any;
+  params: SearchFilter;
+  setParams: Dispatch<SetStateAction<T | SearchFilter>>;
+}
+
+export function useFilterQuery<T>(props = {}): FilterQueryResult<T> {
+  const [params, setParams] = useState<T | SearchFilter>({
     query: '',
     page: 1,
   });
   const { useQuery } = useApi();
-
-  const { data, ...other } = useQuery([...key, params], fn.bind(null, params), options);
+  const { data, ...query } = useQuery<FilterResult<any[]>>({ ...props });
 
   return {
-    result: data as {
-      page: number;
-      pageSize: number;
-      count: number;
-      data: any[];
-    },
-    ...other,
+    result: data,
+    query,
     params,
     setParams,
   };

src/components/hooks/useReports.ts

@@ -8,10 +8,10 @@ export function useReports() {
   const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
   const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
     useApiFilter();
-  const { data, error, isLoading } = useQuery(
-    ['reports', { modified, filter, page, pageSize }],
-    () => get(`/reports`, { filter, page, pageSize }),
-  );
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['reports', { modified, filter, page, pageSize }],
+    queryFn: () => get(`/reports`, { filter, page, pageSize }),
+  });
 
   const deleteReport = id => {
     mutate(id, {

src/components/hooks/useShareToken.ts

@@ -6,12 +6,15 @@ const selector = (state: { shareToken: string }) => state.shareToken;
 export function useShareToken(shareId: string) {
   const shareToken = useStore(selector);
   const { get, useQuery } = useApi();
-  const { isLoading, error } = useQuery(['share', shareId], async () => {
-    const data = await get(`/share/${shareId}`);
+  const { isLoading, error } = useQuery({
+    queryKey: ['share', shareId],
+    queryFn: async () => {
+      const data = await get(`/share/${shareId}`);
 
-    setShareToken(data);
+      setShareToken(data);
 
-    return data;
+      return data;
+    },
   });
 
   return { shareToken, isLoading, error };

src/components/hooks/useWebsite.ts

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

src/components/input/WebsiteSelect.js

@@ -6,7 +6,10 @@ import styles from './WebsiteSelect.module.css';
 export function WebsiteSelect({ websiteId, onSelect }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
-  const { data } = useQuery(['websites:me'], () => get('/me/websites', { pageSize: 100 }));
+  const { data } = useQuery({
+    queryKey: ['websites:me'],
+    queryFn: () => get('/me/websites', { pageSize: 100 }),
+  });
 
   const renderValue = value => {
     return data?.data?.find(({ id }) => id === value)?.name;

src/components/metrics/ActiveUsers.js

@@ -7,14 +7,12 @@ import styles from './ActiveUsers.module.css';
 export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
-  const { data } = useQuery(
-    ['websites:active', websiteId],
-    () => get(`/websites/${websiteId}/active`),
-    {
-      refetchInterval,
-      enabled: !!websiteId,
-    },
-  );
+  const { data } = useQuery({
+    queryKey: ['websites:active', websiteId],
+    queryFn: () => get(`/websites/${websiteId}/active`),
+    refetchInterval,
+    enabled: !!websiteId,
+  });
 
   const count = useMemo(() => {
     if (websiteId) {

src/components/metrics/EventsChart.js

@@ -16,17 +16,20 @@ export function EventsChart({ websiteId, className, token }) {
     query: { url, event },
   } = useNavigation();
 
-  const { data, isLoading } = useQuery(['events', websiteId, modified, event], () =>
-    get(`/websites/${websiteId}/events`, {
-      startAt: +startDate,
-      endAt: +endDate,
-      unit,
-      timezone,
-      url,
-      event,
-      token,
-    }),
-  );
+  const { data, isLoading } = useQuery({
+    queryKey: ['events', websiteId, modified, event],
+    queryFn: () =>
+      get(`/websites/${websiteId}/events`, {
+        startAt: +startDate,
+        endAt: +endDate,
+        unit,
+        timezone,
+        url,
+        event,
+        token,
+      }),
+    enabled: !!websiteId,
+  });
 
   const datasets = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricsTable.js

@@ -35,8 +35,8 @@ export function MetricsTable({
   const { get, useQuery } = useApi();
   const { dir } = useLocale();
 
-  const { data, isLoading, isFetched, error } = useQuery(
-    [
+  const { data, isLoading, isFetched, error } = useQuery({
+    queryKey: [
       'websites:metrics',
       {
         websiteId,
@@ -53,11 +53,13 @@ export function MetricsTable({
         city,
       },
     ],
-    () => {
+    queryFn: () => {
       const filters = { url, title, referrer, os, browser, device, country, region, city };
 
       filters[type] = undefined;
 
+      onDataLoad?.();
+
       return get(`/websites/${websiteId}/metrics`, {
         type,
         startAt: +startDate,
@@ -65,8 +67,8 @@ export function MetricsTable({
         ...filters,
       });
     },
-    { onSuccess: onDataLoad, retryDelay: delay || DEFAULT_ANIMATION_DURATION },
-  );
+    retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+  });
 
   const filteredData = useMemo(() => {
     if (data) {