From 6bb34cd3a51fa783d2e024e5aa5883e700fc2a09 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 27 Sep 2020 00:51:29 -0700
Subject: [PATCH] Moved files around. Updated test page.

---
 components/common/DropDown.js                 |  2 +-
 components/common/Dropdown.module.css         |  4 +
 components/layout/Page.js                     |  5 +-
 components/layout/PageHeader.module.css       |  1 +
 components/metrics/WebsiteChart.js            |  4 +-
 components/metrics/WebsiteChart.module.css    |  1 +
 components/{settings => pages}/Settings.js    |  6 +-
 components/pages/Test.js                      | 92 +++++++++++++++++++
 components/pages/Test.module.css              |  5 +
 components/{ => pages}/WebsiteDetails.js      | 16 ++--
 .../{ => pages}/WebsiteDetails.module.css     |  0
 components/{ => pages}/WebsiteList.js         |  0
 components/{ => pages}/WebsiteList.module.css |  1 +
 package.json                                  |  2 +-
 pages/dashboard/[[...id]].js                  |  2 +-
 pages/settings/index.js                       |  2 +-
 pages/share/[...id].js                        |  2 +-
 pages/test.js                                 | 58 ++----------
 pages/website/[...id].js                      |  2 +-
 19 files changed, 136 insertions(+), 69 deletions(-)
 rename components/{settings => pages}/Settings.js (87%)
 create mode 100644 components/pages/Test.js
 create mode 100644 components/pages/Test.module.css
 rename components/{ => pages}/WebsiteDetails.js (92%)
 rename components/{ => pages}/WebsiteDetails.module.css (100%)
 rename components/{ => pages}/WebsiteList.js (100%)
 rename components/{ => pages}/WebsiteList.module.css (87%)

diff --git a/components/common/DropDown.js b/components/common/DropDown.js
index b6b2357b..d240fbd6 100644
--- a/components/common/DropDown.js
+++ b/components/common/DropDown.js
@@ -37,7 +37,7 @@ export default function DropDown({
   return (
     <div ref={ref} className={classNames(styles.dropdown, className)} onClick={handleShowMenu}>
       <div className={styles.value}>
-        {options.find(e => e.value === value)?.label || value}
+        <div className={styles.text}>{options.find(e => e.value === value)?.label || value}</div>
         <Icon icon={<Chevron />} className={styles.icon} size="small" />
       </div>
       {showMenu && (
diff --git a/components/common/Dropdown.module.css b/components/common/Dropdown.module.css
index 4b94f58f..9738b007 100644
--- a/components/common/Dropdown.module.css
+++ b/components/common/Dropdown.module.css
@@ -19,6 +19,10 @@
   min-width: 160px;
 }
 
+.text {
+  flex: 1;
+}
+
 .icon {
   padding-left: 20px;
 }
diff --git a/components/layout/Page.js b/components/layout/Page.js
index c9a928c5..28492ddf 100644
--- a/components/layout/Page.js
+++ b/components/layout/Page.js
@@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './Page.module.css';
 
-export default function Page({ children }) {
-  return <div className={styles.page}>{children}</div>;
+export default function Page({ className, children }) {
+  return <div className={classNames(styles.page, className)}>{children}</div>;
 }
diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
index 74f7d1a2..263bd5b7 100644
--- a/components/layout/PageHeader.module.css
+++ b/components/layout/PageHeader.module.css
@@ -4,4 +4,5 @@
   align-items: center;
   align-content: center;
   min-height: 80px;
+  align-self: stretch;
 }
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 99c03951..ea86ad3e 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -59,7 +59,7 @@ export default function WebsiteChart({
   }
 
   return (
-    <>
+    <div className={styles.container}>
       <WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
@@ -92,7 +92,7 @@ export default function WebsiteChart({
           />
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
index 29f94670..0e947aea 100644
--- a/components/metrics/WebsiteChart.module.css
+++ b/components/metrics/WebsiteChart.module.css
@@ -1,6 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  align-self: stretch;
 }
 
 .title {
diff --git a/components/settings/Settings.js b/components/pages/Settings.js
similarity index 87%
rename from components/settings/Settings.js
rename to components/pages/Settings.js
index be9feb35..c6e39f2a 100644
--- a/components/settings/Settings.js
+++ b/components/pages/Settings.js
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
-import WebsiteSettings from './WebsiteSettings';
-import AccountSettings from './AccountSettings';
-import ProfileSettings from './ProfileSettings';
+import WebsiteSettings from '../settings/WebsiteSettings';
+import AccountSettings from '../settings/AccountSettings';
+import ProfileSettings from '../settings/ProfileSettings';
 import { useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/components/pages/Test.js b/components/pages/Test.js
new file mode 100644
index 00000000..84efbd67
--- /dev/null
+++ b/components/pages/Test.js
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import Head from 'next/head';
+import Link from 'next/link';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import styles from './Test.module.css';
+import WebsiteChart from '../metrics/WebsiteChart';
+import EventsChart from '../metrics/EventsChart';
+import Button from '../common/Button';
+import EmptyPlaceholder from '../common/EmptyPlaceholder';
+
+export default function Test() {
+  const [website, setWebsite] = useState();
+  const { data } = useFetch('/api/websites');
+
+  if (!data) {
+    return null;
+  }
+
+  const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+  const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
+
+  function handleSelect(value) {
+    setWebsite(data.find(({ website_id }) => website_id === value));
+  }
+
+  function handleClick() {
+    window.umami('event (default)');
+    window.umami.trackView('/page-view', 'https://www.google.com');
+    window.umami.trackEvent('event (custom)', 'custom-type');
+  }
+
+  return (
+    <Page>
+      <Head>
+        {typeof window !== 'undefined' && website && (
+          <script async defer data-website-id={website.website_uuid} src="/umami.js" />
+        )}
+      </Head>
+      <PageHeader>
+        <div>Test Console</div>
+        <DropDown
+          value={selectedValue || 'Select website'}
+          options={options}
+          onChange={handleSelect}
+        />
+      </PageHeader>
+      {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
+      {selectedValue && (
+        <>
+          <div className={classNames(styles.test, 'row')}>
+            <div className="col-4">
+              <PageHeader>Page links</PageHeader>
+              <div>
+                <Link href={`?page=1`}>
+                  <a>page one</a>
+                </Link>
+              </div>
+              <div>
+                <Link href={`?page=2`}>
+                  <a>page two</a>
+                </Link>
+              </div>
+            </div>
+            <div className="col-4">
+              <PageHeader>CSS events</PageHeader>
+              <Button id="primary-button" className="umami--click--primary-button" variant="action">
+                Send event
+              </Button>
+            </div>
+            <div className="col-4">
+              <PageHeader>Javascript events</PageHeader>
+              <Button id="manual-button" variant="action" onClick={handleClick}>
+                Run script
+              </Button>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-12">
+              <WebsiteChart websiteId={website.website_id} title={website.name} showLink />
+              <PageHeader>Events</PageHeader>
+              <EventsChart websiteId={website.website_id} />
+            </div>
+          </div>
+        </>
+      )}
+    </Page>
+  );
+}
diff --git a/components/pages/Test.module.css b/components/pages/Test.module.css
new file mode 100644
index 00000000..78977c55
--- /dev/null
+++ b/components/pages/Test.module.css
@@ -0,0 +1,5 @@
+.test {
+  border: 1px solid var(--gray200);
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+}
diff --git a/components/WebsiteDetails.js b/components/pages/WebsiteDetails.js
similarity index 92%
rename from components/WebsiteDetails.js
rename to components/pages/WebsiteDetails.js
index b38f55de..b4afa396 100644
--- a/components/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -9,14 +9,14 @@ import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
-import PagesTable from './metrics/PagesTable';
-import ReferrersTable from './metrics/ReferrersTable';
-import BrowsersTable from './metrics/BrowsersTable';
-import OSTable from './metrics/OSTable';
-import DevicesTable from './metrics/DevicesTable';
-import CountriesTable from './metrics/CountriesTable';
-import EventsTable from './metrics/EventsTable';
-import EventsChart from './metrics/EventsChart';
+import PagesTable from '../metrics/PagesTable';
+import ReferrersTable from '../metrics/ReferrersTable';
+import BrowsersTable from '../metrics/BrowsersTable';
+import OSTable from '../metrics/OSTable';
+import DevicesTable from '../metrics/DevicesTable';
+import CountriesTable from '../metrics/CountriesTable';
+import EventsTable from '../metrics/EventsTable';
+import EventsChart from '../metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 
diff --git a/components/WebsiteDetails.module.css b/components/pages/WebsiteDetails.module.css
similarity index 100%
rename from components/WebsiteDetails.module.css
rename to components/pages/WebsiteDetails.module.css
diff --git a/components/WebsiteList.js b/components/pages/WebsiteList.js
similarity index 100%
rename from components/WebsiteList.js
rename to components/pages/WebsiteList.js
diff --git a/components/WebsiteList.module.css b/components/pages/WebsiteList.module.css
similarity index 87%
rename from components/WebsiteList.module.css
rename to components/pages/WebsiteList.module.css
index 942b71b2..816c5f36 100644
--- a/components/WebsiteList.module.css
+++ b/components/pages/WebsiteList.module.css
@@ -2,6 +2,7 @@
   padding-bottom: 30px;
   border-bottom: 1px solid var(--gray300);
   margin-bottom: 30px;
+  align-self: stretch;
 }
 
 .website:last-child {
diff --git a/package.json b/package.json
index 114d23ed..aceafdb7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/pages/dashboard/[[...id]].js b/pages/dashboard/[[...id]].js
index 90f08492..d3ce1301 100644
--- a/pages/dashboard/[[...id]].js
+++ b/pages/dashboard/[[...id]].js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteList from 'components/WebsiteList';
+import WebsiteList from 'components/pages/WebsiteList';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DashboardPage() {
diff --git a/pages/settings/index.js b/pages/settings/index.js
index 65eff46e..b4bb2248 100644
--- a/pages/settings/index.js
+++ b/pages/settings/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
-import Settings from 'components/settings/Settings';
+import Settings from 'components/pages/Settings';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function SettingsPage() {
diff --git a/pages/share/[...id].js b/pages/share/[...id].js
index c4fa9a63..85455af4 100644
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteDetails from 'components/WebsiteDetails';
+import WebsiteDetails from 'components/pages/WebsiteDetails';
 import useFetch from 'hooks/useFetch';
 
 export default function SharePage() {
diff --git a/pages/test.js b/pages/test.js
index 820a3187..5534bda3 100644
--- a/pages/test.js
+++ b/pages/test.js
@@ -1,56 +1,18 @@
-import Head from 'next/head';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import React from 'react';
 import Layout from 'components/layout/Layout';
+import Test from 'components/pages/Test';
+import useRequireLogin from 'hooks/useRequireLogin';
 
-export default function Test() {
-  const router = useRouter();
-  const { id } = router.query;
+export default function TestPage() {
+  const { loading } = useRequireLogin();
 
-  if (!id) {
-    return <h1>No id query specified.</h1>;
-  }
-
-  function handleClick() {
-    window.umami('Custom event');
-    window.umami.pageView('/fake', 'https://www.google.com');
-    window.umami.pageEvent('pageEvent', 'custom-type');
+  if (loading) {
+    return null;
   }
 
   return (
-    <>
-      <Head>
-        {typeof window !== 'undefined' && (
-          <script async defer data-website-id={id} src="/umami.js" />
-        )}
-      </Head>
-      <Layout>
-        <p>
-          Here you can test if your umami installation works. Open the network tab in your browser
-          developer console and watch for requests to the url <b>collect</b>. The links below should
-          trigger page views. Clicking on the button should trigger an event.
-        </p>
-        <h2>Page links</h2>
-        <Link href={`?id=${id}&q=1`}>
-          <a>Page One</a>
-        </Link>
-        <br />
-        <Link href={`?id=${id}&q=2`}>
-          <a>Page Two</a>
-        </Link>
-        <h2>Events</h2>
-        <button
-          id="primary-button"
-          className="otherClass umami--click--primary-button align-self-start"
-          type="button"
-        >
-          Button
-        </button>
-        <h2>Manual trigger</h2>
-        <button id="manual-button" type="button" onClick={handleClick}>
-          Button
-        </button>
-      </Layout>
-    </>
+    <Layout>
+      <Test />
+    </Layout>
   );
 }
diff --git a/pages/website/[...id].js b/pages/website/[...id].js
index 0add10aa..90f4f492 100644
--- a/pages/website/[...id].js
+++ b/pages/website/[...id].js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteDetails from 'components/WebsiteDetails';
+import WebsiteDetails from 'components/pages/WebsiteDetails';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DetailsPage() {