From cb14b8bbdafd4ba25dfb6862b2862de733035bb4 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 10 Sep 2020 22:21:38 -0700
Subject: [PATCH] Fix more button. Added NoData component.

---
 components/common/NoData.js                | 12 ++++++++++++
 components/common/NoData.module.css        |  7 +++++++
 components/common/Table.js                 |  8 ++------
 components/common/Table.module.css         |  8 --------
 components/metrics/MetricsTable.js         | 19 ++++++-------------
 components/metrics/MetricsTable.module.css |  8 --------
 package.json                               |  2 +-
 7 files changed, 28 insertions(+), 36 deletions(-)
 create mode 100644 components/common/NoData.js
 create mode 100644 components/common/NoData.module.css

diff --git a/components/common/NoData.js b/components/common/NoData.js
new file mode 100644
index 00000000..bb27c18f
--- /dev/null
+++ b/components/common/NoData.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import styles from './NoData.module.css';
+
+export default function NoData({ className }) {
+  return (
+    <div className={classNames(styles.container, className)}>
+      <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
+    </div>
+  );
+}
diff --git a/components/common/NoData.module.css b/components/common/NoData.module.css
new file mode 100644
index 00000000..d1c712eb
--- /dev/null
+++ b/components/common/NoData.module.css
@@ -0,0 +1,7 @@
+.container {
+  color: var(--gray500);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
diff --git a/components/common/Table.js b/components/common/Table.js
index d2c87977..a8a42b78 100644
--- a/components/common/Table.js
+++ b/components/common/Table.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import NoData from 'components/common/NoData';
 import styles from './Table.module.css';
-import { FormattedMessage } from 'react-intl';
 
 export default function Table({ columns, rows, empty }) {
   if (empty && rows.length === 0) {
@@ -22,11 +22,7 @@ export default function Table({ columns, rows, empty }) {
         ))}
       </div>
       <div className={styles.body}>
-        {rows.length === 0 && (
-          <div className={styles.empty}>
-            <FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
-          </div>
-        )}
+        {rows.length === 0 && <NoData />}
         {rows.map((row, rowIndex) => (
           <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (
diff --git a/components/common/Table.module.css b/components/common/Table.module.css
index ada9e195..4d7cd24b 100644
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@@ -19,14 +19,6 @@
   flex-direction: column;
 }
 
-.empty {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .row {
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index e86adf48..05756614 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,16 +1,17 @@
 import React, { useState, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 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 NoData from 'components/common/NoData';
 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 { FormattedMessage } from 'react-intl';
 
 export default function MetricsTable({
   websiteId,
@@ -77,7 +78,8 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {data ? (
+      {!data && <Loading />}
+      {data && (
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>
@@ -87,14 +89,7 @@ export default function MetricsTable({
             </div>
           </div>
           <div className={styles.body}>
-            {rankings?.length === 0 && (
-              <div className={styles.empty}>
-                <FormattedMessage
-                  id="message.no-data-available"
-                  defaultMessage="No data available."
-                />
-              </div>
-            )}
+            {rankings?.length === 0 && <NoData />}
             {limit
               ? rankings.map(row => getRow(row))
               : rankings.length > 0 && (
@@ -104,7 +99,7 @@ export default function MetricsTable({
                 )}
           </div>
           <div className={styles.footer}>
-            {limit && rankings.length > limit && (
+            {limit && data.length > limit && (
               <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
                 <div>
                   <FormattedMessage id="button.more" defaultMessage="More" />
@@ -113,8 +108,6 @@ export default function MetricsTable({
             )}
           </div>
         </>
-      ) : (
-        <Loading />
       )}
     </div>
   );
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index 697c820a..65680634 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -95,14 +95,6 @@
   overflow: hidden;
 }
 
-.empty {
-  color: var(--gray500);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .footer {
   display: flex;
   justify-content: center;
diff --git a/package.json b/package.json
index 71f90cae..eb83f1c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",