undid refactors related to improving debugging

paypal · Oct 9, 2023 · d54b0e3 · d54b0e3
1 parent 81551bc
commit d54b0e3
Show file tree

Hide file tree

Showing 30 changed files with 99 additions and 698 deletions.
diff --git a/src/components/message/Message.js b/src/components/message/Message.js
@@ -9,8 +9,7 @@ import {
     parseObjFromEncoding,
     getRequestDuration,
     getTsCookieFromStorage,
-    getOrCreateDeviceID,
-    MESSAGE_DOM_EVENT
+    getOrCreateDeviceID
 } from '../../utils';
 
 const Message = function ({ markup, meta, parentStyles, warnings }) {
@@ -57,9 +56,9 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
 
     button.setAttribute('type', 'button');
 
-    button.addEventListener(MESSAGE_DOM_EVENT.CLICK, handleClick);
-    button.addEventListener(MESSAGE_DOM_EVENT.MOUSEOVER, handleHover);
-    button.addEventListener(MESSAGE_DOM_EVENT.FOCUS, handleHover);
+    button.addEventListener('click', handleClick);
+    button.addEventListener('mouseover', handleHover);
+    button.addEventListener('focus', handleHover);
 
     button.style.display = 'block';
     button.style.background = 'transparent';
@@ -89,8 +88,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
         warnings: serverData.warnings
     });
 
-    window.addEventListener(MESSAGE_DOM_EVENT.FOCUS, () => {
-        // when the iframe for the message receives focus, put the focus on the button
+    window.addEventListener('focus', () => {
         button.focus();
     });
 
@@ -180,10 +178,7 @@ const Message = function ({ markup, meta, parentStyles, warnings }) {
                     )
                     .slice(1);
 
-                ppDebug('Updating message with new props...', {
-                    debugObj: { index: window.xprops.index },
-                    inZoid: true
-                });
+                ppDebug('Updating message with new props...', { inZoid: true });
 
                 request('GET', `${window.location.origin}/credit-presentment/smart/message?${query}`).then(
                     ({ data: resData }) => {

diff --git a/src/components/modal/content/US-EZP/parts/ContentWrapper.jsx b/src/components/modal/content/US-EZP/parts/ContentWrapper.jsx
@@ -6,7 +6,6 @@ import Header from '../../../parts/Header';
 import Container from '../../../parts/Container';
 import Button from '../../../parts/Button';
 import { useApplyNow, useTransitionState } from '../../../lib';
-import { MODAL_DOM_EVENT } from '../../../../../utils';
 
 const ContentWrapper = () => {
     const contentWrapper = useRef();
@@ -24,12 +23,12 @@ const ContentWrapper = () => {
         const handleApplyNowShow = () => !showApplyNow && setApplyNow(true);
         const handleApplyNowHide = () => showApplyNow && setApplyNow(false);
 
-        window.addEventListener(MODAL_DOM_EVENT.APPLY_NOW_VISIBLE, handleApplyNowShow);
-        window.addEventListener(MODAL_DOM_EVENT.APPLY_NOW_HIDDEN, handleApplyNowHide);
+        window.addEventListener('apply-now-visible', handleApplyNowShow);
+        window.addEventListener('apply-now-hidden', handleApplyNowHide);
 
         return () => {
-            window.removeEventListener(MODAL_DOM_EVENT.APPLY_NOW_VISIBLE, handleApplyNowShow);
-            window.removeEventListener(MODAL_DOM_EVENT.APPLY_NOW_HIDDEN, handleApplyNowHide);
+            window.removeEventListener('apply-now-visible', handleApplyNowShow);
+            window.removeEventListener('apply-now-hidden', handleApplyNowHide);
         };
     }, [showApplyNow]);
 

diff --git a/src/components/modal/lib/hooks/helpers.js b/src/components/modal/lib/hooks/helpers.js
@@ -1,18 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-// useAutoFocus unused?
-export function useAutoFocus() {
-    const ref = useRef();
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    });
-
-    return ref;
-}
-
 export function useDidUpdateEffect(fn, deps) {
     const mounted = useRef(false);
 

diff --git a/src/components/modal/lib/providers/scroll.js b/src/components/modal/lib/providers/scroll.js
@@ -1,13 +1,7 @@
 /** @jsx h */
 import { h, createContext } from 'preact';
 import { useEffect, useState, useContext, useCallback } from 'preact/hooks';
-import {
-    getEventListenerPassiveOptionIfSupported,
-    canDebug,
-    ppDebug,
-    DEBUG_CONDITIONS,
-    MODAL_DOM_EVENT
-} from '../../../../utils';
+import { getEventListenerPassiveOptionIfSupported } from '../../../../utils';
 
 const ScrollContext = createContext({
     addScrollCallback: () => {},
@@ -40,21 +34,16 @@ export const ScrollProvider = ({ children, containerRef }) => {
     };
 
     useEffect(() => {
-        const handleScroll = event => {
-            if (canDebug(DEBUG_CONDITIONS.MOUSEOVER)) {
-                ppDebug(`EVENT.MODAL.${window?.xprops?.index}.SCROLL`, { debugObj: event });
-            }
-            callbacks.forEach(callback => callback(event));
-        };
+        const handleScroll = event => callbacks.forEach(callback => callback(event));
 
         const passiveOption = getEventListenerPassiveOptionIfSupported();
 
-        containerRef.current.addEventListener(MODAL_DOM_EVENT.SCROLL, handleScroll, passiveOption);
-        containerRef.current.addEventListener(MODAL_DOM_EVENT.TOUCHMOVE, handleScroll, passiveOption);
+        containerRef.current.addEventListener('scroll', handleScroll, passiveOption);
+        containerRef.current.addEventListener('touchmove', handleScroll, passiveOption);
 
         return () => {
-            containerRef.current.removeEventListener(MODAL_DOM_EVENT.SCROLL, handleScroll, passiveOption);
-            containerRef.current.removeEventListener(MODAL_DOM_EVENT.TOUCHMOVE, handleScroll, passiveOption);
+            containerRef.current.removeEventListener('scroll', handleScroll, passiveOption);
+            containerRef.current.removeEventListener('touchmove', handleScroll, passiveOption);
         };
     }, [callbacks]);
 

diff --git a/src/components/modal/lib/utils.js b/src/components/modal/lib/utils.js
@@ -1,6 +1,6 @@
 import arrayFrom from 'core-js-pure/stable/array/from';
 import objectEntries from 'core-js-pure/stable/object/entries';
-import { request, memoize, canDebug, DEBUG_CONDITIONS, ppDebug, MODAL_DOM_EVENT } from '../../../utils';
+import { request, memoize, ppDebug } from '../../../utils';
 
 export const getContent = memoize(
     ({
@@ -68,18 +68,7 @@ export function setupTabTrap() {
                 e.preventDefault();
                 nextElement.focus();
             }
-
-            if (canDebug(DEBUG_CONDITIONS.DOM_EVENTS)) {
-                // give the document 10ms to update before printing a debug log
-                // showing the currently selected element
-                setTimeout(() => {
-                    ppDebug(`EVENT.MODAL.${window?.xprops?.index}.KEYDOWN.${e.shiftKey ? 'SHIFT_TAB' : 'TAB'}`, {
-                        inZoid: true,
-                        debugObj: nextElement ?? document.activeElement
-                    });
-                }, 10);
-            }
         }
     }
-    window.addEventListener(MODAL_DOM_EVENT.KEYDOWN, trapTabKey);
+    window.addEventListener('keydown', trapTabKey);
 }
diff --git a/src/components/modal/parts/Overlay.jsx b/src/components/modal/parts/Overlay.jsx
@@ -3,24 +3,20 @@ import { h, Fragment } from 'preact';
 import { useEffect } from 'preact/hooks';
 
 import { useTransitionState } from '../lib';
-import { canDebug, DEBUG_CONDITIONS, MODAL_DOM_EVENT, ppDebug } from '../../../utils';
 
 const Overlay = ({ contentMaxWidth, contentMaxHeight }) => {
     const [, handleClose] = useTransitionState();
 
     useEffect(() => {
         const handleEscapeKeyPress = evt => {
             if (evt.key === 'Escape' || evt.key === 'Esc' || evt.charCode === 27) {
-                if (canDebug(DEBUG_CONDITIONS.DOM_EVENTS)) {
-                    ppDebug(`EVENT.MODAL.${window?.xprops?.index}.KEYUP.ESCAPE`, { inZoid: true, debugObj: evt });
-                }
                 handleClose('Escape Key');
             }
         };
 
-        window.addEventListener(MODAL_DOM_EVENT.KEYUP, handleEscapeKeyPress);
+        window.addEventListener('keyup', handleEscapeKeyPress);
 
-        return () => window.removeEventListener(MODAL_DOM_EVENT.KEYUP, handleEscapeKeyPress);
+        return () => window.removeEventListener('keyup', handleEscapeKeyPress);
     });
 
     // Overlay must be split because the content wrapper fills

diff --git a/src/components/modal/v2/lib/hooks/helpers.js b/src/components/modal/v2/lib/hooks/helpers.js
@@ -1,18 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-// useAutoFocus unused?
-export function useAutoFocus() {
-    const ref = useRef();
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    });
-
-    return ref;
-}
-
 export function useDidUpdateEffect(fn, deps) {
     const mounted = useRef(false);
 

diff --git a/src/components/modal/v2/lib/providers/scroll.js b/src/components/modal/v2/lib/providers/scroll.js
@@ -1,7 +1,7 @@
 /** @jsx h */
 import { h, createContext } from 'preact';
 import { useEffect, useRef, useContext, useCallback } from 'preact/hooks';
-import { getEventListenerPassiveOptionIfSupported, MODAL_DOM_EVENT } from '../../../../../utils';
+import { getEventListenerPassiveOptionIfSupported } from '../../../../../utils';
 
 const ScrollContext = createContext({
     addScrollCallback: () => {},
@@ -34,10 +34,10 @@ export const ScrollProvider = ({ children, containerRef }) => {
         const handleScroll = event => callbacksRef.current.forEach(callback => callback(event));
         const passiveOption = getEventListenerPassiveOptionIfSupported();
 
-        containerRef.current.addEventListener(MODAL_DOM_EVENT.SCROLL, handleScroll, passiveOption);
+        containerRef.current.addEventListener('scroll', handleScroll, passiveOption);
 
         return () => {
-            containerRef.current.removeEventListener(MODAL_DOM_EVENT.SCROLL, handleScroll, passiveOption);
+            containerRef.current.removeEventListener('scroll', handleScroll, passiveOption);
         };
     }, [containerRef.current]);
 

diff --git a/src/components/modal/v2/lib/utils.js b/src/components/modal/v2/lib/utils.js
@@ -1,7 +1,7 @@
 import objectEntries from 'core-js-pure/stable/object/entries';
 import arrayFrom from 'core-js-pure/stable/array/from';
 import { isIosWebview, isAndroidWebview } from '@krakenjs/belter/src';
-import { request, memoize, DEBUG_CONDITIONS, canDebug, ppDebug, MODAL_DOM_EVENT } from '../../../../utils';
+import { request, memoize, ppDebug } from '../../../../utils';
 
 export const getContent = memoize(
     ({
@@ -54,7 +54,7 @@ export const getContent = memoize(
             )
             .slice(1);
 
-        ppDebug('Updating modal with new props...', { inZoid: true, debugObj: { index: window?.xprops?.index } });
+        ppDebug('Updating modal with new props...', { inZoid: true });
 
         return request('GET', `${window.location.origin}/credit-presentment/modalContent?${query}`).then(
             ({ data }) => data
@@ -92,20 +92,9 @@ export function setupTabTrap() {
                 e.preventDefault();
                 nextElement.focus();
             }
-
-            if (canDebug(DEBUG_CONDITIONS.DOM_EVENTS)) {
-                // give the document 10ms to update before printing a debug log
-                // showing the currently selected element
-                setTimeout(() => {
-                    ppDebug(`EVENT.MODAL.${window?.xprops?.index}.KEYDOWN.${e.shiftKey ? 'SHIFT_TAB' : 'TAB'}`, {
-                        inZoid: true,
-                        debugObj: nextElement ?? document.activeElement
-                    });
-                }, 10);
-            }
         }
     }
-    window.addEventListener(MODAL_DOM_EVENT.KEYDOWN, trapTabKey);
+    window.addEventListener('keydown', trapTabKey);
 }
 
 export function formatDateByCountry(country) {

diff --git a/src/components/modal/v2/parts/Overlay.jsx b/src/components/modal/v2/parts/Overlay.jsx
@@ -2,7 +2,6 @@
 import { h } from 'preact';
 import { useEffect } from 'preact/hooks';
 
-import { canDebug, DEBUG_CONDITIONS, MODAL_DOM_EVENT, ppDebug } from '../../../../utils';
 import { useTransitionState } from '../lib';
 
 const Overlay = () => {
@@ -11,16 +10,13 @@ const Overlay = () => {
     useEffect(() => {
         const handleEscapeKeyPress = evt => {
             if (evt.key === 'Escape' || evt.key === 'Esc' || evt.charCode === 27) {
-                if (canDebug(DEBUG_CONDITIONS.DOM_EVENTS)) {
-                    ppDebug(`EVENT.MODAL.${window?.xprops?.index}.KEYUP.ESCAPE`, { inZoid: true, debugObj: evt });
-                }
                 handleClose('Escape Key');
             }
         };
 
-        window.addEventListener(MODAL_DOM_EVENT.KEYUP, handleEscapeKeyPress);
+        window.addEventListener('keyup', handleEscapeKeyPress);
 
-        return () => window.removeEventListener(MODAL_DOM_EVENT.KEYUP, handleEscapeKeyPress);
+        return () => window.removeEventListener('keyup', handleEscapeKeyPress);
     });
 
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

diff --git a/src/library/controllers/message/interface.js b/src/library/controllers/message/interface.js
@@ -14,8 +14,7 @@ import {
     PERFORMANCE_MEASURE_KEYS,
     globalEvent,
     ppDebug,
-    awaitTreatments,
-    GLOBAL_EVENT
+    awaitTreatments
 } from '../../../utils';
 
 import { getMessageComponent } from '../../zoid/message';
@@ -168,7 +167,7 @@ export default (options = {}) => ({
                                     );
 
                                     return render(container)
-                                        .then(() => globalEvent.trigger(GLOBAL_EVENT.RENDER))
+                                        .then(() => globalEvent.trigger('render'))
                                         .then(resolve);
                                 }
 
@@ -194,7 +193,7 @@ export default (options = {}) => ({
                                 );
 
                                 return updateProps(updatedMessageProps)
-                                    .then(() => globalEvent.trigger(GLOBAL_EVENT.RENDER))
+                                    .then(() => globalEvent.trigger('render'))
                                     .then(resolve);
                             } catch (err) {
                                 // We only want console.warn to be called once

diff --git a/src/library/controllers/message/setup.js b/src/library/controllers/message/setup.js
@@ -7,12 +7,9 @@ import {
     getPartnerAccount,
     getInsertionObserver,
     isZoidComponent,
-    canDebug,
     ppDebug,
-    DEBUG_CONDITIONS,
     getOverflowObserver,
-    ensureTreatments,
-    PARENT_DOM_EVENT
+    ensureTreatments
 } from '../../../utils';
 import Messages from './adapter';
 import { getMessageComponent } from '../../zoid/message';
@@ -87,13 +84,12 @@ export default function setup() {
                 subtree: true,
                 attributeFilter: ['data-pp-message']
             });
-            if (canDebug(DEBUG_CONDITIONS.DOM_EVENTS)) {
-                ppDebug(`EVENT.GLOBAL.DOM_CONTENT_LOADED - ${new Date().toLocaleString()}`);
-            }
+
+            ppDebug(`DOMContentLoaded at ${new Date().toLocaleString()}`);
         };
 
         if (document.readyState === 'loading') {
-            window.addEventListener(PARENT_DOM_EVENT.DOM_CONTENT_LOADED, handleContentLoaded);
+            window.addEventListener('DOMContentLoaded', handleContentLoaded);
         } else {
             handleContentLoaded();
         }

diff --git a/src/library/controllers/modal/interface.js b/src/library/controllers/modal/interface.js
@@ -14,9 +14,7 @@ import {
     addPerformanceMeasure,
     PERFORMANCE_MEASURE_KEYS,
     globalEvent,
-    getTopWindow,
-    MODAL_EVENT,
-    GLOBAL_EVENT
+    getTopWindow
 } from '../../../utils';
 import { getModalComponent } from '../../zoid/modal';
 
@@ -83,7 +81,7 @@ const memoizedModal = memoizeOnProps(
                 Object.assign(zoidComponent, zoidComponent.clone());
             }
 
-            const modalReady = new ZalgoPromise(resolve => zoidComponent.event.once(MODAL_EVENT.READY, resolve));
+            const modalReady = new ZalgoPromise(resolve => zoidComponent.event.once('ready', resolve));
 
             zoidComponent.state.renderStart = getCurrentTime();
 
@@ -103,7 +101,7 @@ const memoizedModal = memoizeOnProps(
                         modalReady
                     ])
                 )
-                .then(() => globalEvent.trigger(GLOBAL_EVENT.MODAL_RENDER));
+                .then(() => globalEvent.trigger('modal-render'));
 
             return renderProm;
         };
@@ -148,15 +146,15 @@ const memoizedModal = memoizeOnProps(
             // Tells containerTemplate to show the prerender modal as soon as possible if zoid has not
             // rendered anything yet and the show/hide events are not hooked up yet
             zoidComponent.state.open = true;
-            zoidComponent.event.trigger(MODAL_EVENT.MODAL_SHOW);
+            zoidComponent.event.trigger('modal-show');
 
             return renderProm;
         };
 
         const hideModal = () => {
             renderProm = renderModal('body');
 
-            zoidComponent.event.trigger(MODAL_EVENT.MODAL_HIDE);
+            zoidComponent.event.trigger('modal-hide');
 
             return renderProm;
         };