Added useFetch hook. Updated database check.

components/WebsiteDetails.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@@ -7,7 +7,6 @@ import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import MenuLayout from 'components/layout/MenuLayout';
 import Button from 'components/common/Button';
 import { getDateRange } from 'lib/date';
-import { get } from 'lib/web';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
 import PagesTable from './metrics/PagesTable';
@@ -18,15 +17,16 @@ import DevicesTable from './metrics/DevicesTable';
 import CountriesTable from './metrics/CountriesTable';
 import EventsTable from './metrics/EventsTable';
 import EventsChart from './metrics/EventsChart';
+import useFetch from '../hooks/useFetch';
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
-  const [data, setData] = useState();
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
-  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
+  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit } = dateRange;
+  const { data } = useFetch(`/api/website/${websiteId}`, { websiteId });
 
   const BackButton = () => (
     <Button
@@ -76,10 +76,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     return menuOptions.find(e => e.value === value);
   }
 
-  async function loadData() {
-    setData(await get(`/api/website/${websiteId}`));
-  }
-
   function handleDataLoad() {
     if (!chartLoaded) setTimeout(() => setChartLoaded(true), 300);
   }
@@ -96,12 +92,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setExpand(getSelectedMenuOption(value));
   }
 
-  useEffect(() => {
-    if (websiteId) {
-      loadData();
-    }
-  }, [websiteId]);
-
   if (!data) {
     return null;
   }

components/WebsiteList.js

@@ -1,25 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
 import Button from 'components/common/Button';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
-import { get } from 'lib/web';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList() {
-  const [data, setData] = useState();
   const router = useRouter();
-
-  async function loadData() {
-    setData(await get(`/api/websites`));
-  }
-
-  useEffect(() => {
-    loadData();
-  }, []);
+  const { data } = useFetch('/api/websites');
 
   if (!data) {
     return null;

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')}>

components/settings/AccountSettings.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
@@ -7,20 +7,20 @@ import Table from 'components/common/Table';
 import Modal from 'components/common/Modal';
 import AccountEditForm from 'components/forms/AccountEditForm';
 import ButtonLayout from 'components/layout/ButtonLayout';
+import DeleteForm from 'components/forms/DeleteForm';
+import useFetch from 'hooks/useFetch';
 import Pen from 'assets/pen.svg';
 import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
-import { get } from 'lib/web';
 import styles from './AccountSettings.module.css';
-import DeleteForm from '../forms/DeleteForm';
 
 export default function AccountSettings() {
-  const [data, setData] = useState();
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
   const [saved, setSaved] = useState(0);
+  const { data } = useFetch(`/api/accounts`, {}, { update: [saved] });
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
 
@@ -61,14 +61,6 @@ export default function AccountSettings() {
     setDeleteAccount(null);
   }
 
-  async function loadData() {
-    setData(await get(`/api/accounts`));
-  }
-
-  useEffect(() => {
-    loadData();
-  }, [saved]);
-
   if (!data) {
     return null;
   }

components/settings/WebsiteSettings.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
@@ -15,17 +15,17 @@ import Trash from 'assets/trash.svg';
 import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
 import Link from 'assets/link.svg';
-import { get } from 'lib/web';
 import styles from './WebsiteSettings.module.css';
+import useFetch from '../../hooks/useFetch';
 
 export default function WebsiteSettings() {
-  const [data, setData] = useState();
   const [editWebsite, setEditWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
   const [addWebsite, setAddWebsite] = useState();
   const [showCode, setShowCode] = useState();
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
+  const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
 
   const Buttons = row => (
     <ButtonLayout>
@@ -77,14 +77,6 @@ export default function WebsiteSettings() {
     setShowUrl(null);
   }
 
-  async function loadData() {
-    setData(await get(`/api/websites`));
-  }
-
-  useEffect(() => {
-    loadData();
-  }, [saved]);
-
   if (!data) {
     return null;
   }