From ca8a6fe049c1b0adb599d0ee68bcecdfe22a8aaf Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 3 Oct 2020 22:36:51 -0700 Subject: [PATCH] Added error message component. Update fetch hook. --- assets/exclamation-triangle.svg | 1 + components/common/ErrorMessage.js | 14 ++++++++++++++ components/common/ErrorMessage.module.css | 13 +++++++++++++ components/metrics/MetricsBar.js | 9 +++++---- components/metrics/MetricsTable.js | 10 ++++++---- components/metrics/WebsiteChart.js | 4 +++- hooks/useFetch.js | 8 +++++++- package.json | 2 +- 8 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 assets/exclamation-triangle.svg create mode 100644 components/common/ErrorMessage.js create mode 100644 components/common/ErrorMessage.module.css diff --git a/assets/exclamation-triangle.svg b/assets/exclamation-triangle.svg new file mode 100644 index 00000000..46bef5bc --- /dev/null +++ b/assets/exclamation-triangle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/common/ErrorMessage.js b/components/common/ErrorMessage.js new file mode 100644 index 00000000..5747f226 --- /dev/null +++ b/components/common/ErrorMessage.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import Icon from './Icon'; +import Exclamation from 'assets/exclamation-triangle.svg'; +import styles from './ErrorMessage.module.css'; + +export default function ErrorMessage() { + return ( +
+ } className={styles.icon} size="large" /> + +
+ ); +} diff --git a/components/common/ErrorMessage.module.css b/components/common/ErrorMessage.module.css new file mode 100644 index 00000000..232b5f84 --- /dev/null +++ b/components/common/ErrorMessage.module.css @@ -0,0 +1,13 @@ +.error { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: auto; + display: flex; + z-index: 1; +} + +.icon { + margin-right: 10px; +} diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js index f5d888d4..b7a47a10 100644 --- a/components/metrics/MetricsBar.js +++ b/components/metrics/MetricsBar.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; import Loading from 'components/common/Loading'; +import ErrorMessage from 'components/common/ErrorMessage'; import useFetch from 'hooks/useFetch'; import useDateRange from 'hooks/useDateRange'; import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format'; @@ -17,7 +18,7 @@ export default function MetricsBar({ websiteId, token, className }) { query: { url }, } = usePageQuery(); - const { data } = useFetch( + const { data, error, loading } = useFetch( `/api/website/${websiteId}/metrics`, { start_at: +startDate, @@ -40,9 +41,9 @@ export default function MetricsBar({ websiteId, token, className }) { return (
- {!data ? ( - - ) : ( + {!data && loading && } + {error && } + {data && !error && ( <> } diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js index 3ac8a395..6850a3bf 100644 --- a/components/metrics/MetricsTable.js +++ b/components/metrics/MetricsTable.js @@ -13,6 +13,7 @@ import { formatNumber, formatLongNumber } from 'lib/format'; import useDateRange from 'hooks/useDateRange'; import usePageQuery from 'hooks/usePageQuery'; import styles from './MetricsTable.module.css'; +import ErrorMessage from '../common/ErrorMessage'; export default function MetricsTable({ websiteId, @@ -36,7 +37,7 @@ export default function MetricsTable({ query: { url }, } = usePageQuery(); - const { data } = useFetch( + const { data, loading, error } = useFetch( `/api/website/${websiteId}/rankings`, { type, @@ -61,7 +62,7 @@ export default function MetricsTable({ return items; } return []; - }, [data, dataFilter, filterOptions]); + }, [data, error, dataFilter, filterOptions]); const handleSetFormat = () => setFormat(state => !state); @@ -86,8 +87,9 @@ export default function MetricsTable({ return (
- {!data && } - {data && ( + {!data && loading && } + {error && } + {data && !error && ( <>
{title}
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js index ea86ad3e..6a07afe5 100644 --- a/components/metrics/WebsiteChart.js +++ b/components/metrics/WebsiteChart.js @@ -13,6 +13,7 @@ import usePageQuery from 'hooks/usePageQuery'; import { getDateArray, getDateLength } from 'lib/date'; import Times from 'assets/times.svg'; import styles from './WebsiteChart.module.css'; +import ErrorMessage from '../common/ErrorMessage'; export default function WebsiteChart({ websiteId, @@ -31,7 +32,7 @@ export default function WebsiteChart({ query: { url }, } = usePageQuery(); - const { data, loading } = useFetch( + const { data, loading, error } = useFetch( `/api/website/${websiteId}/pageviews`, { start_at: +startDate, @@ -83,6 +84,7 @@ export default function WebsiteChart({
+ {error && } = 400) { + setError(data); + setData(null); + } else { + setData(data); + } + setStatus(status); onDataLoad(data); } catch (e) { diff --git a/package.json b/package.json index f5fe6909..0d602350 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "umami", - "version": "0.76.0", + "version": "0.77.0", "description": "A simple, fast, website analytics alternative to Google Analytics. ", "author": "Mike Cao ", "license": "MIT",