Added query hooks for website events and metrics.

src/components/metrics/EventsChart.tsx

@@ -3,7 +3,13 @@ import { Loading } from 'react-basics';
 import { colord } from 'colord';
 import BarChart from './BarChart';
 import { getDateArray } from 'lib/date';
-import { useApi, useLocale, useDateRange, useTimezone, useNavigation } from 'components/hooks';
+import {
+  useLocale,
+  useDateRange,
+  useTimezone,
+  useNavigation,
+  useWebsiteEvents,
+} from 'components/hooks';
 import { EVENT_COLORS } from 'lib/constants';
 import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
 
@@ -14,34 +20,29 @@ export interface EventsChartProps {
 }
 
 export function EventsChart({ websiteId, className, token }: EventsChartProps) {
-  const { get, useQuery } = useApi();
-  const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
+  const [{ startDate, endDate, unit, offset }] = useDateRange(websiteId);
   const { locale } = useLocale();
   const [timezone] = useTimezone();
   const {
     query: { url, event },
   } = useNavigation();
 
-  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 { data, isLoading } = useWebsiteEvents(websiteId, {
+    startAt: +startDate,
+    endAt: +endDate,
+    unit,
+    timezone,
+    url,
+    event,
+    token,
+    offset,
   });
 
   const datasets = useMemo(() => {
     if (!data) return [];
     if (isLoading) return data;
 
-    const map = data.reduce((obj, { x, t, y }) => {
+    const map = (data as any[]).reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
         obj[x] = [];
       }
@@ -75,7 +76,7 @@ export function EventsChart({ websiteId, className, token }: EventsChartProps) {
   return (
     <BarChart
       className={className}
-      datasets={datasets}
+      datasets={datasets as any[]}
       unit={unit}
       stacked={true}
       renderXLabel={renderDateLabels(unit, locale)}