Skip to content

Commit

Permalink
chore: initial refactor attempt
Browse files Browse the repository at this point in the history
  • Loading branch information
@prince-deriv
prince-deriv committed Aug 13, 2024
1 parent e087b98 commit 51d0a85
Show file tree
Hide file tree
Showing 28 changed files with 428 additions and 438 deletions.
8 changes: 4 additions & 4 deletions src/javascript/app/common/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,13 @@ const paramsMap = {
'callputequal' : PARAM_NAMES.IS_EQUAL,
};

const setDefaultParams = (elementId, value) => {
if (paramsMap[elementId]) {
const setDefaultParams = (element_id, value) => {
if (paramsMap[element_id]) {
const currency = Defaults.get(PARAM_NAMES.CURRENCY);
if (elementId === 'amount' && isCryptocurrency(currency)) {
if (element_id === 'amount' && isCryptocurrency(currency)) {
Defaults.set('amount_crypto', value);
} else {
Defaults.set(paramsMap[elementId], value);
Defaults.set(paramsMap[element_id], value);
}
triggerSessionChange();
}
Expand Down
2 changes: 1 addition & 1 deletion src/javascript/app/components/loading-spinner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
42 changes: 21 additions & 21 deletions src/javascript/app/pages/bottom/explanation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ import { useContractChange } from '../../hooks/events.js';

export const Explanation = ({ explanationOnly = 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(
Expand All @@ -31,7 +31,7 @@ export const Explanation = ({ explanationOnly = false }) => {
const Notes = () => (
<>
<strong>{localize('Note')}: </strong>
{contractExplanationData.note[formName].content.map((data, idx) => (
{contractExplanationData.note[form_name].content.map((data, idx) => (
<span key={idx}>{parse(data)}</span>
))}
</>
Expand Down Expand Up @@ -93,19 +93,19 @@ export const Explanation = ({ explanationOnly = false }) => {
},
};

if (formName) {
if (form_name) {
return (
<div className='tab-explanation'>
{/* ========== Winning ========== */}
{!explanationOnly && (
<>
<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>
</div>
<div className='explanation-content'>
{contractExplanationData.winning[formName].content.map(
{contractExplanationData.winning[form_name].content.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
)
Expand All @@ -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' />
Expand All @@ -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>
)}
Expand All @@ -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 >{contractExplanationData.explain[form_name].title}</Text>
</div>
<div className='explanation-content'>
{contractExplanationData.explain[formName].content.map(
{contractExplanationData.explain[form_name].content.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
)
)}
</div>

{contractExplanationData.explain[formName].title_secondary && (
{contractExplanationData.explain[form_name].title_secondary && (
<div className='explanation-heading secondary-heading'>
<Text size='lg' bold>
{contractExplanationData.explain[formName].title_secondary}
{contractExplanationData.explain[form_name].title_secondary}
</Text>
</div>
)}

{contractExplanationData.explain[formName].content_secondary && (
{contractExplanationData.explain[form_name].content_secondary && (
<div className='explanation-content'>
{contractExplanationData.explain[formName].content_secondary.map(
{contractExplanationData.explain[form_name].content_secondary.map(
(data, idx) => (
<Text size='md' key={idx}>{parse(data)}</Text>
)
Expand All @@ -184,7 +184,7 @@ export const Explanation = ({ explanationOnly = false }) => {

{/* ========== Note ========== */}
{!explanationOnly && (
contractExplanationData.note[formName] && (
contractExplanationData.note[form_name] && (
<SectionMessage status='info' message={<Notes />} size='sm' />
)
)}
Expand Down
12 changes: 6 additions & 6 deletions src/javascript/app/pages/bottom/tabs.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import dataManager from '../../common/data_manager.js';
import LastDigit from '../trade/last_digit.jsx';

const BottomTabs = () => {
const hasMarketChange = useMarketChange();
const has_market_change = useMarketChange();
const [selectedTab, setSelectedTab] = useState(1);
const [hasLastDigit, setHasLastDigit] = useState(false);
const [formName, setFormName] = useState('');
const hasContractChange = useContractChange();
const [form_name, setFormName] = useState('');
const has_contract_change = useContractChange();
const savedTab = sessionStorage.getItem('currentTab');
const triggerOldTabTimer = useRef();
const [isShowGraph, setIsShowGraph] = useState(false);
Expand All @@ -37,11 +37,11 @@ const BottomTabs = () => {

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) {
Expand Down
4 changes: 2 additions & 2 deletions src/javascript/app/pages/form/barrier-fields.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ const BarrierFields = ({ form_name, handleAmountChange }) => {
const barrier_low = Defaults.get(PARAM_NAMES.BARRIER_LOW);

useEffect(() => {
setBarrierData((oldData) => ({
...oldData,
setBarrierData((old_data) => ({
...old_data,
...dataManager.getAllTrades(),
}));
}, [hasBarrierChange]);
Expand Down
10 changes: 5 additions & 5 deletions src/javascript/app/pages/form/currency-dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { CustomDropdown, DropdownItem, DropdownTitle, useDropdown } from '@deriv
import { setDefaultParams } from '../../common/helpers';
import { localize } from '../../../_common/localize';

const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
const CurrencyContent = ({ currency_list, currency, onUpdate, element_id }) => {
const { close } = useDropdown();

const getCurrencyGroupMap = {
Expand All @@ -22,8 +22,8 @@ const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
label={item.text}
selected={item.value === currency}
onClick={() => {
onUpdate(elementId, item.value, 'change');
setDefaultParams(elementId, item.value);
onUpdate(element_id, item.value, 'change');
setDefaultParams(element_id, item.value);
close();
}}
/>
Expand All @@ -33,7 +33,7 @@ const CurrencyContent = ({ currency_list, currency, onUpdate, elementId }) => {
</div>
);
};
export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId }) => (
export const CurrencyDropdown = ({ currency_list, currency, onUpdate, element_id }) => (
<CustomDropdown
value={currency}
fullHeightOnOpen={false}
Expand All @@ -42,7 +42,7 @@ export const CurrencyDropdown = ({ currency_list, currency, onUpdate, elementId
currency_list={currency_list}
currency={currency}
onUpdate={onUpdate}
elementId={elementId}
element_id={element_id}
/>
</CustomDropdown>
);
12 changes: 6 additions & 6 deletions src/javascript/app/pages/form/dropdown-component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from 'react';
import { CustomDropdown, DropdownItem, useDropdown } from '@deriv-com/quill-ui';
import { setDefaultParams } from '../../common/helpers';

const DropdownContent = ({ options, value, onUpdate, elementId }) => {
const DropdownContent = ({ options, value, onUpdate, element_id }) => {
const { close } = useDropdown();

const handleClick = (val) => {
if (elementId === 'expiry_date') {
if (element_id === 'expiry_date') {
onUpdate(val);
} else {
onUpdate(elementId, val, 'change');
onUpdate(element_id, val, 'change');
}
};

Expand All @@ -22,15 +22,15 @@ const DropdownContent = ({ options, value, onUpdate, elementId }) => {
selected={(item.value === value || item.text === value)}
onClick={() => {
handleClick(item.value);
setDefaultParams(elementId, item.value);
setDefaultParams(element_id, item.value);
close();
}}
/>
))}
</div>
);
};
export const DropdownComponent = ({ label = '', options, value, onUpdate, elementId }) => (
export const DropdownComponent = ({ label = '', options, value, onUpdate, element_id }) => (
<CustomDropdown
value={value}
label={label}
Expand All @@ -40,7 +40,7 @@ export const DropdownComponent = ({ label = '', options, value, onUpdate, elemen
options={options}
value={value}
onUpdate={onUpdate}
elementId={elementId}
element_id={element_id}
/>
</CustomDropdown>
);
Loading

0 comments on commit 51d0a85

Please sign in to comment.