Nuzhy/dataManager

src/javascript/app/common/currency.js

@@ -1,4 +1,4 @@
-const tradeManager = require('./trade_manager').default;
+const dataManager  = require('./data_manager').default;
 const CurrencyBase = require('../../_common/base/currency_base');
 const localize     = require('../../_common/localize').localize;
 
@@ -23,9 +23,9 @@ const getCurrencyList = (currencies) => {
             currency_list.fiat.push({ value: currency, text: currency_name });
         }
     });
-    tradeManager.set({
+    dataManager.set({
         currency_list,
-    });
+    }, 'trade');
 
     return $currencies.append($fiat_currencies.children().length ? $fiat_currencies : '').append($cryptocurrencies.children().length ? $cryptocurrencies : '');
 };

src/javascript/app/common/data_manager.js

@@ -0,0 +1,102 @@
+import {
+    triggerBarrierChange,
+    triggerContractChange,
+    triggerPurchaseChange,
+    triggerTimeChange,
+    triggerTradeChange,
+} from '../hooks/events';
+
+class DataManager {
+    constructor() {
+        this.data = {
+            trade   : {},
+            purchase: {},
+            contract: {},
+        };
+    }
+
+    set(data, data_type, optional) {
+        const changeTypeMap = {
+            trade   : 'tradeChange',
+            purchase: 'purchaseChange',
+            contract: 'contractChange',
+        };
+        if (typeof data === 'object') {
+            const oldValues = {};
+            const newValues = {};
+            Object.entries(data).forEach(([key, value]) => {
+                if (this.data[data_type][key] !== value) {
+                    oldValues[key] = this.data[data_type][key];
+                    newValues[key] = value;
+                }
+                this.data[data_type][key] = value;
+            });
+            if (Object.keys(newValues).length > 0) {
+                // Trigger a custom event with old and new values
+                window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], {
+                    detail: { oldValues, newValues },
+                }));
+                if (optional === 'barrier') {
+                    triggerBarrierChange();
+                } else if (optional === 'time') {
+                    triggerTimeChange();
+                } else {
+                    switch (data_type) {
+                        case 'trade':
+                            triggerTradeChange();
+                            break;
+
+                        case 'purchase':
+                            triggerPurchaseChange();
+                            break;
+
+                        case 'contract':
+                            triggerContractChange();
+                            break;
+
+                        default:
+                            break;
+                    }
+                }
+            }
+        }
+    }
+
+    get(key, data_type) {
+        return this.data[data_type][key];
+    }
+
+    getAll(data_type) {
+        return { ...this.data[data_type] };
+    }
+
+    clear(data_type) {
+        const oldValues = { ...this.data[data_type] };
+        this.data[data_type] = {};
+        const changeTypeMap = {
+            trade   : 'tradeChange',
+            purchase: 'purchaseChange',
+            contract: 'contractChange',
+        };
+        window.dispatchEvent(new CustomEvent(changeTypeMap[data_type], {
+            detail: { oldValues, newValues: {} },
+        }));
+        if (data_type === 'trade') {
+            triggerTradeChange();
+        }
+        if (data_type === 'purchase') {
+            triggerPurchaseChange();
+        }
+        if (data_type === 'contract') {
+            triggerContractChange();
+        }
+    }
+
+    has(key, data_type) {
+        return Object.prototype.hasOwnProperty.call(this.data[data_type], key);
+    }
+}
+
+const dataManager = new DataManager();
+
+export default dataManager;

src/javascript/app/common/helpers.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip } from '@deriv-com/quill-ui';
 import parse from 'html-react-parser';
 import moment from 'moment';
-import tradeManager from './trade_manager';
+import dataManager from './data_manager';
 import { getLocalTime } from '../base/clock';
 import common_independent from '../pages/trade/common_independent';
 
@@ -24,32 +24,6 @@ const TimeTooltipWrapper = (element, time) => {
     );
 };
 
-const handleNumeric = (event, regex_string) => {
-    let input_value = event.target.value;
-    const regex = new RegExp(regex_string) || /[^0-9.]/g;
-
-    input_value = input_value
-        .split('')
-        .filter((char, index, array) => {
-            const tempValue = array.slice(0, index + 1).join('');
-            return !regex.test(tempValue);
-        })
-        .join('');
-
-    if (input_value.match(/[+-]/g) && input_value.match(/[+-]/g).length > 1) {
-        input_value = input_value.replace(/[+-]/g, '');
-    }
-
-    const decimal_count = (input_value.match(/\./g) || []).length;
-    if (decimal_count > 1) {
-        input_value = input_value.replace(/\./g, (match, offset) =>
-            offset === input_value.indexOf('.') ? match : ''
-        );
-    }
-
-    return input_value;
-};
-
 const setMinMaxTime = (selector, check_end_time) => {
     const $date_start        = $('#date_start');
     const $time_start        = $('#time_start');
@@ -125,17 +99,16 @@ const setMinMaxTimeObj = (options) => {
         }
     }
 
-    tradeManager.set({
+    dataManager.set({
         starttime_obj,
         expirytime_obj,
-    },'time');
+    }, 'trade', 'time');
 };
 
 export {
     parseData,
     triggerClick,
     TimeTooltipWrapper,
-    handleNumeric,
     setMinMaxTime,
 };
 

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

@@ -1,4 +1,4 @@
-import contractManager from '../common/contract_manager';
+import dataManager from '../common/data_manager';
 
 const assertContainerExists = (content_id) => {
     if (!content_id) {
@@ -28,9 +28,9 @@ export const show = (content_id) => {
  * @param content_id
  */
 export const hide = (content_id) => {
-    contractManager.set({
+    dataManager.set({
         hidePageLoader: true,
-    });
+    }, 'contract');
 
     assertContainerExists(content_id);
     const $container = $(`#${content_id}`);

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

@@ -5,7 +5,7 @@ import { contractExplanationData } from './data/explanation.js';
 import Language from '../../../_common/language';
 import Url from '../../../_common/url';
 import { localize } from '../../../_common/localize.js';
-import contractManager from '../../common/contract_manager.js';
+import dataManager from '../../common/data_manager.js';
 import { useContractChange } from '../../hooks/events.js';
 
 export const Explanation = ({ explanationOnly = false }) => {
@@ -15,7 +15,7 @@ export const Explanation = ({ explanationOnly = false }) => {
     const hasContractChanges = useContractChange();
 
     useEffect(() => {
-        const actualFormName = contractManager.get('explanationFormName');
+        const actualFormName = dataManager.get('explanationFormName', 'contract');
         setFormName(null);
 
         setTimeout(() => {

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

@@ -1,14 +1,12 @@
-/* eslint-disable no-console */
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { SegmentedControlSingleChoice, Skeleton } from '@deriv-com/quill-ui';
 import { Explanation } from './explanation.jsx';
 import { getElementById } from '../../../_common/common_functions';
 import WebtraderChart from '../trade/charts/webtrader_chart';
 import { useMarketChange, useContractChange } from '../../hooks/events';
-
 import { localize } from '../../../_common/localize';
-import contractManager from '../../common/contract_manager.js';
+import dataManager from '../../common/data_manager.js';
 import LastDigit from '../trade/last_digit.jsx';
 
 const Graph = ({ renderGraph }) => {
@@ -71,7 +69,7 @@ const BottomTabs = () => {
         : tabs;
 
     useEffect(() => {
-        setFormName(contractManager.get('explanationFormName'));
+        setFormName(dataManager.get('explanationFormName', 'contract'));
     }, [hasContractChange, hasMarketChange]);
 
     useEffect(() => {

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

@@ -6,7 +6,8 @@ import {
 // eslint-disable-next-line import/no-unresolved
 import { StandaloneCircleInfoRegularIcon } from '@deriv/quill-icons/Standalone';
 import { useBarrierChange } from '../../hooks/events.js';
-import tradeManager from '../../common/trade_manager.js';
+// import tradeManager from '../../common/trade_manager.js';
+import dataManager from '../../common/data_manager.js';
 import { localize } from '../../../_common/localize.js';
 import Defaults, { PARAM_NAMES } from '../trade/defaults.js';
 
@@ -21,7 +22,7 @@ const BarrierFields = ({ formName, handleAmountChange }) => {
     useEffect(() => {
         setBarrierData((oldData) => ({
             ...oldData,
-            ...tradeManager.getAll(),
+            ...dataManager.getAll('trade'),
         }));
     }, [hasBarrierChange]);
 

src/javascript/app/pages/form/form-component.jsx

@@ -21,7 +21,7 @@ import {
 } from '../../hooks/events.js';
 import common_functions from '../../../_common/common_functions.js';
 import { localize } from '../../../_common/localize.js';
-import tradeManager from '../../common/trade_manager.js';
+import dataManager from '../../common/data_manager.js';
 
 export const FormComponent = () => {
     const [tradeData, setTradeData] = useState({});
@@ -32,7 +32,7 @@ export const FormComponent = () => {
     useEffect(() => {
         setTradeData((oldData) => ({
             ...oldData,
-            ...tradeManager.getAll(),
+            ...dataManager.getAll('trade'),
         }));
     }, [hasTradeChange, hasSessionChange]);
 

src/javascript/app/pages/form/time-selection.jsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
 import moment from 'moment/moment';
 import { useTimeChange } from '../../hooks/events';
-import tradeManager from '../../common/trade_manager.js';
+// import tradeManager from '../../common/trade_manager.js';
+import dataManager from '../../common/data_manager.js';
 import { setMinMaxTime } from '../../common/helpers.js';
 
 const TimeContent = ({ time, onUpdate, elementId }) => {
@@ -12,8 +13,8 @@ const TimeContent = ({ time, onUpdate, elementId }) => {
     const { close } = useDropdown();
 
     useEffect(() => {
-        setStartTimeData(tradeManager.get('starttime_obj'));
-        setExpiryTimeData(tradeManager.get('expirytime_obj'));
+        setStartTimeData(dataManager.get('starttime_obj', 'trade'));
+        setExpiryTimeData(dataManager.get('expirytime_obj', 'trade'));
     }, [hasTimeChange]);
 
     const formatTime = (timeObj) => {

src/javascript/app/pages/loader.jsx

@@ -1,12 +1,11 @@
 /* eslint-disable import/no-unresolved */
-/* eslint-disable no-console */
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Skeleton } from '@deriv-com/quill-ui';
 import Portal from './portal';
 import { getElementById } from '../../_common/common_functions';
 import { useContractChange } from '../hooks/events';
-import contractManager from '../common/contract_manager';
+import dataManager from '../common/data_manager';
 
 const PurchaseSectionLoader = ({ hideBottom }) => (
     <>
@@ -46,7 +45,7 @@ const Loader = () => {
     const page = getPageType().name;
 
     useEffect(() => {
-        const hidePageLoader = contractManager.get('hidePageLoader');
+        const hidePageLoader = dataManager.get('hidePageLoader', 'contract');
 
         if (hidePageLoader){
             setLoading(false);

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

@@ -6,7 +6,7 @@ const getElementById  = require('../../../_common/common_functions').getElementB
 const getLanguage     = require('../../../_common/language').get;
 const TabSelector     = require('../../../_common/tab_selector');
 const Url             = require('../../../_common/url');
-const contractManager = require('../../common/contract_manager').default;
+const dataManager     = require('../../common/data_manager').default;
 
 /*
  * This file contains the code related to loading of trading page bottom analysis
@@ -36,10 +36,10 @@ const TradingAnalysis = (() => {
         const tab_form_name     = tab_obj[form_name] || form_name;
         form_name = map_obj[form_name] || form_name;
 
-        contractManager.set({
+        dataManager.set({
             actualFormName     : form_name,
             explanationFormName: tab_form_name,
-        });
+        }, 'contract');
 
         $('#tab_last_digit').setVisibility(/digits|overunder|evenodd/.test(tab_form_name));
 

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

@@ -2,7 +2,7 @@ const moment             = require('moment');
 const Contract           = require('./contract');
 const Defaults           = require('./defaults');
 const Tick               = require('./tick');
-const tradeManager       = require('../../common/trade_manager').default;
+const dataManager        = require('../../common/data_manager').default;
 const addComma           = require('../../../_common/base/currency_base').addComma;
 const elementTextContent = require('../../../_common/common_functions').elementTextContent;
 const getElementById     = require('../../../_common/common_functions').getElementById;
@@ -87,9 +87,9 @@ const Barriers = (() => {
                     showHideRelativeTip(barrier.barrier, [tooltip, span]);
                     barrier_data.show_barrier = true;
                     barrier_data.show_barrier_highlow = false;
-                    tradeManager.set({
+                    dataManager.set({
                         barrier_data,
-                    }, 'barrier');
+                    }, 'trade', 'barrier');
                     return;
                 } else if (barrier.count === 2) {
                     getElementById('barrier_row').style.display = 'none';
@@ -170,9 +170,9 @@ const Barriers = (() => {
                     Defaults.set(BARRIER_LOW, low_elm.value);
                     barrier_data.show_barrier = false;
                     barrier_data.show_barrier_highlow = true;
-                    tradeManager.set({
+                    dataManager.set({
                         barrier_data,
-                    }, 'barrier');
+                    }, 'trade', 'barrier');
                     return;
                 }
             }
@@ -215,9 +215,9 @@ const Barriers = (() => {
             }
         }
 
-        tradeManager.set({
+        dataManager.set({
             barrier_error,
-        },'barrier');
+        }, 'trade', 'barrier');
     };
 
     const showHideRelativeTip = (barrier, arr_el) => {