Added error message component. Update fetch hook.

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 (
+    <div className={styles.error}>
+      <Icon icon={<Exclamation />} className={styles.icon} size="large" />
+      <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
+    </div>
+  );
+}

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;
+}

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 (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {!data ? (
-        <Loading />
-      ) : (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}

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 (
     <div className={classNames(styles.container, className)}>
-      {!data && <Loading />}
-      {data && (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>

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({
       </div>
       <div className="row">
         <div className="col">
+          {error && <ErrorMessage />}
           <PageviewsChart
             websiteId={websiteId}
             data={{ pageviews, uniques }}