From d0ca0819c6bc0ab209585ca1be37f60d3adf3b6b Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 30 Aug 2020 15:29:31 -0700
Subject: [PATCH 1/7] Added useFetch hook. Updated database check.

---
 components/WebsiteDetails.js           | 18 ++-------
 components/WebsiteList.js              | 14 ++-----
 components/metrics/ActiveUsers.js      | 24 +++---------
 components/metrics/EventsChart.js      | 52 ++++++++++----------------
 components/metrics/MetricsBar.js       | 27 ++++++-------
 components/metrics/MetricsTable.js     | 35 +++++++----------
 components/metrics/WebsiteChart.js     | 35 +++++++----------
 components/settings/AccountSettings.js | 16 ++------
 components/settings/WebsiteSettings.js | 14 ++-----
 hooks/useFetch.js                      | 39 +++++++++++++++++++
 lib/constants.js                       | 47 ++++++++++-------------
 lib/queries.js                         | 20 +---------
 pages/share/[...id].js                 | 38 ++++---------------
 scripts/copy-db-schema.js              |  4 +-
 14 files changed, 146 insertions(+), 237 deletions(-)
 create mode 100644 hooks/useFetch.js

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 60367050..61e740e5 100644
--- a/components/WebsiteDetails.js
+++ b/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;
   }
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 3b0b7879..2a44350d 100644
--- a/components/WebsiteList.js
+++ b/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;
diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js
index 10c10155..63ce237a 100644
--- a/components/metrics/ActiveUsers.js
+++ b/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;
   }
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 7a751b5b..2c0d207e 100644
--- a/components/metrics/EventsChart.js
+++ b/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;
   }
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 00238fbe..dce7a459 100644
--- a/components/metrics/MetricsBar.js
+++ b/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}>
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index fa51d1db..f74c99a5 100644
--- a/components/metrics/MetricsTable.js
+++ b/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 ? (
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 9c53a560..c9eac898 100644
--- a/components/metrics/WebsiteChart.js
+++ b/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')}>
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index e0b70698..cde8bedc 100644
--- a/components/settings/AccountSettings.js
+++ b/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;
   }
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index f759c664..a08b61f6 100644
--- a/components/settings/WebsiteSettings.js
+++ b/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;
   }
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
new file mode 100644
index 00000000..9f14e45e
--- /dev/null
+++ b/hooks/useFetch.js
@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { get } from 'lib/web';
+
+export default function useFetch(url, params = {}, options = {}) {
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const keys = Object.keys(params)
+    .sort()
+    .map(key => params[key]);
+  const { update = [], onDataLoad = () => {} } = options;
+
+  async function loadData() {
+    try {
+      setError(null);
+      const data = await get(url, params);
+      setData(data);
+      onDataLoad(data);
+    } catch (e) {
+      console.error(e);
+      setError(e);
+    }
+  }
+
+  useEffect(() => {
+    if (url) {
+      const { interval } = options;
+
+      loadData();
+
+      const id = interval ? setInterval(() => loadData(), interval) : null;
+
+      return () => {
+        clearInterval(id);
+      };
+    }
+  }, [url, ...keys, ...update]);
+
+  return { data, error };
+}
diff --git a/lib/constants.js b/lib/constants.js
index 1c63ae18..47592a6c 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -1,39 +1,30 @@
 export const AUTH_COOKIE_NAME = 'umami.auth';
 
+export const POSTGRESQL = 'postgresql';
+export const MYSQL = 'mysql';
+
+export const MYSQL_DATE_FORMATS = {
+  minute: '%Y-%m-%d %H:%i:00',
+  hour: '%Y-%m-%d %H:00:00',
+  day: '%Y-%m-%d',
+  month: '%Y-%m-01',
+  year: '%Y-01-01',
+};
+
+export const POSTGRESQL_DATE_FORMATS = {
+  minute: 'YYYY-MM-DD HH24:MI:00',
+  hour: 'YYYY-MM-DD HH24:00:00',
+  day: 'YYYY-MM-DD',
+  month: 'YYYY-MM-01',
+  year: 'YYYY-01-01',
+};
+
 export const DOMAIN_REGEX = /((?=[a-z0-9-]{1,63}\.)(xn--)?[a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,63}/;
 
 export const DESKTOP_SCREEN_WIDTH = 1920;
 export const LAPTOP_SCREEN_WIDTH = 1024;
 export const MOBILE_SCREEN_WIDTH = 479;
 
-export const OPERATING_SYSTEMS = [
-  'iOS',
-  'Android OS',
-  'BlackBerry OS',
-  'Windows Mobile',
-  'Amazon OS',
-  'Windows 3.11',
-  'Windows 95',
-  'Windows 98',
-  'Windows 2000',
-  'Windows XP',
-  'Windows Server 2003',
-  'Windows Vista',
-  'Windows 7',
-  'Windows 8',
-  'Windows 8.1',
-  'Windows 10',
-  'Windows ME',
-  'Open BSD',
-  'Sun OS',
-  'Linux',
-  'Mac OS',
-  'QNX',
-  'BeOS',
-  'OS/2',
-  'Chrome OS',
-];
-
 export const DESKTOP_OS = [
   'Windows 3.11',
   'Windows 95',
diff --git a/lib/queries.js b/lib/queries.js
index 4fe46ee2..d76cdaff 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -1,25 +1,7 @@
 import moment from 'moment-timezone';
 import prisma, { runQuery } from 'lib/db';
 import { subMinutes } from 'date-fns';
-
-const POSTGRESQL = 'postgresql';
-const MYSQL = 'mysql';
-
-const MYSQL_DATE_FORMATS = {
-  minute: '%Y-%m-%d %H:%i:00',
-  hour: '%Y-%m-%d %H:00:00',
-  day: '%Y-%m-%d',
-  month: '%Y-%m-01',
-  year: '%Y-01-01',
-};
-
-const POSTGRESQL_DATE_FORMATS = {
-  minute: 'YYYY-MM-DD HH24:MI:00',
-  hour: 'YYYY-MM-DD HH24:00:00',
-  day: 'YYYY-MM-DD',
-  month: 'YYYY-MM-01',
-  year: 'YYYY-01-01',
-};
+import { MYSQL, POSTGRESQL, MYSQL_DATE_FORMATS, POSTGRESQL_DATE_FORMATS } from 'lib/constants';
 
 export function getDatabase() {
   return (
diff --git a/pages/share/[...id].js b/pages/share/[...id].js
index 21005a53..1e0897a9 100644
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@@ -1,46 +1,22 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
 import WebsiteDetails from 'components/WebsiteDetails';
-import NotFound from 'pages/404';
-import { get } from 'lib/web';
+import useFetch from 'hooks/useFetch';
 
 export default function SharePage() {
-  const [loading, setLoading] = useState(true);
-  const [websiteId, setWebsiteId] = useState();
-  const [notFound, setNotFound] = useState(false);
   const router = useRouter();
   const { id } = router.query;
+  const shareId = id?.[0];
+  const { data } = useFetch(shareId ? `/api/share/${shareId}` : null);
 
-  async function loadData() {
-    const website = await get(`/api/share/${id?.[0]}`);
-
-    if (website) {
-      setWebsiteId(website.website_id);
-    } else if (typeof window !== 'undefined') {
-      setNotFound(true);
-    }
-  }
-
-  useEffect(() => {
-    if (id) {
-      loadData().finally(() => {
-        setLoading(false);
-      });
-    } else {
-      setLoading(false);
-    }
-  }, [id]);
-
-  if (loading) return null;
-
-  if (!id || notFound) {
-    return <NotFound />;
+  if (!data) {
+    return null;
   }
 
   return (
     <Layout>
-      <WebsiteDetails websiteId={websiteId} />
+      <WebsiteDetails websiteId={data.website_id} />
     </Layout>
   );
 }
diff --git a/scripts/copy-db-schema.js b/scripts/copy-db-schema.js
index f28c621e..2d480545 100644
--- a/scripts/copy-db-schema.js
+++ b/scripts/copy-db-schema.js
@@ -5,8 +5,8 @@ const path = require('path');
 const databaseType =
   process.env.DATABASE_TYPE || (process.env.DATABASE_URL && process.env.DATABASE_URL.split(':')[0]);
 
-if (!databaseType) {
-  throw new Error('Database schema not specified');
+if (!databaseType || !['mysql', 'postgresql'].includes(databaseType)) {
+  throw new Error('Missing or invalid database');
 }
 
 console.log(`Database schema detected: ${databaseType}`);

From d06c0770192068287d38bdf780f175dc7e11aa02 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 03:53:39 -0700
Subject: [PATCH 2/7] Refactor components. Add refresh button.

---
 assets/redo.svg                          |  1 +
 components/WebsiteDetails.js             | 19 +++++++++--
 components/WebsiteList.js                |  6 ++--
 components/common/RefreshButton.js       |  7 ++++
 components/metrics/BarChart.js           | 12 +++++--
 components/metrics/MetricsBar.js         | 39 ++++++++++++----------
 components/metrics/MetricsBar.module.css |  2 +-
 components/metrics/PageviewsChart.js     |  5 +--
 components/metrics/WebsiteHeader.js      | 42 +++++++++++-------------
 hooks/useFetch.js                        |  2 +-
 package.json                             |  4 +--
 yarn.lock                                |  2 +-
 12 files changed, 85 insertions(+), 56 deletions(-)
 create mode 100644 assets/redo.svg
 create mode 100644 components/common/RefreshButton.js

diff --git a/assets/redo.svg b/assets/redo.svg
new file mode 100644
index 00000000..4544eb1d
--- /dev/null
+++ b/assets/redo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500 8h-27.711c-6.739 0-12.157 5.548-11.997 12.286l2.347 98.568C418.075 51.834 341.788 7.73 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.165 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-19.738-19.738c-4.498-4.498-11.753-4.785-16.501-.552C351.787 433.246 306.105 452 256 452c-108.322 0-196-87.662-196-196 0-108.322 87.662-196 196-196 79.545 0 147.941 47.282 178.675 115.302l-126.389-3.009c-6.737-.16-12.286 5.257-12.286 11.997V212c0 6.627 5.373 12 12 12h192c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z"/></svg>
\ No newline at end of file
diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 61e740e5..07f68ce8 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -17,16 +17,18 @@ 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';
+import useFetch from 'hooks/useFetch';
+import Loading from 'components/common/Loading';
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
   const [expand, setExpand] = useState();
+  const [refresh, setRefresh] = useState(0);
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit } = dateRange;
-  const { data } = useFetch(`/api/website/${websiteId}`, { websiteId });
+  const { data } = useFetch(`/api/website/${websiteId}`);
 
   const BackButton = () => (
     <Button
@@ -92,6 +94,10 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setExpand(getSelectedMenuOption(value));
   }
 
+  function handleRefresh() {
+    setRefresh(state => state + 1);
+  }
+
   if (!data) {
     return null;
   }
@@ -100,8 +106,14 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
-          <WebsiteHeader websiteId={websiteId} name={data.name} showLink={false} />
+          <WebsiteHeader
+            websiteId={websiteId}
+            title={data.name}
+            onRefresh={handleRefresh}
+            showLink={false}
+          />
           <WebsiteChart
+            key={refresh}
             websiteId={websiteId}
             onDataLoad={handleDataLoad}
             onDateChange={handleDateChange}
@@ -109,6 +121,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           />
         </div>
       </div>
+      {!chartLoaded && <Loading />}
       {chartLoaded && !expand && (
         <>
           <div className={classNames(styles.row, 'row')}>
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 2a44350d..31ba760a 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -19,10 +19,10 @@ export default function WebsiteList() {
 
   return (
     <Page>
-      {data?.map(({ website_id, name }) => (
+      {data.map(({ website_id, name }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteHeader websiteId={website_id} name={name} showLink />
-          <WebsiteChart key={website_id} title={name} websiteId={website_id} />
+          <WebsiteHeader websiteId={website_id} title={name} showLink />
+          <WebsiteChart websiteId={website_id} />
         </div>
       ))}
       {data.length === 0 && (
diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
new file mode 100644
index 00000000..c45d5c40
--- /dev/null
+++ b/components/common/RefreshButton.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import Button from './Button';
+import Refresh from 'assets/redo.svg';
+
+export default function RefreshButton({ onClick }) {
+  return <Button icon={<Refresh />} size="small" onClick={onClick} />;
+}
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 25c14fe5..9caa96d1 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import styles from './BarChart.module.css';
 import { format } from 'date-fns';
+import { formatLongNumber } from '../../lib/format';
 
 export default function BarChart({
   chartId,
@@ -21,7 +22,7 @@ export default function BarChart({
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
 
-  const renderLabel = (label, index, values) => {
+  const renderXLabel = (label, index, values) => {
     const d = new Date(values[index].value);
     const n = records;
 
@@ -40,6 +41,10 @@ export default function BarChart({
     }
   };
 
+  const renderYLabel = label => {
+    return +label > 1 ? formatLongNumber(label) : label;
+  };
+
   const renderTooltip = model => {
     const { opacity, title, body, labelColors } = model;
 
@@ -82,7 +87,7 @@ export default function BarChart({
               tooltipFormat: 'ddd MMMM DD YYYY',
             },
             ticks: {
-              callback: renderLabel,
+              callback: renderXLabel,
               minRotation: 0,
               maxRotation: 0,
             },
@@ -96,6 +101,7 @@ export default function BarChart({
         yAxes: [
           {
             ticks: {
+              callback: renderYLabel,
               beginAtZero: true,
             },
             stacked,
@@ -119,7 +125,7 @@ export default function BarChart({
     const { options } = chart.current;
 
     options.scales.xAxes[0].time.unit = unit;
-    options.scales.xAxes[0].ticks.callback = renderLabel;
+    options.scales.xAxes[0].ticks.callback = renderXLabel;
     options.animation.duration = animationDuration;
 
     onUpdate(chart.current);
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index dce7a459..111e550b 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import MetricCard from './MetricCard';
-import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
+import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
 
 export default function MetricsBar({ websiteId, startDate, endDate, className }) {
@@ -18,26 +19,28 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
     setFormat(state => !state);
   }
 
-  if (!data) {
-    return null;
-  }
-
-  const { pageviews, uniques, bounces, totaltime } = data;
+  const { pageviews, uniques, bounces, totaltime } = data || {};
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      <MetricCard label="Views" value={pageviews} format={formatFunc} />
-      <MetricCard label="Visitors" value={uniques} format={formatFunc} />
-      <MetricCard
-        label="Bounce rate"
-        value={pageviews ? (bounces / pageviews) * 100 : 0}
-        format={n => Number(n).toFixed(0) + '%'}
-      />
-      <MetricCard
-        label="Average visit time"
-        value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
-        format={n => formatShortTime(n, ['m', 's'], ' ')}
-      />
+      {!data ? (
+        <Loading />
+      ) : (
+        <>
+          <MetricCard label="Views" value={pageviews} format={formatFunc} />
+          <MetricCard label="Visitors" value={uniques} format={formatFunc} />
+          <MetricCard
+            label="Bounce rate"
+            value={pageviews ? (bounces / pageviews) * 100 : 0}
+            format={n => Number(n).toFixed(0) + '%'}
+          />
+          <MetricCard
+            label="Average visit time"
+            value={totaltime && pageviews ? totaltime / (pageviews - bounces) : 0}
+            format={n => formatShortTime(n, ['m', 's'], ' ')}
+          />
+        </>
+      )}
     </div>
   );
 }
diff --git a/components/metrics/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
index b52fb900..4046634e 100644
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@@ -4,7 +4,7 @@
 }
 
 @media only screen and (max-width: 992px) {
-  .container > div:last-child {
+  .bar > div:last-child {
     display: none;
   }
 }
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index f8aa0cdc..6104949a 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
+import { getDateLength } from '../../lib/date';
 
-export default function PageviewsChart({ websiteId, data, unit, className }) {
+export default function PageviewsChart({ websiteId, data, startDate, endDate, unit, className }) {
   const handleUpdate = chart => {
     const {
       data: { datasets },
@@ -43,7 +44,7 @@ export default function PageviewsChart({ websiteId, data, unit, className }) {
             },
           ]}
           unit={unit}
-          records={data.pageviews.length}
+          records={getDateLength(startDate, endDate, unit)}
           animationDuration={visible ? 300 : 0}
           onUpdate={handleUpdate}
         />
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index 459fd69f..0ece5878 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,38 +1,36 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import PageHeader from 'components/layout/PageHeader';
-import Link from 'components/common/Link';
 import Button from 'components/common/Button';
 import ActiveUsers from './ActiveUsers';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
+import RefreshButton from '../common/RefreshButton';
+import ButtonLayout from '../layout/ButtonLayout';
 
-export default function WebsiteHeader({ websiteId, name, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, showLink = false, onRefresh }) {
   const router = useRouter();
 
   return (
     <PageHeader>
-      {showLink ? (
-        <Link href="/website/[...id]" as={`/website/${websiteId}/${name}`} className={styles.title}>
-          {name}
-        </Link>
-      ) : (
-        <div className={styles.title}>{name}</div>
-      )}
+      <div className={styles.title}>{title}</div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
-      {showLink && (
-        <Button
-          icon={<Arrow />}
-          onClick={() =>
-            router.push('/website/[...id]', `/website/${websiteId}/${name}`, {
-              shallow: true,
-            })
-          }
-          size="small"
-        >
-          <div>View details</div>
-        </Button>
-      )}
+      <ButtonLayout>
+        <RefreshButton onClick={onRefresh} />
+        {showLink && (
+          <Button
+            icon={<Arrow />}
+            onClick={() =>
+              router.push('/website/[...id]', `/website/${websiteId}/${name}`, {
+                shallow: true,
+              })
+            }
+            size="small"
+          >
+            <div>View details</div>
+          </Button>
+        )}
+      </ButtonLayout>
     </PageHeader>
   );
 }
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index 9f14e45e..b9b36c0f 100644
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@@ -35,5 +35,5 @@ export default function useFetch(url, params = {}, options = {}) {
     }
   }, [url, ...keys, ...update]);
 
-  return { data, error };
+  return { data, error, loadData };
 }
diff --git a/package.json b/package.json
index 17b79794..80bf5f9c 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,7 @@
     ],
     "**/*.css": [
       "stylelint --fix",
-      "prettier --write",
-      "eslint"
+      "prettier --write"
     ]
   },
   "husky": {
@@ -53,6 +52,7 @@
     "dotenv": "^8.2.0",
     "formik": "^2.1.5",
     "geolite2-redist": "^1.0.7",
+    "immer": "^7.0.8",
     "is-localhost-ip": "^1.4.0",
     "jose": "^1.28.0",
     "maxmind": "^4.1.4",
diff --git a/yarn.lock b/yarn.lock
index 588dd177..73f0d4d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4456,7 +4456,7 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
-immer@^7.0.3:
+immer@^7.0.3, immer@^7.0.8:
   version "7.0.8"
   resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.8.tgz#41dcbc5669a76500d017bef3ad0d03ce0a1d7c1e"
   integrity sha512-XnpIN8PXBBaOD43U8Z17qg6RQiKQYGDGGCIbz1ixmLGwBkSWwmrmx5X7d+hTtXDM8ur7m5OdLE0PiO+y5RB3pw==

From c5cb19a3bf162d0c889250ad72a1acd569e1db82 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 14:11:30 -0700
Subject: [PATCH 3/7] Move date range selection into redux.

---
 components/WebsiteDetails.js         | 48 ++++++----------------------
 components/WebsiteList.js            |  4 +--
 components/common/DropDown.js        |  6 ++--
 components/common/RefreshButton.js   | 15 +++++++--
 components/metrics/BrowsersTable.js  |  4 +--
 components/metrics/CountriesTable.js | 11 +------
 components/metrics/DevicesTable.js   |  4 +--
 components/metrics/EventsChart.js    | 23 ++++++++-----
 components/metrics/EventsTable.js    | 11 +------
 components/metrics/MetricsBar.js     | 20 +++++++++---
 components/metrics/MetricsTable.js   | 13 +++++---
 components/metrics/OSTable.js        |  4 +--
 components/metrics/PagesTable.js     | 11 +------
 components/metrics/PageviewsChart.js |  5 ++-
 components/metrics/QuickButtons.js   |  6 ++--
 components/metrics/ReferrersTable.js | 13 ++------
 components/metrics/WebsiteChart.js   | 36 ++++++++++++---------
 components/metrics/WebsiteHeader.js  |  4 +--
 hooks/useFetch.js                    |  4 +--
 redux/actions/websites.js            | 34 ++++++++++++++++++++
 redux/reducers.js                    |  3 +-
 21 files changed, 141 insertions(+), 138 deletions(-)
 create mode 100644 redux/actions/websites.js

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 07f68ce8..bd8025ee 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -3,10 +3,8 @@ import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
 import Page from 'components/layout/Page';
-import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import MenuLayout from 'components/layout/MenuLayout';
 import Button from 'components/common/Button';
-import { getDateRange } from 'lib/date';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
 import PagesTable from './metrics/PagesTable';
@@ -20,15 +18,12 @@ import EventsChart from './metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import Loading from 'components/common/Loading';
 
-export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
+export default function WebsiteDetails({ websiteId }) {
+  const { data } = useFetch(`/api/website/${websiteId}`);
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
   const [expand, setExpand] = useState();
-  const [refresh, setRefresh] = useState(0);
-  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
-  const { startDate, endDate, unit } = dateRange;
-  const { data } = useFetch(`/api/website/${websiteId}`);
 
   const BackButton = () => (
     <Button
@@ -50,23 +45,12 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     { label: 'Browsers', value: 'browser', component: BrowsersTable },
     { label: 'Operating system', value: 'os', component: OSTable },
     { label: 'Devices', value: 'device', component: DevicesTable },
-    {
-      label: 'Countries',
-      value: 'country',
-      component: props => <CountriesTable {...props} onDataLoad={data => setCountryData(data)} />,
-    },
+    { label: 'Countries', value: 'country', component: CountriesTable },
     { label: 'Events', value: 'event', component: EventsTable },
   ];
 
-  const dataProps = {
-    websiteId,
-    startDate,
-    endDate,
-    unit,
-  };
-
   const tableProps = {
-    ...dataProps,
+    websiteId,
     websiteDomain: data?.domain,
     limit: 10,
     onExpand: handleExpand,
@@ -79,11 +63,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   }
 
   function handleDataLoad() {
-    if (!chartLoaded) setTimeout(() => setChartLoaded(true), 300);
-  }
-
-  function handleDateChange(values) {
-    setTimeout(() => setDateRange(values), 300);
+    if (!chartLoaded) {
+      setTimeout(() => setChartLoaded(true), 300);
+    }
   }
 
   function handleExpand(value) {
@@ -94,10 +76,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setExpand(getSelectedMenuOption(value));
   }
 
-  function handleRefresh() {
-    setRefresh(state => state + 1);
-  }
-
   if (!data) {
     return null;
   }
@@ -106,17 +84,11 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
-          <WebsiteHeader
+          <WebsiteChart
             websiteId={websiteId}
             title={data.name}
-            onRefresh={handleRefresh}
-            showLink={false}
-          />
-          <WebsiteChart
-            key={refresh}
-            websiteId={websiteId}
             onDataLoad={handleDataLoad}
-            onDateChange={handleDateChange}
+            showLink={false}
             stickyHeader
           />
         </div>
@@ -158,7 +130,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
               <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
             <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart {...dataProps} />
+              <EventsChart websiteId={websiteId} />
             </div>
           </div>
         </>
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 31ba760a..59573b96 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -1,6 +1,5 @@
 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';
@@ -21,8 +20,7 @@ export default function WebsiteList() {
     <Page>
       {data.map(({ website_id, name }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteHeader websiteId={website_id} title={name} showLink />
-          <WebsiteChart websiteId={website_id} />
+          <WebsiteChart websiteId={website_id} title={name} showLink />
         </div>
       ))}
       {data.length === 0 && (
diff --git a/components/common/DropDown.js b/components/common/DropDown.js
index cee90fc7..8f1ca4f9 100644
--- a/components/common/DropDown.js
+++ b/components/common/DropDown.js
@@ -20,10 +20,12 @@ export default function DropDown({
     setShowMenu(state => !state);
   }
 
-  function handleSelect(value, e) {
+  function handleSelect(selected, e) {
     e.stopPropagation();
     setShowMenu(false);
-    onChange(value);
+    if (selected !== value) {
+      onChange(selected);
+    }
   }
 
   useDocumentClick(e => {
diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index c45d5c40..079b7cee 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -1,7 +1,18 @@
 import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
 
-export default function RefreshButton({ onClick }) {
-  return <Button icon={<Refresh />} size="small" onClick={onClick} />;
+export default function RefreshButton({ websiteId }) {
+  const dispatch = useDispatch();
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+
+  function handleClick() {
+    if (dateRange) {
+      dispatch(setDateRange(websiteId, { ...dateRange }));
+    }
+  }
+
+  return <Button icon={<Refresh />} size="small" onClick={handleClick} />;
 }
diff --git a/components/metrics/BrowsersTable.js b/components/metrics/BrowsersTable.js
index 725aba26..6a68a8f7 100644
--- a/components/metrics/BrowsersTable.js
+++ b/components/metrics/BrowsersTable.js
@@ -2,15 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
-export default function BrowsersTable({ websiteId, startDate, endDate, limit, onExpand }) {
+export default function BrowsersTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
       title="Browsers"
       type="browser"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={browserFilter}
       onExpand={onExpand}
diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index b952ec00..21153132 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -2,22 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { countryFilter, percentFilter } from 'lib/filters';
 
-export default function CountriesTable({
-  websiteId,
-  startDate,
-  endDate,
-  limit,
-  onDataLoad,
-  onExpand,
-}) {
+export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
   return (
     <MetricsTable
       title="Countries"
       type="country"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={countryFilter}
       onDataLoad={data => onDataLoad(percentFilter(data))}
diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js
index be42cd41..2351c1e4 100644
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@@ -2,15 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { deviceFilter } from 'lib/filters';
 
-export default function DevicesTable({ websiteId, startDate, endDate, limit, onExpand }) {
+export default function DevicesTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
       title="Devices"
       type="device"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={deviceFilter}
       onExpand={onExpand}
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 2c0d207e..47ed2d24 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
-import { getTimezone, getDateArray, getDateLength } from 'lib/date';
+import { getTimezone, getDateArray, getDateLength, getDateRange } from 'lib/date';
 import useFetch from 'hooks/useFetch';
+import { useSelector } from 'react-redux';
 
 const COLORS = [
   '#2680eb',
@@ -15,13 +16,19 @@ const COLORS = [
   '#85d044',
 ];
 
-export default function EventsChart({ websiteId, startDate, endDate, unit }) {
-  const { data } = useFetch(`/api/website/${websiteId}/events`, {
-    start_at: +startDate,
-    end_at: +endDate,
-    unit,
-    tz: getTimezone(),
-  });
+export default function EventsChart({ websiteId, defaultDateRange = '7day' }) {
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const { startDate, endDate, unit, modified } = dateRange || getDateRange(defaultDateRange);
+  const { data } = useFetch(
+    `/api/website/${websiteId}/events`,
+    {
+      start_at: +startDate,
+      end_at: +endDate,
+      unit,
+      tz: getTimezone(),
+    },
+    { update: [modified] },
+  );
   const datasets = useMemo(() => {
     if (!data) return [];
 
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 91e5a401..3b4191bb 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -2,22 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';
 
-export default function EventsTable({
-  websiteId,
-  startDate,
-  endDate,
-  limit,
-  onExpand,
-  onDataLoad,
-}) {
+export default function EventsTable({ websiteId, limit, onExpand, onDataLoad }) {
   return (
     <MetricsTable
       title="Events"
       type="event"
       metric="Actions"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       renderLabel={({ x }) => <Label value={x} />}
       onExpand={onExpand}
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 111e550b..1e4abfce 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -5,12 +5,22 @@ import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
+import { useSelector } from 'react-redux';
+import { getDateRange } from '../../lib/date';
 
-export default function MetricsBar({ websiteId, startDate, endDate, className }) {
-  const { data } = useFetch(`/api/website/${websiteId}/metrics`, {
-    start_at: +startDate,
-    end_at: +endDate,
-  });
+export default function MetricsBar({ websiteId, className, defaultDateRange = '7day' }) {
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
+  const { data } = useFetch(
+    `/api/website/${websiteId}/metrics`,
+    {
+      start_at: +startDate,
+      end_at: +endDate,
+    },
+    {
+      update: [modified],
+    },
+  );
   const [format, setFormat] = useState(true);
 
   const formatFunc = format ? formatLongNumber : formatNumber;
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index f74c99a5..86121b85 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
@@ -9,14 +10,13 @@ import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsTable.module.css';
+import { getDateRange } from '../../lib/date';
 
 export default function MetricsTable({
-  title,
-  metric,
   websiteId,
   websiteDomain,
-  startDate,
-  endDate,
+  title,
+  metric,
   type,
   className,
   dataFilter,
@@ -24,9 +24,12 @@ export default function MetricsTable({
   limit,
   headerComponent,
   renderLabel,
+  defaultDateRange = '7day',
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
   const { data } = useFetch(
     `/api/website/${websiteId}/rankings`,
     {
@@ -35,7 +38,7 @@ export default function MetricsTable({
       end_at: +endDate,
       domain: websiteDomain,
     },
-    { onDataLoad },
+    { onDataLoad, delay: 300, update: [modified] },
   );
   const [format, setFormat] = useState(true);
   const formatFunc = format ? formatLongNumber : formatNumber;
diff --git a/components/metrics/OSTable.js b/components/metrics/OSTable.js
index 2b9b4500..60eee696 100644
--- a/components/metrics/OSTable.js
+++ b/components/metrics/OSTable.js
@@ -2,15 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { osFilter } from 'lib/filters';
 
-export default function OSTable({ websiteId, startDate, endDate, limit, onExpand }) {
+export default function OSTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
       title="Operating System"
       type="os"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={osFilter}
       onExpand={onExpand}
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index aab8b23c..0415d30e 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -3,14 +3,7 @@ import MetricsTable from './MetricsTable';
 import { urlFilter } from 'lib/filters';
 import ButtonGroup from '../common/ButtonGroup';
 
-export default function PagesTable({
-  websiteId,
-  websiteDomain,
-  startDate,
-  endDate,
-  limit,
-  onExpand,
-}) {
+export default function PagesTable({ websiteId, websiteDomain, limit, onExpand }) {
   const [filter, setFilter] = useState('Combined');
 
   return (
@@ -20,8 +13,6 @@ export default function PagesTable({
       metric="Views"
       headerComponent={limit ? null : <FilterButtons selected={filter} onClick={setFilter} />}
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={urlFilter}
       filterOptions={{ domain: websiteDomain, raw: filter === 'Raw' }}
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 6104949a..fc3aea57 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
-import { getDateLength } from '../../lib/date';
 
-export default function PageviewsChart({ websiteId, data, startDate, endDate, unit, className }) {
+export default function PageviewsChart({ websiteId, data, unit, records, className }) {
   const handleUpdate = chart => {
     const {
       data: { datasets },
@@ -44,7 +43,7 @@ export default function PageviewsChart({ websiteId, data, startDate, endDate, un
             },
           ]}
           unit={unit}
-          records={getDateLength(startDate, endDate, unit)}
+          records={records}
           animationDuration={visible ? 300 : 0}
           onUpdate={handleUpdate}
         />
diff --git a/components/metrics/QuickButtons.js b/components/metrics/QuickButtons.js
index 74ebebbd..d9a5c109 100644
--- a/components/metrics/QuickButtons.js
+++ b/components/metrics/QuickButtons.js
@@ -12,8 +12,10 @@ const options = {
 export default function QuickButtons({ value, onChange }) {
   const selectedItem = Object.keys(options).find(key => options[key] === value);
 
-  function handleClick(value) {
-    onChange(getDateRange(options[value]));
+  function handleClick(selected) {
+    if (options[selected] !== value) {
+      onChange(getDateRange(options[selected]));
+    }
   }
 
   return (
diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js
index e49c9dc0..548b2ba2 100644
--- a/components/metrics/ReferrersTable.js
+++ b/components/metrics/ReferrersTable.js
@@ -1,16 +1,9 @@
 import React, { useState } from 'react';
 import MetricsTable from './MetricsTable';
 import { refFilter } from 'lib/filters';
-import ButtonGroup from '../common/ButtonGroup';
+import ButtonGroup from 'components/common/ButtonGroup';
 
-export default function Referrers({
-  websiteId,
-  websiteDomain,
-  startDate,
-  endDate,
-  limit,
-  onExpand = () => {},
-}) {
+export default function ReferrersTable({ websiteId, websiteDomain, limit, onExpand = () => {} }) {
   const [filter, setFilter] = useState('Combined');
 
   const renderLink = ({ x: url }) => {
@@ -31,8 +24,6 @@ export default function Referrers({
       headerComponent={limit ? null : <FilterButtons selected={filter} onClick={setFilter} />}
       websiteId={websiteId}
       websiteDomain={websiteDomain}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={refFilter}
       filterOptions={{
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index c9eac898..4df3c2e5 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,4 +1,5 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
@@ -6,18 +7,23 @@ import QuickButtons from './QuickButtons';
 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 { getDateArray, getDateLength, getDateRange, getTimezone } from 'lib/date';
+import { setDateRange } from 'redux/actions/websites';
 import styles from './WebsiteChart.module.css';
+import WebsiteHeader from './WebsiteHeader';
 
 export default function WebsiteChart({
   websiteId,
+  title,
   defaultDateRange = '7day',
   stickyHeader = false,
+  showLink = false,
   onDataLoad = () => {},
-  onDateChange = () => {},
 }) {
-  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
-  const { startDate, endDate, unit, value } = dateRange;
+  const dispatch = useDispatch();
+  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const { startDate, endDate, unit, value, modified } = dateRange || getDateRange(defaultDateRange);
+
   const { data } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
@@ -26,7 +32,7 @@ export default function WebsiteChart({
       unit,
       tz: getTimezone(),
     },
-    { onDataLoad },
+    { onDataLoad, update: [modified] },
   );
 
   const [pageviews, uniques] = useMemo(() => {
@@ -40,24 +46,19 @@ export default function WebsiteChart({
   }, [data]);
 
   function handleDateChange(values) {
-    setDateRange(values);
-    onDateChange(values);
+    dispatch(setDateRange(websiteId, values));
   }
 
   return (
     <>
+      <WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}
           stickyClassName={styles.sticky}
           enabled={stickyHeader}
         >
-          <MetricsBar
-            className="col-12 col-md-9 col-lg-10"
-            websiteId={websiteId}
-            startDate={startDate}
-            endDate={endDate}
-          />
+          <MetricsBar className="col-12 col-md-9 col-lg-10" websiteId={websiteId} />
           <DateFilter
             className="col-12 col-md-3 col-lg-2"
             value={value}
@@ -67,7 +68,12 @@ export default function WebsiteChart({
       </div>
       <div className="row">
         <div className="col">
-          <PageviewsChart websiteId={websiteId} data={{ pageviews, uniques }} unit={unit} />
+          <PageviewsChart
+            websiteId={websiteId}
+            data={{ pageviews, uniques }}
+            unit={unit}
+            records={getDateLength(startDate, endDate, unit)}
+          />
           <QuickButtons value={value} onChange={handleDateChange} />
         </div>
       </div>
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index 0ece5878..8b01626d 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -8,7 +8,7 @@ import styles from './WebsiteHeader.module.css';
 import RefreshButton from '../common/RefreshButton';
 import ButtonLayout from '../layout/ButtonLayout';
 
-export default function WebsiteHeader({ websiteId, title, showLink = false, onRefresh }) {
+export default function WebsiteHeader({ websiteId, title, showLink = false }) {
   const router = useRouter();
 
   return (
@@ -16,7 +16,7 @@ export default function WebsiteHeader({ websiteId, title, showLink = false, onRe
       <div className={styles.title}>{title}</div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
       <ButtonLayout>
-        <RefreshButton onClick={onRefresh} />
+        <RefreshButton websiteId={websiteId} />
         {showLink && (
           <Button
             icon={<Arrow />}
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index b9b36c0f..2e1ad247 100644
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@@ -23,9 +23,9 @@ export default function useFetch(url, params = {}, options = {}) {
 
   useEffect(() => {
     if (url) {
-      const { interval } = options;
+      const { interval, delay = 0 } = options;
 
-      loadData();
+      setTimeout(() => loadData(), delay);
 
       const id = interval ? setInterval(() => loadData(), interval) : null;
 
diff --git a/redux/actions/websites.js b/redux/actions/websites.js
new file mode 100644
index 00000000..48873e9c
--- /dev/null
+++ b/redux/actions/websites.js
@@ -0,0 +1,34 @@
+import { createSlice } from '@reduxjs/toolkit';
+import produce from 'immer';
+
+const websites = createSlice({
+  name: 'user',
+  initialState: {},
+  reducers: {
+    updateWebsites(state, action) {
+      state = action.payload;
+      return state;
+    },
+  },
+});
+
+export const { updateWebsites } = websites.actions;
+
+export default websites.reducer;
+
+export function setDateRange(websiteId, dateRange) {
+  return (dispatch, getState) => {
+    const state = getState();
+    let { websites = {} } = state;
+
+    websites = produce(websites, draft => {
+      if (!draft[websiteId]) {
+        draft[websiteId] = {};
+      }
+      dateRange.modified = Date.now();
+      draft[websiteId].dateRange = dateRange;
+    });
+
+    return dispatch(updateWebsites(websites));
+  };
+}
diff --git a/redux/reducers.js b/redux/reducers.js
index f751726f..68a080f7 100644
--- a/redux/reducers.js
+++ b/redux/reducers.js
@@ -1,4 +1,5 @@
 import { combineReducers } from 'redux';
 import user from './actions/user';
+import websites from './actions/websites';
 
-export default combineReducers({ user });
+export default combineReducers({ user, websites });

From 2837251db76e91267f72f0afe0d16294d28f9fb6 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 15:02:32 -0700
Subject: [PATCH 4/7] Added useDateRange hook.

---
 components/common/RefreshButton.js |  7 ++++---
 components/metrics/EventsChart.js  | 10 +++++-----
 components/metrics/MetricsBar.js   |  9 ++++-----
 components/metrics/MetricsTable.js |  8 +++-----
 components/metrics/WebsiteChart.js | 10 +++++-----
 hooks/useDateRange.js              |  8 ++++++++
 redux/actions/websites.js          |  3 +--
 7 files changed, 30 insertions(+), 25 deletions(-)
 create mode 100644 hooks/useDateRange.js

diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 079b7cee..ce4c4f19 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -1,16 +1,17 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { setDateRange } from 'redux/actions/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
+import { useDateRange } from 'hooks/useDateRange';
 
 export default function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
 
   function handleClick() {
     if (dateRange) {
-      dispatch(setDateRange(websiteId, { ...dateRange }));
+      dispatch(setDateRange(websiteId, dateRange));
     }
   }
 
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 47ed2d24..1d8bb557 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
-import { getTimezone, getDateArray, getDateLength, getDateRange } from 'lib/date';
+import { getTimezone, getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
-import { useSelector } from 'react-redux';
+import { useDateRange } from 'hooks/useDateRange';
 
 const COLORS = [
   '#2680eb',
@@ -16,9 +16,9 @@ const COLORS = [
   '#85d044',
 ];
 
-export default function EventsChart({ websiteId, defaultDateRange = '7day' }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
-  const { startDate, endDate, unit, modified } = dateRange || getDateRange(defaultDateRange);
+export default function EventsChart({ websiteId }) {
+  const dateRange = useDateRange(websiteId);
+  const { startDate, endDate, unit, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/events`,
     {
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 1e4abfce..fdadaf84 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -5,12 +5,11 @@ import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
-import { useSelector } from 'react-redux';
-import { getDateRange } from '../../lib/date';
+import { useDateRange } from '../../hooks/useDateRange';
 
-export default function MetricsBar({ websiteId, className, defaultDateRange = '7day' }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
-  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
+export default function MetricsBar({ websiteId, className }) {
+  const dateRange = useDateRange(websiteId);
+  const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 86121b85..aa62d035 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,5 +1,4 @@
 import React, { useState, useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
@@ -9,8 +8,8 @@ import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
+import { useDateRange } from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';
-import { getDateRange } from '../../lib/date';
 
 export default function MetricsTable({
   websiteId,
@@ -24,12 +23,11 @@ export default function MetricsTable({
   limit,
   headerComponent,
   renderLabel,
-  defaultDateRange = '7day',
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
-  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
+  const dateRange = useDateRange(websiteId);
+  const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/rankings`,
     {
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 4df3c2e5..28394fc1 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
@@ -7,22 +7,22 @@ import QuickButtons from './QuickButtons';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import useFetch from 'hooks/useFetch';
-import { getDateArray, getDateLength, getDateRange, getTimezone } from 'lib/date';
+import { getDateArray, getDateLength, getTimezone } from 'lib/date';
 import { setDateRange } from 'redux/actions/websites';
 import styles from './WebsiteChart.module.css';
 import WebsiteHeader from './WebsiteHeader';
+import { useDateRange } from '../../hooks/useDateRange';
 
 export default function WebsiteChart({
   websiteId,
   title,
-  defaultDateRange = '7day',
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
 }) {
   const dispatch = useDispatch();
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
-  const { startDate, endDate, unit, value, modified } = dateRange || getDateRange(defaultDateRange);
+  const dateRange = useDateRange(websiteId);
+  const { startDate, endDate, unit, value, modified } = dateRange;
 
   const { data } = useFetch(
     `/api/website/${websiteId}/pageviews`,
diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js
new file mode 100644
index 00000000..99e49dfd
--- /dev/null
+++ b/hooks/useDateRange.js
@@ -0,0 +1,8 @@
+import { useSelector } from 'react-redux';
+import { getDateRange } from 'lib/date';
+
+export function useDateRange(websiteId, defaultDateRange = '7day') {
+  return useSelector(
+    state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange),
+  );
+}
diff --git a/redux/actions/websites.js b/redux/actions/websites.js
index 48873e9c..d619ddb7 100644
--- a/redux/actions/websites.js
+++ b/redux/actions/websites.js
@@ -25,8 +25,7 @@ export function setDateRange(websiteId, dateRange) {
       if (!draft[websiteId]) {
         draft[websiteId] = {};
       }
-      dateRange.modified = Date.now();
-      draft[websiteId].dateRange = dateRange;
+      draft[websiteId].dateRange = { ...dateRange, modified: Date.now() };
     });
 
     return dispatch(updateWebsites(websites));

From aec012fb798688399809bd19e830d72de86efb7d Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 15:57:59 -0700
Subject: [PATCH 5/7] Toast notifications.

---
 assets/times.svg                       |  1 +
 components/common/Toast.js             | 26 ++++++++++++++++++++++++++
 components/common/Toast.module.css     | 25 +++++++++++++++++++++++++
 components/settings/AccountSettings.js |  4 ++++
 components/settings/ProfileSettings.js | 10 +++++++++-
 components/settings/WebsiteSettings.js |  4 ++++
 6 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 assets/times.svg
 create mode 100644 components/common/Toast.js
 create mode 100644 components/common/Toast.module.css

diff --git a/assets/times.svg b/assets/times.svg
new file mode 100644
index 00000000..c528bcdd
--- /dev/null
+++ b/assets/times.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
\ No newline at end of file
diff --git a/components/common/Toast.js b/components/common/Toast.js
new file mode 100644
index 00000000..12787985
--- /dev/null
+++ b/components/common/Toast.js
@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { useSpring, animated } from 'react-spring';
+import styles from './Toast.module.css';
+import Icon from 'components/common/Icon';
+import Close from 'assets/times.svg';
+
+export default function Toast({ message, timeout = 3000, onClose }) {
+  const props = useSpring({
+    opacity: 1,
+    transform: 'translate3d(0,0px,0)',
+    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
+  });
+
+  useEffect(() => {
+    setTimeout(onClose, timeout);
+  }, []);
+
+  return ReactDOM.createPortal(
+    <animated.div className={styles.toast} style={props} onClick={onClose}>
+      <div className={styles.message}>{message}</div>
+      <Icon className={styles.close} icon={<Close />} size="small" />
+    </animated.div>,
+    document.getElementById('__modals'),
+  );
+}
diff --git a/components/common/Toast.module.css b/components/common/Toast.module.css
new file mode 100644
index 00000000..bfcd26bb
--- /dev/null
+++ b/components/common/Toast.module.css
@@ -0,0 +1,25 @@
+.toast {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  right: 0;
+  width: 300px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  color: var(--gray50);
+  background: var(--green400);
+  margin: auto;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.message {
+  font-size: var(--font-size-normal);
+}
+
+.close {
+  margin-left: 20px;
+}
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index cde8bedc..cdf55988 100644
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@@ -14,12 +14,14 @@ import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
 import styles from './AccountSettings.module.css';
+import Toast from '../common/Toast';
 
 export default function AccountSettings() {
   const [addAccount, setAddAccount] = useState();
   const [editAccount, setEditAccount] = useState();
   const [deleteAccount, setDeleteAccount] = useState();
   const [saved, setSaved] = useState(0);
+  const [message, setMessage] = useState();
   const { data } = useFetch(`/api/accounts`, {}, { update: [saved] });
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
@@ -52,6 +54,7 @@ export default function AccountSettings() {
 
   function handleSave() {
     setSaved(state => state + 1);
+    setMessage('Saved successfully.');
     handleClose();
   }
 
@@ -97,6 +100,7 @@ export default function AccountSettings() {
           />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }
diff --git a/components/settings/ProfileSettings.js b/components/settings/ProfileSettings.js
index 1aac00af..3c873d73 100644
--- a/components/settings/ProfileSettings.js
+++ b/components/settings/ProfileSettings.js
@@ -5,12 +5,19 @@ import Button from 'components/common/Button';
 import ChangePasswordForm from '../forms/ChangePasswordForm';
 import Modal from 'components/common/Modal';
 import Dots from 'assets/ellipsis-h.svg';
+import Toast from '../common/Toast';
 
 export default function ProfileSettings() {
   const user = useSelector(state => state.user);
   const [changePassword, setChangePassword] = useState(false);
+  const [message, setMessage] = useState();
   const { user_id } = user;
 
+  function handleSave() {
+    setChangePassword(false);
+    setMessage('Saved successfully.');
+  }
+
   return (
     <>
       <PageHeader>
@@ -27,11 +34,12 @@ export default function ProfileSettings() {
         <Modal title="Change password">
           <ChangePasswordForm
             values={{ user_id }}
-            onSave={() => setChangePassword(false)}
+            onSave={handleSave}
             onClose={() => setChangePassword(false)}
           />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index a08b61f6..0b6d9a88 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -17,6 +17,7 @@ import Code from 'assets/code.svg';
 import Link from 'assets/link.svg';
 import styles from './WebsiteSettings.module.css';
 import useFetch from '../../hooks/useFetch';
+import Toast from '../common/Toast';
 
 export default function WebsiteSettings() {
   const [editWebsite, setEditWebsite] = useState();
@@ -25,6 +26,7 @@ export default function WebsiteSettings() {
   const [showCode, setShowCode] = useState();
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
+  const [message, setMessage] = useState();
   const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
 
   const Buttons = row => (
@@ -66,6 +68,7 @@ export default function WebsiteSettings() {
 
   function handleSave() {
     setSaved(state => state + 1);
+    setMessage('Saved successfully.');
     handleClose();
   }
 
@@ -127,6 +130,7 @@ export default function WebsiteSettings() {
           <ShareUrlForm values={showUrl} onClose={handleClose} />
         </Modal>
       )}
+      {message && <Toast message={message} onClose={() => setMessage(null)} />}
     </>
   );
 }

From cebd3fd924af9bd7472639c337e9c65035b33f74 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 20:25:31 -0700
Subject: [PATCH 6/7] Allow alternate host url in tracker.

---
 lib/url.js       | 4 ++--
 package.json     | 2 +-
 tracker/index.js | 8 ++++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/url.js b/lib/url.js
index e29243fb..0eb4a04a 100644
--- a/lib/url.js
+++ b/lib/url.js
@@ -1,11 +1,11 @@
 export function removeTrailingSlash(url) {
-  return url.length > 1 && url.endsWith('/') ? url.slice(0, -1) : url;
+  return url && url.length > 1 && url.endsWith('/') ? url.slice(0, -1) : url;
 }
 
 export function getDomainName(str) {
   try {
     return new URL(str).hostname;
-  } catch {
+  } catch (e) {
     return str;
   }
 }
diff --git a/package.json b/package.json
index 80bf5f9c..a6cca6bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/tracker/index.js b/tracker/index.js
index a30a0220..f0ad78cd 100644
--- a/tracker/index.js
+++ b/tracker/index.js
@@ -1,6 +1,7 @@
 import 'promise-polyfill/src/polyfill';
 import 'unfetch/polyfill';
 import { post, hook, doNotTrack } from '../lib/web';
+import { removeTrailingSlash } from '../lib/url';
 
 (window => {
   const {
@@ -17,7 +18,10 @@ import { post, hook, doNotTrack } from '../lib/web';
   if (!script || (__DNT__ && doNotTrack())) return;
 
   const website = script.getAttribute('data-website-id');
-  const hostUrl = new URL(script.src).href.split('/').slice(0, -1).join('/');
+  const hostUrl = script.getAttribute('data-host-url');
+  const root = hostUrl
+    ? removeTrailingSlash(hostUrl)
+    : new URL(script.src).href.split('/').slice(0, -1).join('/');
   const screen = `${width}x${height}`;
   const listeners = [];
 
@@ -42,7 +46,7 @@ import { post, hook, doNotTrack } from '../lib/web';
       });
     }
 
-    return post(`${hostUrl}/api/collect`, {
+    return post(`${root}/api/collect`, {
       type,
       payload,
     });

From cb48acde552092a8263066bc315a458847951857 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 31 Aug 2020 21:11:53 -0700
Subject: [PATCH 7/7] Error handling for queries.

---
 components/metrics/MetricCard.js  |  2 +-
 lib/queries.js                    | 10 +++++-----
 pages/api/website/[id]/metrics.js |  7 +++++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
index ad6c62eb..6209509c 100644
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@@ -4,7 +4,7 @@ import { formatNumber } from '../../lib/format';
 import styles from './MetricCard.module.css';
 
 const MetricCard = ({ value = 0, label, format = formatNumber }) => {
-  const props = useSpring({ x: value, from: { x: 0 } });
+  const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
 
   return (
     <div className={styles.card}>
diff --git a/lib/queries.js b/lib/queries.js
index d76cdaff..204b545b 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -299,7 +299,7 @@ export function getMetrics(website_id, start_at, end_at) {
     );
   }
 
-  return Promise.resolve({});
+  return Promise.reject(new Error('Unknown database.'));
 }
 
 export function getPageviews(
@@ -346,7 +346,7 @@ export function getPageviews(
     );
   }
 
-  return Promise.resolve([]);
+  return Promise.reject(new Error('Unknown database.'));
 }
 
 export function getRankings(website_id, start_at, end_at, type, table, domain) {
@@ -388,7 +388,7 @@ export function getRankings(website_id, start_at, end_at, type, table, domain) {
     );
   }
 
-  return Promise.resolve([]);
+  return Promise.reject(new Error('Unknown database.'));
 }
 
 export function getActiveVisitors(website_id) {
@@ -421,7 +421,7 @@ export function getActiveVisitors(website_id) {
     );
   }
 
-  return Promise.resolve([]);
+  return Promise.reject(new Error('Unknown database.'));
 }
 
 export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit = 'day') {
@@ -465,5 +465,5 @@ export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit =
     );
   }
 
-  return Promise.resolve([]);
+  return Promise.reject(new Error('Unknown database.'));
 }
diff --git a/pages/api/website/[id]/metrics.js b/pages/api/website/[id]/metrics.js
index 82ab393e..4b0d71e1 100644
--- a/pages/api/website/[id]/metrics.js
+++ b/pages/api/website/[id]/metrics.js
@@ -3,11 +3,14 @@ import { ok } from 'lib/response';
 
 export default async (req, res) => {
   const { id, start_at, end_at } = req.query;
+  const websiteId = +id;
+  const startDate = new Date(+start_at);
+  const endDate = new Date(+end_at);
 
-  const metrics = await getMetrics(+id, new Date(+start_at), new Date(+end_at));
+  const metrics = await getMetrics(websiteId, startDate, endDate);
 
   const stats = Object.keys(metrics[0]).reduce((obj, key) => {
-    obj[key] = +metrics[0][key];
+    obj[key] = Number(metrics[0][key]) || 0;
     return obj;
   }, {});