Initial commit

Created from https://vercel.com/new
2021-12-08 18:25:42 +00:00 · 2021-12-08 18:25:42 +00:00 · 4047a7ec23
commit 4047a7ec23
378 changed files with 29334 additions and 0 deletions
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import styles from './TestConsole.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 TestConsole() {
+  const user = useSelector(state => state.user);
+  const [website, setWebsite] = useState();
+  const { basePath } = useRouter();
+  const { data } = useFetch('/api/websites');
+
+  if (!data || !user?.is_admin) {
+    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={`${basePath}/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}
+                domain={website.domain}
+                showLink
+              />
+              <PageHeader>Events</PageHeader>
+              <EventsChart websiteId={website.website_id} />
+            </div>
+          </div>
+        </>
+      )}
+    </Page>
+  );
+}