Added useFetch hook. Updated database check.

components/metrics/ActiveUsers.js

@@ -1,32 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useSpring, animated } from 'react-spring';
 import classNames from 'classnames';
-import { get } from 'lib/web';
+import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, className }) {
-  const [count, setCount] = useState(0);
-
-  async function loadData() {
-    const result = await get(`/api/website/${websiteId}/active`);
-    setCount(result?.[0]?.x);
-  }
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
+  const count = useMemo(() => {
+    return data?.[0]?.x || 0;
+  }, [data]);
 
   const props = useSpring({
     x: count,
     from: { x: 0 },
   });
 
-  useEffect(() => {
-    loadData();
-
-    const id = setInterval(() => loadData(), 60000);
-
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-
   if (count === 0) {
     return null;
   }

components/metrics/EventsChart.js

@@ -1,10 +1,8 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import classNames from 'classnames';
+import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
-import { get } from 'lib/web';
 import { getTimezone, getDateArray, getDateLength } from 'lib/date';
-import styles from './BarChart.module.css';
+import useFetch from 'hooks/useFetch';
 
 const COLORS = [
   '#2680eb',
@@ -18,31 +16,15 @@ const COLORS = [
 ];
 
 export default function EventsChart({ websiteId, startDate, endDate, unit }) {
-  const [data, setData] = useState();
+  const { data } = useFetch(`/api/website/${websiteId}/events`, {
+    start_at: +startDate,
+    end_at: +endDate,
+    unit,
+    tz: getTimezone(),
+  });
   const datasets = useMemo(() => {
     if (!data) return [];
 
-    return Object.keys(data).map((key, index) => {
-      const color = tinycolor(COLORS[index]);
-      return {
-        label: key,
-        data: data[key],
-        lineTension: 0,
-        backgroundColor: color.setAlpha(0.4).toRgbString(),
-        borderColor: color.setAlpha(0.5).toRgbString(),
-        borderWidth: 1,
-      };
-    });
-  }, [data]);
-
-  async function loadData() {
-    const data = await get(`/api/website/${websiteId}/events`, {
-      start_at: +startDate,
-      end_at: +endDate,
-      unit,
-      tz: getTimezone(),
-    });
-
     const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
         obj[x] = [];
@@ -57,8 +39,18 @@ export default function EventsChart({ websiteId, startDate, endDate, unit }) {
       map[key] = getDateArray(map[key], startDate, endDate, unit);
     });
 
-    setData(map);
-  }
+    return Object.keys(map).map((key, index) => {
+      const color = tinycolor(COLORS[index]);
+      return {
+        label: key,
+        data: map[key],
+        lineTension: 0,
+        backgroundColor: color.setAlpha(0.4).toRgbString(),
+        borderColor: color.setAlpha(0.5).toRgbString(),
+        borderWidth: 1,
+      };
+    });
+  }, [data]);
 
   function handleCreate(options) {
     const legend = {
@@ -74,10 +66,6 @@ export default function EventsChart({ websiteId, startDate, endDate, unit }) {
     chart.update();
   }
 
-  useEffect(() => {
-    loadData();
-  }, [websiteId, startDate, endDate]);
-
   if (!data) {
     return null;
   }

components/metrics/MetricsBar.js

@@ -1,33 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import MetricCard from './MetricCard';
-import { get } from 'lib/web';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import useFetch from 'hooks/useFetch';
 import styles from './MetricsBar.module.css';
 
 export default function MetricsBar({ websiteId, startDate, endDate, className }) {
-  const [data, setData] = useState({});
+  const { data } = useFetch(`/api/website/${websiteId}/metrics`, {
+    start_at: +startDate,
+    end_at: +endDate,
+  });
   const [format, setFormat] = useState(true);
-  const { pageviews, uniques, bounces, totaltime } = data;
 
   const formatFunc = format ? formatLongNumber : formatNumber;
 
-  async function loadData() {
-    setData(
-      await get(`/api/website/${websiteId}/metrics`, {
-        start_at: +startDate,
-        end_at: +endDate,
-      }),
-    );
-  }
-
   function handleSetFormat() {
     setFormat(state => !state);
   }
 
-  useEffect(() => {
-    loadData();
-  }, [websiteId, startDate, endDate]);
+  if (!data) {
+    return null;
+  }
+
+  const { pageviews, uniques, bounces, totaltime } = data;
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>

components/metrics/MetricsTable.js

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
 import Button from 'components/common/Button';
+import Loading from 'components/common/Loading';
+import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
-import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsTable.module.css';
-import Loading from '../common/Loading';
 
 export default function MetricsTable({
   title,
@@ -27,7 +27,16 @@ export default function MetricsTable({
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
-  const [data, setData] = useState();
+  const { data } = useFetch(
+    `/api/website/${websiteId}/rankings`,
+    {
+      type,
+      start_at: +startDate,
+      end_at: +endDate,
+      domain: websiteDomain,
+    },
+    { onDataLoad },
+  );
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
   const shouldAnimate = limit > 0;
@@ -43,18 +52,6 @@ export default function MetricsTable({
     return [];
   }, [data, dataFilter, filterOptions]);
 
-  async function loadData() {
-    const data = await get(`/api/website/${websiteId}/rankings`, {
-      type,
-      start_at: +startDate,
-      end_at: +endDate,
-      domain: websiteDomain,
-    });
-
-    setData(data);
-    onDataLoad(data);
-  }
-
   const handleSetFormat = () => setFormat(state => !state);
 
   const getRow = row => {
@@ -76,12 +73,6 @@ export default function MetricsTable({
     return <div style={style}>{getRow(rankings[index])}</div>;
   };
 
-  useEffect(() => {
-    if (websiteId) {
-      loadData();
-    }
-  }, [websiteId, startDate, endDate, type]);
-
   return (
     <div className={classNames(styles.container, className)}>
       {data ? (

components/metrics/WebsiteChart.js

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import QuickButtons from './QuickButtons';
-import DateFilter from '../common/DateFilter';
-import StickyHeader from '../helpers/StickyHeader';
-import { get } from 'lib/web';
+import DateFilter from 'components/common/DateFilter';
+import StickyHeader from 'components/helpers/StickyHeader';
+import useFetch from 'hooks/useFetch';
 import { getDateArray, getDateRange, getTimezone } from 'lib/date';
 import styles from './WebsiteChart.module.css';
 
@@ -16,9 +16,18 @@ export default function WebsiteChart({
   onDataLoad = () => {},
   onDateChange = () => {},
 }) {
-  const [data, setData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit, value } = dateRange;
+  const { data } = useFetch(
+    `/api/website/${websiteId}/pageviews`,
+    {
+      start_at: +startDate,
+      end_at: +endDate,
+      unit,
+      tz: getTimezone(),
+    },
+    { onDataLoad },
+  );
 
   const [pageviews, uniques] = useMemo(() => {
     if (data) {
@@ -35,22 +44,6 @@ export default function WebsiteChart({
     onDateChange(values);
   }
 
-  async function loadData() {
-    const data = await get(`/api/website/${websiteId}/pageviews`, {
-      start_at: +startDate,
-      end_at: +endDate,
-      unit,
-      tz: getTimezone(),
-    });
-
-    setData(data);
-    onDataLoad(data);
-  }
-
-  useEffect(() => {
-    loadData();
-  }, [websiteId, startDate, endDate, unit]);
-
   return (
     <>
       <div className={classNames(styles.header, 'row')}>