Prince/Purchase section refactor

src/javascript/app/common/data_manager.js

@@ -23,19 +23,19 @@ class DataManager {
 
     set(data, data_type, optional_trigger) {
         if (typeof data === 'object') {
-            const oldValues = {};
-            const newValues = {};
+            const old_values = {};
+            const new_values = {};
             Object.entries(data).forEach(([key, value]) => {
                 if (this.data[data_type][key] !== value) {
-                    oldValues[key] = this.data[data_type][key];
-                    newValues[key] = value;
+                    old_values[key] = this.data[data_type][key];
+                    new_values[key] = value;
                 }
                 this.data[data_type][key] = value;
             });
-            if (Object.keys(newValues).length > 0) {
+            if (Object.keys(new_values).length > 0) {
                 // Trigger a custom event with old and new values
                 window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], {
-                    detail: { oldValues, newValues },
+                    detail: { old_values, new_values },
                 }));
 
                 switch (data_type) {
@@ -74,11 +74,11 @@ class DataManager {
     }
 
     clear(data_type) {
-        const oldValues = { ...this.data[data_type] };
+        const old_values = { ...this.data[data_type] };
         this.data[data_type] = {};
 
         window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], {
-            detail: { oldValues, newValues: {} },
+            detail: { old_values, new_values: {} },
         }));
         if (data_type === 'trade') {
             triggerTradeChange();

src/javascript/app/components/loading-spinner.js

@@ -29,7 +29,7 @@ export const show = (content_id) => {
  */
 export const hide = (content_id) => {
     dataManager.setContract({
-        hidePageLoader: true,
+        hide_page_loader: true,
     });
 
     assertContainerExists(content_id);

src/javascript/app/pages/bottom/data/explanation.js

@@ -1,6 +1,6 @@
 import { localize } from '../../../../_common/localize.js';
 
-export const contractExplanationData = {
+export const contract_explanation_data = {
     winning: {
         asian: {
 

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

@@ -1,28 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
 import { SectionMessage, Skeleton, Text } from '@deriv-com/quill-ui';
-import { contractExplanationData } from './data/explanation.js';
+import { contract_explanation_data } from './data/explanation.js';
 import Language from '../../../_common/language';
 import Url from '../../../_common/url';
 import { localize } from '../../../_common/localize.js';
 import dataManager from '../../common/data_manager.js';
 import { useContractChange } from '../../hooks/events.js';
 
-export const Explanation = ({ explanationOnly = false }) => {
+export const Explanation = ({ explanation_only = false }) => {
 
-    const [formName,setFormName] = useState(null);
+    const [form_name,setFormName] = useState(null);
 
-    const hasContractChanges = useContractChange();
+    const has_contract_changes = useContractChange();
 
     useEffect(() => {
-        const actualFormName = dataManager.getContract('explanationFormName');
+        const actual_form_name = dataManager.getContract('explanationFormName');
         setFormName(null);
 
         setTimeout(() => {
-            setFormName(actualFormName);
+            setFormName(actual_form_name);
         }, 500);
 
-    }, [hasContractChanges]);
+    }, [has_contract_changes]);
 
     const language = Language.get();
     const image_path = Url.urlForStatic(
@@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => {
     const Notes = () => (
         <>
             <strong>{localize('Note')}: </strong>
-            {contractExplanationData.note[formName].content.map((data, idx) => (
+            {contract_explanation_data.note[form_name].content.map((data, idx) => (
                 <span key={idx}>{parse(data)}</span>
             ))}
         </>
@@ -93,19 +93,19 @@ export const Explanation = ({ explanationOnly = false }) => {
         },
     };
 
-    if (formName) {
+    if (form_name) {
         return (
             <div className='tab-explanation'>
                 {/* ========== Winning ========== */}
-                {!explanationOnly && (
+                {!explanation_only && (
                     <>
                         <div id='explanation_winning'>
-                            <div id={`winning_${formName}`}>
+                            <div id={`winning_${form_name}`}>
                                 <div className='explanation-heading'>
-                                    <Text size='lg' bold >{localize('Winning the contract')}</Text>
+                                    <Text size='lg' bold>{localize('Winning the contract')}</Text>
                                 </div>
                                 <div className='explanation-content'>
-                                    {contractExplanationData.winning[formName].content.map(
+                                    {contract_explanation_data.winning[form_name].content.map(
                                         (data, idx) => (
                                             <Text size='md' key={idx}>{parse(data)}</Text>
                                         )
@@ -116,7 +116,7 @@ export const Explanation = ({ explanationOnly = false }) => {
                         </div>
 
                         {/* ========== Image ========== */}
-                        {images[formName] && (
+                        {images[form_name] && (
                             <div id='explanation_image'>
                                 <div className='gr-row'>
                                     <div className='gr-2 hide-mobile' />
@@ -127,15 +127,15 @@ export const Explanation = ({ explanationOnly = false }) => {
                                         <img
                                             id='explanation_image_1'
                                             className='responsive'
-                                            src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
+                                            src={`${image_path}${images[form_name].image1}?${process.env.BUILD_HASH}`}
                                         />
                                     </div>
-                                    {images[formName].image2 && (
+                                    {images[form_name].image2 && (
                                         <div className='gr-4 gr-12-m padding-left'>
                                             <img
                                                 id='explanation_image_2'
                                                 className='responsive'
-                                                src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
+                                                src={`${image_path}${images[form_name].image2}?${process.env.BUILD_HASH}`}
                                             />
                                         </div>
                                     )}
@@ -149,29 +149,29 @@ export const Explanation = ({ explanationOnly = false }) => {
 
                 {/* ========== Explain ========== */}
                 <div id='explanation_explain' className='gr-child'>
-                    <div id={`explain_${formName}`}  >
+                    <div id={`explain_${form_name}`}  >
                         <div className='explanation-heading'>
-                            <Text size='lg' bold >{contractExplanationData.explain[formName].title}</Text>
+                            <Text size='lg' bold >{contract_explanation_data.explain[form_name].title}</Text>
                         </div>
                         <div className='explanation-content'>
-                            {contractExplanationData.explain[formName].content.map(
+                            {contract_explanation_data.explain[form_name].content.map(
                                 (data, idx) => (
                                     <Text size='md' key={idx}>{parse(data)}</Text>
                                 )
                             )}
                         </div>
 
-                        {contractExplanationData.explain[formName].title_secondary && (
+                        {contract_explanation_data.explain[form_name].title_secondary && (
                             <div className='explanation-heading secondary-heading'>
                                 <Text size='lg' bold>
-                                    {contractExplanationData.explain[formName].title_secondary}
+                                    {contract_explanation_data.explain[form_name].title_secondary}
                                 </Text>
                             </div>
                         )}
 
-                        {contractExplanationData.explain[formName].content_secondary && (
+                        {contract_explanation_data.explain[form_name].content_secondary && (
                             <div className='explanation-content'>
-                                {contractExplanationData.explain[formName].content_secondary.map(
+                                {contract_explanation_data.explain[form_name].content_secondary.map(
                                     (data, idx) => (
                                         <Text size='md' key={idx}>{parse(data)}</Text>
                                     )
@@ -183,16 +183,16 @@ export const Explanation = ({ explanationOnly = false }) => {
                 </div>
 
                 {/* ========== Note ========== */}
-                {!explanationOnly && (
-                    contractExplanationData.note[formName] && (
+                {!explanation_only && (
+                    contract_explanation_data.note[form_name] && (
                         <SectionMessage status='info' message={<Notes />} size='sm' />
                     )
                 )}
             </div>
         );
     }
 
-    if (explanationOnly) {
+    if (explanation_only) {
         return (
             <div className='explanation-container-loader'>
                 <Skeleton.Square width={250} height={50} rounded />

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

@@ -11,14 +11,14 @@ import dataManager from '../../common/data_manager.js';
 import LastDigit from '../trade/last_digit.jsx';
 
 const BottomTabs = () => {
-    const hasMarketChange = useMarketChange();
-    const [selectedTab, setSelectedTab] = useState(1);
-    const [hasLastDigit, setHasLastDigit] = useState(false);
-    const [formName, setFormName] = useState('');
-    const hasContractChange = useContractChange();
-    const savedTab = sessionStorage.getItem('currentTab');
-    const triggerOldTabTimer = useRef();
-    const [isShowGraph, setIsShowGraph] = useState(false);
+    const has_market_change = useMarketChange();
+    const [selected_tab, setSelectedTab] = useState(1);
+    const [has_last_digit, setHasLastDigit] = useState(false);
+    const [form_name, setFormName] = useState('');
+    const has_contract_change = useContractChange();
+    const saved_tab = sessionStorage.getItem('currentTab');
+    const [is_show_graph, setIsShowGraph] = useState(false);
+    const trigger_old_tab_timer = useRef();
 
     const handleChange = (e) => {
         setSelectedTab(e);
@@ -31,43 +31,43 @@ const BottomTabs = () => {
 
     const tabs = [{ label: localize('Chart') }, { label: localize('Explanation') }];
 
-    const bottomTabOptions = hasLastDigit
+    const bottom_tab_options = has_last_digit
         ? [...tabs, { label: localize('Last Digit Stats') }]
         : tabs;
 
     useEffect(() => {
         setFormName(dataManager.getContract('explanationFormName'));
-    }, [hasContractChange, hasMarketChange]);
+    }, [has_contract_change, has_market_change]);
 
     useEffect(() => {
-        setHasLastDigit(formName === 'digits' || formName === 'evenodd' || formName === 'overunder');
-    }, [formName]);
+        setHasLastDigit(form_name === 'digits' || form_name === 'evenodd' || form_name === 'overunder');
+    }, [form_name]);
 
     useEffect(() => {
-        if (savedTab !== null) {
-            const tabIndex = parseInt(savedTab);
-            if (tabIndex === 2 && !hasLastDigit) {
+        if (saved_tab !== null) {
+            const tab_index = parseInt(saved_tab);
+            if (tab_index === 2 && !has_last_digit) {
                 setSelectedTab(1);
             } else {
-                setSelectedTab(tabIndex);
+                setSelectedTab(tab_index);
             }
         } else {
             setSelectedTab(1);
         }
-    }, [hasLastDigit]);
+    }, [has_last_digit]);
 
     useEffect(() => {
-        const oppositeTab = (selectedTab + 1) > 2 ? 0 : (selectedTab + 1);
+        const opposite_tab = (selected_tab + 1) > 2 ? 0 : (selected_tab + 1);
 
-        triggerOldTab(oppositeTab);
+        triggerOldTab(opposite_tab);
 
-        triggerOldTabTimer.current = setTimeout(() => {
-            triggerOldTab(selectedTab);
+        trigger_old_tab_timer.current = setTimeout(() => {
+            triggerOldTab(selected_tab);
         }, 100);
-    }, [selectedTab, savedTab]);
+    }, [selected_tab, saved_tab]);
 
     useEffect(() => () => {
-        clearTimeout(triggerOldTabTimer.current);
+        clearTimeout(trigger_old_tab_timer.current);
         WebtraderChart.cleanupChart();
         WebtraderChart.showChart();
     },[]);
@@ -76,20 +76,20 @@ const BottomTabs = () => {
         <>
             <div className='quill-container-centered'>
                 <SegmentedControlSingleChoice
-                    options={bottomTabOptions}
-                    selectedItemIndex={selectedTab}
+                    options={bottom_tab_options}
+                    selectedItemIndex={selected_tab}
                     onChange={handleChange}
                 />
             </div>
             <div className='bottom-content-section'>
-                {selectedTab === 0 && <Graph
+                {selected_tab === 0 && <Graph
                     onUnload={() => setIsShowGraph(false)}
                     onLoad={() => setIsShowGraph(true)}
                 />}
-                {selectedTab === 1 && <Explanation />}
-                {selectedTab === 2 && hasLastDigit && <LastDigit />}
+                {selected_tab === 1 && <Explanation />}
+                {selected_tab === 2 && has_last_digit && <LastDigit />}
 
-                <div id='tab_graph' className={`chart-section ${isShowGraph ? '' : 'grap-hide'}`}>
+                <div id='tab_graph' className={`chart-section ${is_show_graph ? '' : 'grap-hide'}`}>
                     <p className='error-msg' id='chart-error' />
                     <div id='trade_live_chart'>
                         <div id='webtrader_chart' />

src/javascript/app/pages/form/barrier-fields.jsx

@@ -12,18 +12,18 @@ import Defaults, { PARAM_NAMES } from '../trade/defaults.js';
 
 const BarrierFields = ({ form_name, handleAmountChange }) => {
     const [barrierData, setBarrierData] = useState();
-    const hasBarrierChange = useBarrierChange();
+    const has_barrier_change = useBarrierChange();
 
     const barrier = Defaults.get(PARAM_NAMES.BARRIER);
     const barrier_high = Defaults.get(PARAM_NAMES.BARRIER_HIGH);
     const barrier_low = Defaults.get(PARAM_NAMES.BARRIER_LOW);
 
     useEffect(() => {
-        setBarrierData((oldData) => ({
-            ...oldData,
+        setBarrierData((old_data) => ({
+            ...old_data,
             ...dataManager.getAllTrades(),
         }));
-    }, [hasBarrierChange]);
+    }, [has_barrier_change]);
 
     if (!barrierData) return null;