Moved files around. Updated test page.

2024-11-26 12:29:05 +01:00 · 2020-09-27 00:51:29 -07:00 · 2020-09-27 00:51:29 -07:00 · 6bb34cd3a5
commit 6bb34cd3a5
parent 890b209527
19 changed files with 136 additions and 69 deletions
--- 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 && (
--- 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;
 }
--- 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>;
 }
--- 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;
 }
--- 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>
  );
 }

--- 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 {
--- a/components/settings/Settings.js
+++ b/components/settings/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';

--- a/components/pages/Test.js
+++ 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>
+  );
+}
--- a/components/pages/Test.module.css
+++ b/components/pages/Test.module.css
@ -0,0 +1,5 @@
+.test {
+  border: 1px solid var(--gray200);
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+}
--- a/components/pages/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';

--- a/components/pages/WebsiteDetails.module.css
+++ b/components/pages/WebsiteDetails.module.css
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
--- a/components/pages/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 {
--- 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",
--- 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() {
--- 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() {
--- 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() {
--- 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>
  );
 }
--- 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() {