Maryia/refactor: Add timeout cleanups & assist with nit-picks fixes

scripts/common.js

@@ -21,7 +21,7 @@ exports.sections_config = {
     '': { // '' is the default section when no 'section' specified in pages.js (to avoid adding 'app' as section for all)
         path     : '',
         js_files : ['vendor', 'binary'],
-        css_files: ['common.min', 'app.min', 'static.min','reset.min'],
+        css_files: ['common.min', 'app.min', 'static.min', 'reset.min'],
         has_pjax : true,
     },
 };

src/javascript/app/common/helpers.js

@@ -8,7 +8,7 @@ import common_independent from '../pages/trade/common_independent';
 import Defaults, { PARAM_NAMES } from '../pages/trade/defaults';
 import { triggerSessionChange } from '../hooks/events';
 
-const parseData = (rawData) => !rawData ?  '' :  parse(rawData);
+const parseData = (raw_data) => !raw_data ?  '' :  parse(raw_data);
 
 const triggerClick = (query) => document.querySelector(query)?.click();
 

src/javascript/app/pages/bottom/tabs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { SegmentedControlSingleChoice } from '@deriv-com/quill-ui';
 import { Explanation } from './explanation.jsx';
@@ -17,6 +17,7 @@ const BottomTabs = () => {
     const [formName, setFormName] = useState('');
     const hasContractChange = useContractChange();
     const savedTab = sessionStorage.getItem('currentTab');
+    const triggerOldTabTimer = useRef();
 
     const renderGraph = (callback) => {
         const timer = setTimeout(() => {
@@ -69,11 +70,13 @@ const BottomTabs = () => {
 
         triggerOldTab(oppositeTab);
 
-        setTimeout(() => {
+        triggerOldTabTimer.current = setTimeout(() => {
             triggerOldTab(selectedTab);
         }, 100);
     }, [selectedTab, savedTab]);
 
+    useEffect(() => () => clearTimeout(triggerOldTabTimer.current), []);
+
     return (
         <>
             <div className='quill-container-centered'>

src/javascript/app/pages/loader.jsx

@@ -38,7 +38,7 @@ const pageTypes = [
 const Loader = () => {
     const hasContractChange  = useContractChange();
 
-    const [loading,setLoading] = useState(true);
+    const [loading, setLoading] = useState(true);
 
     const getPageType = () => pageTypes.find(({ code }) => window.location.pathname.includes(code)) || { name: 'Generic', code: '' };
 

src/javascript/app/pages/trade/digit_ticker.js

@@ -5,6 +5,7 @@ const DigitTicker = (() => {
         el_peek,
         el_peek_box,
         el_mask,
+        init_timer,
         total_tick_count,
         contract_status,
         type,
@@ -25,8 +26,8 @@ const DigitTicker = (() => {
         is_initialized       = true;
 
         // wait for the digit container to load before init
-        if (!el_container){
-            setTimeout(() => {
+        if (!el_container) {
+            init_timer = setTimeout(() => {
                 init(container_id, contract_type, shortcode, tick_count, status);
             }, 10);
 
@@ -234,6 +235,7 @@ const DigitTicker = (() => {
             el_container.removeChild(el_container.firstChild);
         }
         if (el_container) el_container.classList.add('invisible');
+        clearTimeout(init_timer);
     };
 
     const countDecimals = (value) => {

src/javascript/app/pages/trade/markets/contracts-dropdown.jsx

@@ -10,6 +10,7 @@ export const ContractDropdown = () => {
     const [data, setData] = useState(dataManager.getAllContracts());
     const selectedRef = useRef(null);
     const containerRef = useRef(null);
+    const closeDropdownTimer = useRef();
 
     const onContractClick = (formName) => {
         if (formName === data?.formName) { return; }
@@ -22,20 +23,21 @@ export const ContractDropdown = () => {
             contractElement.dispatchEvent(event);
         }
 
-        Defaults.set(PARAM_NAMES.FORM_NAME,formName);
+        Defaults.set(PARAM_NAMES.FORM_NAME, formName);
 
         dataManager.setContract({
             formName,
         });
 
         triggerContractChange();
 
-        setTimeout(() => {
+        closeDropdownTimer.current = setTimeout(() => {
             close();
         }, 10);
-
     };
 
+    useEffect(() => () => clearTimeout(closeDropdownTimer.current), []);
+
     useEffect(() => {
         setData(oldData => ({
             ...oldData,

src/javascript/app/pages/trade/markets/markets-dropdown.jsx

@@ -72,6 +72,7 @@ export const MarketsDropdown = () => {
     const [searchKey, setSearchKey] = useState('');
     const itemsContainer = useRef(null);
     const isScrolling = useRef(false);
+    const disableScrollTimer = useRef();
 
     const { close: closeMarketDropdown } = useDropdown();
 
@@ -131,6 +132,8 @@ export const MarketsDropdown = () => {
         setDefaultMarkets(originalMarkets);
         setMarkets(originalMarkets);
         setIsMounted(true);
+
+        return () => clearTimeout(disableScrollTimer.current);
     }, []);
 
     // Handle selecting of tabs on scroll
@@ -185,7 +188,7 @@ export const MarketsDropdown = () => {
                     behavior: 'smooth',
                 });
             }
-            setTimeout(() => {
+            disableScrollTimer.current = setTimeout(() => {
                 isScrolling.current = false;
             }, 1000);
         }

src/javascript/app/pages/trade/price.js

@@ -246,8 +246,8 @@ const Price = (() => {
             CommonFunctions.elementInnerHtml(contract_multiplier, data.multiplier ? formatMoney(currentCurrency, data.multiplier, false, 0, 2) : '-');
 
             dataManager.setPurchase({
-                [`${position}Amount`]      : data.display_value ? formatMoney(currentCurrency, data.display_value,true) : '-',
-                [`${position}PayoutAmount`]: data.payout ? formatMoney(currentCurrency, data.payout,true) : '-',
+                [`${position}Amount`]      : data.display_value ? formatMoney(currentCurrency, data.display_value, true) : '-',
+                [`${position}PayoutAmount`]: data.payout ? formatMoney(currentCurrency, data.payout, true) : '-',
                 [`${position}Multiplier`]  : data.multiplier ? formatMoney(currentCurrency, data.multiplier, true, 0, 2) : '-',
                 currency                   : getCurrencyDisplayCode(currentCurrency),
             });

src/javascript/app/pages/trade/purchase/contract-details.jsx

@@ -31,7 +31,7 @@ const resetPopupData = (isAuditReset = false) => {
 };
 
 const AuditSection = ({ data }) => {
-    const auditData = {
+    const audit_data = {
         start: {
             title  : localize('Contract starts'),
             content: data?.auditDataStart,
@@ -74,12 +74,12 @@ const AuditSection = ({ data }) => {
                         </div>
                         <div className='details-column'>
                             <div className='contract-info-wrapper full'>
-                                {Object.keys(auditData).map(adk =>{
-                                    const { title, content } = auditData[adk];
+                                {Object.keys(audit_data).map(audit_data_key =>{
+                                    const { title, content } = audit_data[audit_data_key];
 
                                     if (content?.length) {
                                         return (
-                                            <React.Fragment key={`audit-table-${title}-${adk}`}>
+                                            <React.Fragment key={`audit-table-${title}-${audit_data_key}`}>
                                                 <div className='table-box' >
                                                     <Text size='md' bold centered>
                                                         {title}
@@ -97,8 +97,8 @@ const AuditSection = ({ data }) => {
                                                             </span>
                                                         </div>
                                                     </div>
-                                                    {content?.map((audit,ak) =>
-                                                        <React.Fragment key={`audit-${audit.tick}-${ak}`}>
+                                                    {content?.map((audit, audit_key) =>
+                                                        <React.Fragment key={`audit-${audit.tick}-${audit_key}`}>
                                                             <div className='table-item'>
                                                                 <div className='item-header'>
                                                                     <Text size='sm' bold>{ audit?.name}</Text>
@@ -220,7 +220,7 @@ const ContractDetails = () => {
                             <Skeleton.Square fullWidth height={24} rounded />
                             <div className='body-loader'>
                                 <Skeleton.Square fullWidth height={495} rounded />
-                                <Skeleton.Square width={'360px'} height={670} rounded />
+                                <Skeleton.Square width={360} height={670} rounded />
                             </div>
                         </div>
                     </div>

src/sass/_common/components.scss

@@ -28,7 +28,7 @@
     }
 }
 
-.highcharts-container { 
+.highcharts-container {
     .highcharts-subtitle {
         white-space: normal !important;