Lint fix.

components/pages/TestConsole.js

@@ -4,19 +4,22 @@ 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 Page from 'components/layout/Page';
-import PageHeader from '../layout/PageHeader';
+import PageHeader from 'components/layout/PageHeader';
-import useFetch from '../../hooks/useFetch';
+import DropDown from 'components/common/DropDown';
-import DropDown from '../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 ChevronDown from 'assets/chevron-down.svg';
 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 [show, setShow] = useState(true);
   const { basePath } = useRouter();
   const { data } = useFetch('/api/websites');
 
@@ -55,33 +58,46 @@ export default function TestConsole() {
       {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
       {selectedValue && (
         <>
-          <div className={classNames(styles.test, 'row')}>
+          <div>
-            <div className="col-4">
+            <Icon
-              <PageHeader>Page links</PageHeader>
+              icon={<ChevronDown />}
-              <div>
+              className={classNames({ [styles.hidden]: !show })}
-                <Link href={`?page=1`}>
+              onClick={() => setShow(!show)}
-                  <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>
+          {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>
+              <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

components/pages/TestConsole.module.css

@@ -3,3 +3,7 @@
   border-radius: 5px;
   padding: 0 20px 20px 20px;
 }
+
+.hidden {
+  transform: rotate(-90deg);
+}

tracker/index.js

@@ -108,25 +108,30 @@ import { removeTrailingSlash } from '../lib/url';
 
   /* Handle events */
 
+  const addEvents = node => {
+    const elements = node.querySelectorAll(eventSelect);
+    Array.prototype.forEach.call(elements, addEvent);
+  };
+
   const addEvent = element => {
-    element.className.split(' ').forEach(className => {
+    element.className &&
-      if (!eventClass.test(className)) return;
+      element.className.split(' ').forEach(className => {
+        if (!eventClass.test(className)) return;
 
-      const [, type, value] = className.split('--');
+        const [, type, value] = className.split('--');
-      const listener = listeners[className]
+        const listener = listeners[className]
-        ? listeners[className]
+          ? listeners[className]
-        : (listeners[className] = () => trackEvent(value, type));
+          : (listeners[className] = () => trackEvent(value, type));
 
-      element.addEventListener(type, listener, true);
+        element.addEventListener(type, listener, true);
-    });
+      });
   };
 
   const monitorMutate = mutations => {
     mutations.forEach(mutation => {
       const element = mutation.target;
       addEvent(element);
-      const elements = element.querySelectorAll(eventSelect);
+      addEvents(element);
-      Array.prototype.forEach.call(elements, addEvent);
     });
   };
 
@@ -166,19 +171,12 @@ import { removeTrailingSlash } from '../lib/url';
     history.replaceState = hook(history, 'replaceState', handlePush);
 
     const update = () => {
-      switch (document.readyState) {
+      if (document.readyState === 'complete') {
-        /* DOM rendered, add event listeners */
+        addEvents(document);
-        case 'interactive': {
+        trackView();
-          const events = document.querySelectorAll(eventSelect);
+
-          Array.prototype.forEach.call(events, addEvent);
+        const observer = new MutationObserver(monitorMutate);
-          const observer = new MutationObserver(monitorMutate);
+        observer.observe(document, { childList: true, subtree: true });
-          observer.observe(document, { childList: true, subtree: true });
-          break;
-        }
-        /* Page loaded, track our view */
-        case 'complete':
-          trackView();
-          break;
       }
     };
     document.addEventListener('readystatechange', update, true);