Skip to content

Commit 576f445

Browse files
meenakshi-derivmeenakshi-deriv
committed
fix: added selected tab in session storage and refactored code
1 parent 2b6bee4 commit 576f445

File tree

5 files changed

+186
-170
lines changed

5 files changed

+186
-170
lines changed

‎src/javascript/app/pages/bottom/explanation_data.js renamed to ‎src/javascript/app/pages/bottom/data/explanation.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { localize } from '../../../_common/localize.js';
1+
import { localize } from '../../../../_common/localize.js';
22

33
export const contractExplanationData = {
44
winning: {

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

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import React, { useEffect, useState } from 'react';
2+
import parse from 'html-react-parser';
3+
import { contractExplanationData } from './data/explanation.js';
4+
import { useContractChange } from '../../hooks/events';
5+
import Defaults, { PARAM_NAMES } from '../trade/defaults';
6+
import Language from '../../../_common/language';
7+
import Url from '../../../_common/url';
8+
import { localize } from '../../../_common/localize.js';
9+
10+
export const Explanation = () => {
11+
const language = Language.get();
12+
13+
const [formName,setFormName] = useState('');
14+
15+
const hasContractChanges = useContractChange();
16+
17+
useEffect(() => {
18+
const contractObject = {
19+
matchdiff : 'digits',
20+
callputequal: 'risefall',
21+
callput : 'higherlower',
22+
};
23+
24+
const newFormName = Defaults.get(PARAM_NAMES.FORM_NAME) || 'risefall';
25+
const finalFormName = contractObject[newFormName] || newFormName;
26+
27+
setFormName(finalFormName);
28+
29+
},[hasContractChanges]);
30+
31+
const image_path = Url.urlForStatic(
32+
`images/pages/trade-explanation/${language}/`
33+
);
34+
35+
const images = {
36+
risefall: {
37+
image1: 'rises.svg',
38+
image2: 'falls.svg',
39+
},
40+
higherlower: {
41+
image1: 'higher.svg',
42+
image2: 'lower.svg',
43+
},
44+
touchnotouch: {
45+
image1: 'touch.svg',
46+
image2: 'no-touch.svg',
47+
},
48+
endsinout: {
49+
image1: 'ends-between.svg',
50+
image2: 'ends-outside.svg',
51+
},
52+
staysinout: {
53+
image1: 'stays-between.svg',
54+
image2: 'goes-outside.svg',
55+
},
56+
digits: {
57+
image1: 'matches.svg',
58+
image2: 'differs.svg',
59+
},
60+
evenodd: {
61+
image1: 'even.svg',
62+
image2: 'odd.svg',
63+
},
64+
overunder: {
65+
image1: 'over.svg',
66+
image2: 'under.svg',
67+
},
68+
lookbackhigh: {
69+
image1: 'high-close.svg',
70+
},
71+
lookbacklow: {
72+
image1: 'close-low.svg',
73+
},
74+
lookbackhighlow: {
75+
image1: 'high-low.svg',
76+
},
77+
reset: {
78+
image1: 'reset-call.svg',
79+
image2: 'reset-put.svg',
80+
},
81+
highlowticks: {
82+
image1: 'high-tick.svg',
83+
image2: 'low-tick.svg',
84+
},
85+
runs: {
86+
image1: 'only-ups.svg',
87+
image2: 'only-downs.svg',
88+
},
89+
};
90+
91+
if (formName){
92+
return (
93+
<div className='tab-explanation'>
94+
{/* ========== Winning ========== */}
95+
<div id='explanation_winning'>
96+
<div id={`winning_${formName}`}>
97+
<h3>{localize('Winning the contract')}</h3>
98+
{contractExplanationData.winning[formName].content.map(
99+
(data, idx) => (
100+
<p key={idx}>{parse(data)}</p>
101+
)
102+
)}
103+
</div>
104+
</div>
105+
106+
{/* ========== Image ========== */}
107+
{images[formName] && (
108+
<div id='explanation_image'>
109+
<div className='gr-row'>
110+
<div className='gr-2 hide-mobile' />
111+
<div
112+
className='gr-4 gr-12-m padding-right'
113+
style={{ margin: 'auto' }}
114+
>
115+
<img
116+
id='explanation_image_1'
117+
className='responsive'
118+
src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
119+
/>
120+
</div>
121+
<div className='gr-4 gr-12-m padding-left'>
122+
<img
123+
id='explanation_image_2'
124+
className='responsive'
125+
src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
126+
/>
127+
</div>
128+
<div className='gr-2 hide-mobile' />
129+
</div>
130+
</div>
131+
)}
132+
133+
{/* ========== Explain ========== */}
134+
<div id='explanation_explain' className='gr-child'>
135+
<div id={`explain_${formName}`}>
136+
<h3>{contractExplanationData.explain[formName].title}</h3>
137+
{contractExplanationData.explain[formName].content.map(
138+
(data, idx) => (
139+
<p key={idx}>{parse(data)}</p>
140+
)
141+
)}
142+
{contractExplanationData.explain[formName].title_secondary && (
143+
<h3 className='secondary-title'>
144+
{contractExplanationData.explain[formName].title_secondary}
145+
</h3>
146+
)}
147+
{contractExplanationData.explain[formName].content_secondary &&
148+
contractExplanationData.explain[formName].content_secondary.map(
149+
(data, idx) => <p key={idx}>{parse(data)}</p>
150+
)}
151+
</div>
152+
</div>
153+
154+
{/* ========== Note ========== */}
155+
{contractExplanationData.note[formName] && (
156+
<p className='hint'>
157+
<strong>{localize('Note')}: </strong>
158+
{contractExplanationData.note[formName].content.map((data, idx) => (
159+
<span key={idx}>{parse(data)}</span>
160+
))}
161+
</p>
162+
)}
163+
</div>
164+
);
165+
}
166+
167+
return <></>;
168+
};

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

Lines changed: 11 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,14 @@
11
/* eslint-disable no-console */
22
import React, { useEffect, useState } from 'react';
33
import ReactDOM from 'react-dom';
4-
import parse from 'html-react-parser';
54
import { SegmentedControlSingleChoice } from '@deriv-com/quill-ui';
6-
import { contractExplanationData } from './explanation_data.js';
5+
import { Explanation } from './explanation.jsx';
76
import { getElementById } from '../../../_common/common_functions';
87
import WebtraderChart from '../trade/charts/webtrader_chart';
9-
import { useContractChange, useMarketChange } from '../../hooks/events';
10-
import Defaults, { PARAM_NAMES } from '../trade/defaults';
11-
import Language from '../../../_common/language';
12-
import Url from '../../../_common/url';
13-
import { localize } from '../../../_common/localize.js';
14-
15-
const Explanation = () => {
16-
const language = Language.get();
17-
18-
const [formName,setFormName] = useState('');
19-
20-
const hasContractChanges = useContractChange();
21-
22-
useEffect(() => {
23-
const contractObject = {
24-
matchdiff : 'digits',
25-
callputequal: 'risefall',
26-
callput : 'higherlower',
27-
};
28-
29-
const newFormName = Defaults.get(PARAM_NAMES.FORM_NAME) || 'risefall';
30-
const finalFormName = contractObject[newFormName] || newFormName;
31-
32-
setFormName(finalFormName);
33-
34-
},[hasContractChanges]);
35-
36-
const image_path = Url.urlForStatic(
37-
`images/pages/trade-explanation/${language}/`
38-
);
39-
40-
const images = {
41-
risefall: {
42-
image1: 'rises.svg',
43-
image2: 'falls.svg',
44-
},
45-
higherlower: {
46-
image1: 'higher.svg',
47-
image2: 'lower.svg',
48-
},
49-
touchnotouch: {
50-
image1: 'touch.svg',
51-
image2: 'no-touch.svg',
52-
},
53-
endsinout: {
54-
image1: 'ends-between.svg',
55-
image2: 'ends-outside.svg',
56-
},
57-
staysinout: {
58-
image1: 'stays-between.svg',
59-
image2: 'goes-outside.svg',
60-
},
61-
digits: {
62-
image1: 'matches.svg',
63-
image2: 'differs.svg',
64-
},
65-
evenodd: {
66-
image1: 'even.svg',
67-
image2: 'odd.svg',
68-
},
69-
overunder: {
70-
image1: 'over.svg',
71-
image2: 'under.svg',
72-
},
73-
lookbackhigh: {
74-
image1: 'high-close.svg',
75-
},
76-
lookbacklow: {
77-
image1: 'close-low.svg',
78-
},
79-
lookbackhighlow: {
80-
image1: 'high-low.svg',
81-
},
82-
reset: {
83-
image1: 'reset-call.svg',
84-
image2: 'reset-put.svg',
85-
},
86-
highlowticks: {
87-
image1: 'high-tick.svg',
88-
image2: 'low-tick.svg',
89-
},
90-
runs: {
91-
image1: 'only-ups.svg',
92-
image2: 'only-downs.svg',
93-
},
94-
};
95-
96-
if (formName){
97-
return (
98-
<div className='tab-explanation'>
99-
{/* ========== Winning ========== */}
100-
<div id='explanation_winning'>
101-
<div id={`winning_${formName}`}>
102-
<h3>{localize('Winning the contract')}</h3>
103-
{contractExplanationData.winning[formName].content.map(
104-
(data, idx) => (
105-
<p key={idx}>{parse(data)}</p>
106-
)
107-
)}
108-
</div>
109-
</div>
110-
111-
{/* ========== Image ========== */}
112-
{images[formName] && (
113-
<div id='explanation_image'>
114-
<div className='gr-row'>
115-
<div className='gr-2 hide-mobile' />
116-
<div
117-
className='gr-4 gr-12-m padding-right'
118-
style={{ margin: 'auto' }}
119-
>
120-
<img
121-
id='explanation_image_1'
122-
className='responsive'
123-
src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
124-
/>
125-
</div>
126-
<div className='gr-4 gr-12-m padding-left'>
127-
<img
128-
id='explanation_image_2'
129-
className='responsive'
130-
src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
131-
/>
132-
</div>
133-
<div className='gr-2 hide-mobile' />
134-
</div>
135-
</div>
136-
)}
137-
138-
{/* ========== Explain ========== */}
139-
<div id='explanation_explain' className='gr-child'>
140-
<div id={`explain_${formName}`}>
141-
<h3>{contractExplanationData.explain[formName].title}</h3>
142-
{contractExplanationData.explain[formName].content.map(
143-
(data, idx) => (
144-
<p key={idx}>{parse(data)}</p>
145-
)
146-
)}
147-
{contractExplanationData.explain[formName].title_secondary && (
148-
<h3 className='secondary-title'>
149-
{contractExplanationData.explain[formName].title_secondary}
150-
</h3>
151-
)}
152-
{contractExplanationData.explain[formName].content_secondary &&
153-
contractExplanationData.explain[formName].content_secondary.map(
154-
(data, idx) => <p key={idx}>{parse(data)}</p>
155-
)}
156-
</div>
157-
</div>
158-
159-
{/* ========== Note ========== */}
160-
{contractExplanationData.note[formName] && (
161-
<p className='hint'>
162-
<strong>{localize('Note')}: </strong>
163-
{contractExplanationData.note[formName].content.map((data, idx) => (
164-
<span key={idx}>{parse(data)}</span>
165-
))}
166-
</p>
167-
)}
168-
</div>
169-
);
170-
}
171-
172-
return <></>;
173-
};
8+
import { useMarketChange } from '../../hooks/events';
1749

17510
const Graph = () => (
176-
<div id='tab_graph'>
11+
<div id='tab_graph' className='chart-section'>
17712
<p className='error-msg' id='chart-error' />
17813
<div id='trade_live_chart'>
17914
<div id='webtrader_chart' />
@@ -186,6 +21,13 @@ const BottomTabs = () => {
18621
const [selectedTab, setSelectedTab] = useState(1);
18722
const [showGraph, setShowGraph] = useState(true);
18823

24+
useEffect(() => {
25+
const savedTab = sessionStorage.getItem('currentAnalysisTab');
26+
if (savedTab !== null) {
27+
setSelectedTab(Number(savedTab));
28+
}
29+
}, []);
30+
18931
const renderGraph = (callback) => {
19032
setTimeout(() => {
19133
WebtraderChart.cleanupChart();
@@ -210,6 +52,7 @@ const BottomTabs = () => {
21052
}, [hasMarketChange]);
21153

21254
useEffect(() => {
55+
sessionStorage.setItem('currentAnalysisTab', selectedTab);
21356
if (selectedTab === 0) {
21457
renderGraph();
21558
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const TradingAnalysis = (() => {
3434
form_name = map_obj[form_name] || form_name;
3535

3636
$('#tab_last_digit').setVisibility(/digits|overunder|evenodd/.test(form_name));
37-
sessionStorage.setItem('currentAnalysisTab', getActiveTab());
37+
3838
loadAnalysisTab();
3939
};
4040

0 commit comments

Comments
 (0)