Refactor components. Add refresh button.

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