From e3093761507fcbef3b45adc8157c02f59c51024b Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 10 Aug 2020 19:54:03 -0700
Subject: [PATCH] Empty placeholder component. CSS fixes.

---
 components/WebsiteList.js                     | 12 +++++++
 components/WebsiteSettings.js                 | 12 ++++++-
 components/common/EmptyPlaceholder.js         | 14 ++++++++
 components/common/EmptyPlaceholder.module.css |  7 ++++
 components/common/Menu.js                     | 34 ++++++++++---------
 components/common/Table.js                    |  6 +++-
 components/common/Table.module.css            | 12 +++++++
 styles/index.css                              |  7 +++-
 8 files changed, 85 insertions(+), 19 deletions(-)
 create mode 100644 components/common/EmptyPlaceholder.js
 create mode 100644 components/common/EmptyPlaceholder.module.css

diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 49cbfa9f..9ff80756 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -9,6 +9,7 @@ import Button from './common/Button';
 import PageHeader from './layout/PageHeader';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
+import EmptyPlaceholder from './common/EmptyPlaceholder';
 
 export default function WebsiteList() {
   const [data, setData] = useState();
@@ -22,6 +23,10 @@ export default function WebsiteList() {
     loadData();
   }, []);
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <Page>
       {data?.map(({ website_id, name }) => (
@@ -51,6 +56,13 @@ export default function WebsiteList() {
           <WebsiteChart key={website_id} title={name} websiteId={website_id} />
         </div>
       ))}
+      {data.length === 0 && (
+        <EmptyPlaceholder msg={"You don't have any websites configured."}>
+          <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
+            <div>Go to settings</div>
+          </Button>
+        </EmptyPlaceholder>
+      )}
     </Page>
   );
 }
diff --git a/components/WebsiteSettings.js b/components/WebsiteSettings.js
index 71ca472c..6235ee24 100644
--- a/components/WebsiteSettings.js
+++ b/components/WebsiteSettings.js
@@ -12,6 +12,8 @@ import WebsiteEditForm from './forms/WebsiteEditForm';
 import DeleteForm from './forms/DeleteForm';
 import WebsiteCodeForm from './forms/WebsiteCodeForm';
 import styles from './WebsiteSettings.module.css';
+import EmptyPlaceholder from './common/EmptyPlaceholder';
+import Arrow from '../assets/arrow-right.svg';
 
 export default function WebsiteSettings() {
   const [data, setData] = useState();
@@ -67,6 +69,14 @@ export default function WebsiteSettings() {
     return null;
   }
 
+  const empty = (
+    <EmptyPlaceholder msg={"You don't have any websites configured."}>
+      <Button icon={<Plus />} size="medium" onClick={() => setAddWebsite(true)}>
+        <div>Add website</div>
+      </Button>
+    </EmptyPlaceholder>
+  );
+
   return (
     <>
       <PageHeader>
@@ -75,7 +85,7 @@ export default function WebsiteSettings() {
           <div>Add website</div>
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data} />
+      <Table columns={columns} rows={data} empty={empty} />
       {editWebsite && (
         <Modal title="Edit website">
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />
diff --git a/components/common/EmptyPlaceholder.js b/components/common/EmptyPlaceholder.js
new file mode 100644
index 00000000..a7b0720c
--- /dev/null
+++ b/components/common/EmptyPlaceholder.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import Icon from 'components/common/Icon';
+import Logo from 'assets/logo.svg';
+import styles from './EmptyPlaceholder.module.css';
+
+export default function EmptyPlaceholder({ msg, children }) {
+  return (
+    <div className={styles.placeholder}>
+      <Icon icon={<Logo />} size="xlarge" />
+      <h2>{msg}</h2>
+      {children}
+    </div>
+  );
+}
diff --git a/components/common/EmptyPlaceholder.module.css b/components/common/EmptyPlaceholder.module.css
new file mode 100644
index 00000000..7d2a93a5
--- /dev/null
+++ b/components/common/EmptyPlaceholder.module.css
@@ -0,0 +1,7 @@
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+}
diff --git a/components/common/Menu.js b/components/common/Menu.js
index d97c4754..4cb5a885 100644
--- a/components/common/Menu.js
+++ b/components/common/Menu.js
@@ -22,23 +22,25 @@ export default function Menu({
         [styles.right]: align === 'right',
       })}
     >
-      {options.map(option => {
-        const { label, value, className: customClassName, render } = option;
+      {options
+        .filter(({ hidden }) => !hidden)
+        .map(option => {
+          const { label, value, className: customClassName, render } = option;
 
-        return render ? (
-          render(option)
-        ) : (
-          <div
-            key={value}
-            className={classNames(styles.option, optionClassName, customClassName, {
-              [selectedClassName]: selectedOption === value,
-            })}
-            onClick={e => onSelect(value, e)}
-          >
-            {label}
-          </div>
-        );
-      })}
+          return render ? (
+            render(option)
+          ) : (
+            <div
+              key={value}
+              className={classNames(styles.option, optionClassName, customClassName, {
+                [selectedClassName]: selectedOption === value,
+              })}
+              onClick={e => onSelect(value, e)}
+            >
+              {label}
+            </div>
+          );
+        })}
     </div>
   );
 }
diff --git a/components/common/Table.js b/components/common/Table.js
index 380d5b66..0331c5bc 100644
--- a/components/common/Table.js
+++ b/components/common/Table.js
@@ -2,7 +2,11 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Table.module.css';
 
-export default function Table({ columns, rows }) {
+export default function Table({ columns, rows, empty }) {
+  if (empty && rows.length === 0) {
+    return empty;
+  }
+
   return (
     <div className={styles.table}>
       <div className={styles.header}>
diff --git a/components/common/Table.module.css b/components/common/Table.module.css
index 609297a7..ca921f12 100644
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@@ -1,6 +1,7 @@
 .table {
   display: flex;
   flex-direction: column;
+  flex: 1;
 }
 
 .header {
@@ -16,8 +17,19 @@
 }
 
 .body {
+  position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
+}
+
+.body:empty:before {
+  content: 'No data available';
+  color: var(--gray500);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .row {
diff --git a/styles/index.css b/styles/index.css
index a6dfe968..778616c7 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -54,9 +54,14 @@ textarea {
   line-height: 1.8;
   border: 1px solid var(--gray500);
   border-radius: 4px;
-  width: 100%;
   outline: none;
   resize: none;
+  flex: 1;
+}
+
+label {
+  flex: 1;
+  margin-right: 20px;
 }
 
 dt {