diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js index 412aaf29..8c0d29b9 100644 --- a/components/pages/TestConsole.js +++ b/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 PageHeader from '../layout/PageHeader'; -import useFetch from '../../hooks/useFetch'; -import DropDown from '../common/DropDown'; +import Page from 'components/layout/Page'; +import PageHeader from 'components/layout/PageHeader'; +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 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 && } {selectedValue && ( <> -
-
- Page links -
- - page one - -
-
- - page two - -
-
-
- CSS events - -
-
- Javascript events - -
+
+ } + className={classNames({ [styles.hidden]: !show })} + onClick={() => setShow(!show)} + />
+ {show && ( +
+
+ Page links +
+ + page one + +
+
+ + page two + +
+
+
+ CSS events + +
+
+ Javascript events + +
+
+ )}
{ + const elements = node.querySelectorAll(eventSelect); + Array.prototype.forEach.call(elements, addEvent); + }; + const addEvent = element => { - element.className.split(' ').forEach(className => { - if (!eventClass.test(className)) return; + element.className && + element.className.split(' ').forEach(className => { + if (!eventClass.test(className)) return; - const [, type, value] = className.split('--'); - const listener = listeners[className] - ? listeners[className] - : (listeners[className] = () => trackEvent(value, type)); + const [, type, value] = className.split('--'); + const listener = listeners[className] + ? listeners[className] + : (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); - Array.prototype.forEach.call(elements, addEvent); + addEvents(element); }); }; @@ -166,19 +171,12 @@ import { removeTrailingSlash } from '../lib/url'; history.replaceState = hook(history, 'replaceState', handlePush); const update = () => { - switch (document.readyState) { - /* DOM rendered, add event listeners */ - case 'interactive': { - const events = document.querySelectorAll(eventSelect); - Array.prototype.forEach.call(events, addEvent); - const observer = new MutationObserver(monitorMutate); - observer.observe(document, { childList: true, subtree: true }); - break; - } - /* Page loaded, track our view */ - case 'complete': - trackView(); - break; + if (document.readyState === 'complete') { + addEvents(document); + trackView(); + + const observer = new MutationObserver(monitorMutate); + observer.observe(document, { childList: true, subtree: true }); } }; document.addEventListener('readystatechange', update, true);