Moved filter params into a hook. Close #2691.

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,36 +1,12 @@
-import { useDateRange, useNavigation, useTimezone } from 'components/hooks';
-import { zonedTimeToUtc } from 'date-fns-tz';
 import useApi from './useApi';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteEvents(websiteId: string, options?: { [key: string]: string }) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
+  const params = useFilterParams(websiteId);
-  const { startDate, endDate, unit, offset } = dateRange;
-  const { timezone } = useTimezone();
-  const {
-    query: { url, referrer, os, browser, device, country, region, city, title, event },
-  } = useNavigation();
-
-  const params = {
-    startAt: +zonedTimeToUtc(startDate, timezone),
-    endAt: +zonedTimeToUtc(endDate, timezone),
-    unit,
-    offset,
-    url,
-    referrer,
-    os,
-    browser,
-    device,
-    country,
-    region,
-    city,
-    title,
-    timezone,
-    event,
-  };
 
   return useQuery({
-    queryKey: ['events', { websiteId, ...params }],
+    queryKey: ['websites:events', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/events`, params),
     enabled: !!websiteId,
     ...options,

src/components/hooks/queries/useWebsiteMetrics.ts

@@ -1,12 +1,15 @@
-import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
+import useApi from './useApi';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteMetrics(
   websiteId: string,
-  params?: { [key: string]: any },
+  type: string,
+  limit: number,
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
 
   return useQuery({
     queryKey: [
@@ -14,21 +17,26 @@ export function useWebsiteMetrics(
       {
         websiteId,
         ...params,
+        type,
+        limit,
       },
     ],
     queryFn: async () => {
       const filters = { ...params };
 
-      filters[params.type] = undefined;
+      filters[type] = undefined;
 
       const data = await get(`/websites/${websiteId}/metrics`, {
         ...filters,
+        type,
+        limit,
       });
 
       options?.onDataLoad?.(data);
 
       return data;
     },
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/queries/useWebsitePageviews.ts

@@ -1,34 +1,18 @@
-import { zonedTimeToUtc } from 'date-fns-tz';
+import { UseQueryOptions } from '@tanstack/react-query';
-import { useApi, useDateRange, useNavigation, useTimezone } from 'components/hooks';
+import { useApi } from './useApi';
+import { useFilterParams } from '..//useFilterParams';
 
-export function useWebsitePageviews(websiteId: string, options?: { [key: string]: string }) {
+export function useWebsitePageviews(
+  websiteId: string,
+  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
+  const params = useFilterParams(websiteId);
-  const { startDate, endDate, unit } = dateRange;
-  const { timezone } = useTimezone();
-  const {
-    query: { url, referrer, os, browser, device, country, region, city, title },
-  } = useNavigation();
-
-  const params = {
-    startAt: +zonedTimeToUtc(startDate, timezone),
-    endAt: +zonedTimeToUtc(endDate, timezone),
-    unit,
-    timezone,
-    url,
-    referrer,
-    os,
-    browser,
-    device,
-    country,
-    region,
-    city,
-    title,
-  };
 
   return useQuery({
     queryKey: ['websites:pageviews', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/pageviews`, params),
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/queries/useWebsiteStats.ts

@@ -1,30 +1,14 @@
-import { useApi, useDateRange, useNavigation } from 'components/hooks';
+import { useApi } from './useApi';
+import { useFilterParams } from '../useFilterParams';
 
 export function useWebsiteStats(websiteId: string, options?: { [key: string]: string }) {
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
+  const params = useFilterParams(websiteId);
-  const { startDate, endDate } = dateRange;
-  const {
-    query: { url, referrer, title, os, browser, device, country, region, city },
-  } = useNavigation();
-
-  const params = {
-    startAt: +startDate,
-    endAt: +endDate,
-    url,
-    referrer,
-    title,
-    os,
-    browser,
-    device,
-    country,
-    region,
-    city,
-  };
 
   return useQuery({
     queryKey: ['websites:stats', { websiteId, ...params }],
     queryFn: () => get(`/websites/${websiteId}/stats`, params),
+    enabled: !!websiteId,
     ...options,
   });
 }

src/components/hooks/useFilterParams.ts

@@ -0,0 +1,31 @@
+import { useNavigation } from './useNavigation';
+import { useDateRange } from './useDateRange';
+import { useTimezone } from './useTimezone';
+import { zonedTimeToUtc } from 'date-fns-tz';
+
+export function useFilterParams(websiteId: string) {
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, offset } = dateRange;
+  const { timezone } = useTimezone();
+  const {
+    query: { url, referrer, title, os, browser, device, country, region, city, event },
+  } = useNavigation();
+
+  return {
+    startAt: +zonedTimeToUtc(startDate, timezone),
+    endAt: +zonedTimeToUtc(endDate, timezone),
+    unit,
+    offset,
+    timezone,
+    url,
+    referrer,
+    title,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    event,
+  };
+}

src/components/metrics/MetricsTable.tsx

@@ -6,7 +6,6 @@ import LinkButton from 'components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import { percentFilter } from 'lib/filters';
 import {
-  useDateRange,
   useNavigation,
   useWebsiteMetrics,
   useMessages,
@@ -45,34 +44,14 @@ export function MetricsTable({
 }: MetricsTableProps) {
   const [search, setSearch] = useState('');
   const { formatValue } = useFormat();
-  const [{ startDate, endDate }] = useDateRange(websiteId);
+  const { renderUrl } = useNavigation();
-  const {
-    renderUrl,
-    query: { url, referrer, title, os, browser, device, country, region, city },
-  } = useNavigation();
   const { formatMessage, labels } = useMessages();
   const { dir } = useLocale();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetrics(
+  const { data, isLoading, isFetched, error } = useWebsiteMetrics(websiteId, type, limit, {
-    websiteId,
+    retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-    {
+    onDataLoad,
-      type,
+  });
-      startAt: +startDate,
-      endAt: +endDate,
-      url,
-      referrer,
-      os,
-      title,
-      browser,
-      device,
-      country,
-      region,
-      city,
-      limit,
-      search,
-    },
-    { retryDelay: delay || DEFAULT_ANIMATION_DURATION, onDataLoad },
-  );
 
   const filteredData = useMemo(() => {
     if (data) {