Updated test console. Refactored fetch for tracker.

components/pages/TestConsole.js

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import classNames from 'classnames';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -9,36 +8,37 @@ import DropDown from 'components/common/DropDown';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import EventsChart from 'components/metrics/EventsChart';
 import Button from 'components/common/Button';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import Icon from 'components/common/Icon';
 import useFetch from 'hooks/useFetch';
-import useUser from 'hooks/useUser';
-import ChevronDown from 'assets/chevron-down.svg';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
-  const { user } = useUser();
-  const [website, setWebsite] = useState();
-  const [show, setShow] = useState(true);
-  const { basePath } = useRouter();
   const { data } = useFetch('/websites');
+  const router = useRouter();
+  const {
+    basePath,
+    query: { id },
+  } = router;
+  const websiteId = id?.[0];
 
-  if (!data || !user?.is_admin) {
+  if (!data) {
     return null;
   }
 
   const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+  const website = data.find(({ website_id }) => website_id === +websiteId);
   const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
 
+  console.log({ websiteId, data, options, website });
+
   function handleSelect(value) {
-    setWebsite(data.find(({ website_id }) => website_id === value));
+    router.push(`/console/${value}`);
   }
 
   function handleClick() {
-    window.umami('event (default)');
+    window.umami('umami-default');
     window.umami.trackView('/page-view', 'https://www.google.com');
-    window.umami.trackEvent('event (custom)', null, 'custom-type');
-    window.umami.trackEvent('event (custom)', { test: 'test-data' }, 'custom-data-type');
+    window.umami.trackEvent('track-event-no-data');
+    window.umami.trackEvent('track-event-with-data', { test: 'test-data', time: Date.now() });
   }
 
   return (
@@ -62,54 +62,47 @@ export default function TestConsole() {
           onChange={handleSelect}
         />
       </PageHeader>
-      {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
-      {selectedValue && (
+      {website && (
         <>
-          <div>
-            <Icon
-              icon={<ChevronDown />}
-              className={classNames({ [styles.hidden]: !show })}
-              onClick={() => setShow(!show)}
-            />
-          </div>
-          {show && (
-            <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>
-                  <Link href={`https://www.google.com`}>
-                    <a className="umami--click--external-link">external link</a>
-                  </Link>
-                </div>
+          <div className={classNames(styles.test, 'row')}>
+            <div className="col-4">
+              <PageHeader>Page links</PageHeader>
+              <div>
+                <Link href={`/console/${websiteId}?page=1`}>
+                  <a>page one</a>
+                </Link>
               </div>
-              <div className="col-4">
-                <PageHeader>CSS events</PageHeader>
-                <Button
-                  id="primary-button"
-                  className="umami--click--primary-button"
-                  variant="action"
-                >
-                  Send event
-                </Button>
+              <div>
+                <Link href={`/console/${websiteId}?page=2`}>
+                  <a>page two</a>
+                </Link>
               </div>
-              <div className="col-4">
-                <PageHeader>Javascript events</PageHeader>
-                <Button id="manual-button" variant="action" onClick={handleClick}>
-                  Run script
-                </Button>
+              <div>
+                <Link href={`https://www.google.com`}>
+                  <a className="umami--click--external-link-direct">external link (direct)</a>
+                </Link>
+              </div>
+              <div>
+                <Link href={`https://www.google.com`}>
+                  <a className="umami--click--external-link-tab" target="_blank">
+                    external link (tab)
+                  </a>
+                </Link>
               </div>
             </div>
-          )}
+            <div className="col-4">
+              <PageHeader>CSS events</PageHeader>
+              <Button id="primary-button" className="umami--click--button-click" 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