Added error message component. Update fetch hook.

This commit is contained in:
Mike Cao 2020-10-03 22:36:51 -07:00
parent 4cafa68e23
commit ca8a6fe049
8 changed files with 50 additions and 11 deletions

View file

@ -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>