Updated fetch hook API.

components/metrics/ActiveUsers.js

@@ -5,7 +5,10 @@ import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, token, className }) {
-  const { data } = useFetch(`/api/website/${websiteId}/active`, { token }, { interval: 60000 });
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {
+    params: { token },
+    interval: 60000,
+  });
   const count = useMemo(() => {
     return data?.[0]?.x || 0;
   }, [data]);

components/metrics/EventsChart.js

@@ -17,14 +17,16 @@ export default function EventsChart({ websiteId, token }) {
   const { data } = useFetch(
     `/api/website/${websiteId}/events`,
     {
-      start_at: +startDate,
-      end_at: +endDate,
-      unit,
-      tz: timezone,
-      url: query.url,
-      token,
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: timezone,
+        url: query.url,
+        token,
+      },
     },
-    { update: [modified] },
+    [modified],
   );
   const datasets = useMemo(() => {
     if (!data) return [];

components/metrics/EventsTable.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import MetricsTable from './MetricsTable';
-import styles from './EventsTable.module.css';
+import Tag from 'components/common/Tag';
 
 export default function EventsTable({ websiteId, token, limit, onDataLoad }) {
   return (
@@ -22,7 +22,7 @@ const Label = ({ value }) => {
   const [event, label] = value.split(':');
   return (
     <>
-      <span className={styles.type}>{event}</span>
+      <Tag>{event}</Tag>
       {label}
     </>
   );

components/metrics/EventsTable.module.css

@@ -1,7 +0,0 @@
-.type {
-  font-size: var(--font-size-small);
-  padding: 2px 4px;
-  border: 1px solid var(--gray300);
-  border-radius: 4px;
-  margin-right: 10px;
-}

components/metrics/MetricsBar.js

@@ -18,17 +18,19 @@ export default function MetricsBar({ websiteId, token, className }) {
     query: { url },
   } = usePageQuery();
 
+  console.log({ modified });
+
   const { data, error, loading } = useFetch(
     `/api/website/${websiteId}/stats`,
     {
-      start_at: +startDate,
-      end_at: +endDate,
-      url,
-      token,
-    },
-    {
-      update: [modified],
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        url,
+        token,
+      },
     },
+    [modified],
   );
 
   const formatFunc = format ? formatLongNumber : formatNumber;

components/metrics/MetricsTable.js

@@ -40,14 +40,18 @@ export default function MetricsTable({
   const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {
-      type,
-      start_at: +startDate,
-      end_at: +endDate,
-      domain: websiteDomain,
-      url,
-      token,
+      params: {
+        type,
+        start_at: +startDate,
+        end_at: +endDate,
+        domain: websiteDomain,
+        url,
+        token,
+      },
+      onDataLoad,
+      delay: 300,
     },
-    { onDataLoad, delay: 300, update: [modified] },
+    [modified],
   );
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;

components/metrics/PageviewsChart.js

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
 import useTheme from 'hooks/useTheme';
-import { THEME_COLORS } from 'lib/constants';
+import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 
 export default function PageviewsChart({
   websiteId,
@@ -13,7 +13,7 @@ export default function PageviewsChart({
   records,
   className,
   loading,
-  animationDuration = 300,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
 }) {
   const intl = useIntl();
   const [theme] = useTheme();

components/metrics/RealtimeChart.js

@@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
 import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
 import PageviewsChart from './PageviewsChart';
 import { getDateArray } from 'lib/date';
+import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 
 function mapData(data) {
   let last = 0;
@@ -44,7 +45,7 @@ export default function RealtimeChart({ data, unit, ...props }) {
       prevEndDate.current = endDate;
       return 0;
     }
-    return 300;
+    return DEFAULT_ANIMATION_DURATION;
   }, [data]);
 
   return (

components/metrics/RealtimeLog.js

@@ -5,6 +5,7 @@ import firstBy from 'thenby';
 import { format } from 'date-fns';
 import Icon from 'components/common/Icon';
 import Table, { TableRow } from 'components/common/Table';
+import Tag from 'components/common/Tag';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
@@ -92,7 +93,7 @@ export default function RealtimeLog({ data, websites }) {
     if (event_type) {
       return (
         <div>
-          <span className={styles.event}>{event_type}</span> {event_value}
+          <Tag>{event_type}</Tag> {event_value}
         </div>
       );
     }

components/metrics/RealtimeLog.module.css

@@ -12,14 +12,6 @@
   overflow: auto;
 }
 
-.event {
-  font-size: var(--font-size-small);
-  padding: 2px 4px;
-  border: 1px solid var(--gray300);
-  border-radius: 4px;
-  margin-right: 10px;
-}
-
 .icon {
   align-self: center;
   margin-right: 20px;

components/metrics/WebsiteChart.js

@@ -35,14 +35,17 @@ export default function WebsiteChart({
   const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
-      start_at: +startDate,
-      end_at: +endDate,
-      unit,
-      tz: timezone,
-      url,
-      token,
+      params: {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: timezone,
+        url,
+        token,
+      },
+      onDataLoad,
     },
-    { onDataLoad, update: [modified] },
+    [modified],
   );
 
   const chartData = useMemo(() => {