From cf84b685c6421c07d0e2e210c9399f7583b3b057 Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <aizad@deriv.com>
Date: Thu, 24 Nov 2022 10:34:21 +0800
Subject: [PATCH 1/3] task: fix derived toggle click on reload

---
 src/javascript/app/pages/trade/markets.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index 39af419a53b12..2d9512174c285 100644
--- a/src/javascript/app/pages/trade/markets.jsx
+++ b/src/javascript/app/pages/trade/markets.jsx
@@ -191,7 +191,10 @@ class Markets extends React.Component {
     };
 
     toggleAccordion = () => {
-        this.setState({ open_accordion: !this.state.open_accordion });
+        this.setState((prevState) => ({
+            ...prevState,
+            open_accordion: !prevState.open_accordion,
+        }));
     }
 
     getCurrentUnderlying = () => {
@@ -228,7 +231,6 @@ class Markets extends React.Component {
                 } else {
                     this.setState({
                         subgroup_active: false,
-                        open_accordion : false,
                     });
                 }
             }
@@ -538,7 +540,7 @@ class Markets extends React.Component {
                                                     className={classNames('market', {
                                                         'active': subgroup_active,
                                                     })}
-                                                    onClick={toggleAccordion || (subgroup_active ? toggleAccordion : '')}
+                                                    onClick={toggleAccordion}
                                                 >
                                                     <span className={`icon synthetic_index ${open_accordion ? 'active' : ''}`} />
                                                     <span>{group_markets[item].markets[0].subgroup_name}</span>

From 530d445145cff3505529c9effb0fb5be3f77f601 Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <aizad@deriv.com>
Date: Thu, 24 Nov 2022 11:02:09 +0800
Subject: [PATCH 2/3] fix: active icon behavior

---
 src/javascript/app/pages/trade/markets.jsx | 5 +++--
 src/sass/app/components/market.scss        | 5 +++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index 2d9512174c285..490d20fb6f426 100644
--- a/src/javascript/app/pages/trade/markets.jsx
+++ b/src/javascript/app/pages/trade/markets.jsx
@@ -538,11 +538,12 @@ class Markets extends React.Component {
                                             >
                                                 <div
                                                     className={classNames('market', {
-                                                        'active': subgroup_active,
+                                                        'active'         : subgroup_active,
+                                                        'accordion-label': !!open_accordion,
                                                     })}
                                                     onClick={toggleAccordion}
                                                 >
-                                                    <span className={`icon synthetic_index ${open_accordion ? 'active' : ''}`} />
+                                                    <span className={`icon synthetic_index ${subgroup_active ? 'active' : ''}`} />
                                                     <span>{group_markets[item].markets[0].subgroup_name}</span>
                                                     <span className={`accordion-icon icon ${open_accordion ? 'active' : ''}`} />
                                                 </div>
diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss
index 9e690c8e1a1fe..63836e7c35773 100644
--- a/src/sass/app/components/market.scss
+++ b/src/sass/app/components/market.scss
@@ -151,6 +151,11 @@
                     display: flex;
                     flex-direction: column;
 
+                    .accordion-label {
+                        &:hover {
+                            text-decoration: none;
+                        }
+                    }
                     .accordion-content {
                         flex-direction: column;
                         display: none;

From 5a42727aa8086649c7edcc5f7860d5940fdfd18d Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <aizad@deriv.com>
Date: Thu, 24 Nov 2022 11:42:48 +0800
Subject: [PATCH 3/3] resolved: replace with classNames function

---
 src/javascript/app/pages/trade/markets.jsx | 42 +++++++++++++++++-----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index 490d20fb6f426..b6cf22dcab7dc 100644
--- a/src/javascript/app/pages/trade/markets.jsx
+++ b/src/javascript/app/pages/trade/markets.jsx
@@ -523,11 +523,16 @@ class Markets extends React.Component {
                                             <div>
                                                 {group_markets[item].markets.map((m) => (
                                                     <div
-                                                        className={`market ${active_market === m.key ? 'active' : ''}`}
+                                                        className={classNames('market', {
+                                                            'active': active_market === m.key,
+                                                        })}
                                                         key={m.key}
                                                         onClick={scrollToMarket.bind(null, `${m.key}`)}
                                                     >
-                                                        <span className={`icon ${m.key} ${active_market === m.key ? 'active' : ''}`} />
+                                                        <span className={classNames(`icon ${m.key}`, {
+                                                            'active': active_market === m.key,
+                                                        })}
+                                                        />
                                                         <span>{m.name}</span>
                                                     </div>))}
                                             </div>
@@ -543,14 +548,25 @@ class Markets extends React.Component {
                                                     })}
                                                     onClick={toggleAccordion}
                                                 >
-                                                    <span className={`icon synthetic_index ${subgroup_active ? 'active' : ''}`} />
+                                                    <span className={classNames('icon synthetic_index', {
+                                                        'active': subgroup_active,
+                                                    })}
+                                                    />
                                                     <span>{group_markets[item].markets[0].subgroup_name}</span>
-                                                    <span className={`accordion-icon icon ${open_accordion ? 'active' : ''}`} />
+                                                    <span className={classNames('accordion-icon icon', {
+                                                        'active': open_accordion,
+                                                    })}
+                                                    />
                                                 </div>
-                                                <div className={`${open_accordion ? 'accordion-content--active' : 'accordion-content'}`}>
+                                                <div className={classNames('accordion-content', {
+                                                    'accordion-content--active': open_accordion,
+                                                })}
+                                                >
                                                     {group_markets[item].markets.map((m) => (
                                                         <div
-                                                            className={`subgroup market ${active_market === m.key ? 'subgroup-active' : ''}`}
+                                                            className={classNames('subgroup market', {
+                                                                'subgroup-active': active_market === m.key,
+                                                            })}
                                                             key={m.key}
                                                             onClick={scrollToMarket.bind(null, `${m.key}`)}
                                                         >
@@ -577,9 +593,14 @@ class Markets extends React.Component {
                                                                 onClick = {scrollToMarket.bind(null, m.key)}
                                                                 key = {m.key}
                                                                 data-market = {m.key}
-                                                                className={active_market === m.key ? 'active' : ''}
+                                                                className={classNames('', {
+                                                                    'active': active_market === m.key,
+                                                                })}
                                                             >
-                                                                <span className={`icon ${m.key} ${active_market === m.key ? 'active' : ''}`} />
+                                                                <span className={classNames(`icon ${m.key}`, {
+                                                                    'active': active_market === m.key,
+                                                                })}
+                                                                />
                                                             </li>
                                                         ))}
                                                     </React.Fragment>
@@ -592,7 +613,10 @@ class Markets extends React.Component {
                                                             'active': (active_market === derived_category || subgroup_active),
                                                         })}
                                                     >
-                                                        <span className={`icon synthetic_index ${(active_market === derived_category || subgroup_active) ? 'active' : ''}`} />
+                                                        <span className={classNames('icon synthetic_index', {
+                                                            'active': active_market === derived_category || subgroup_active,
+                                                        })}
+                                                        />
                                                     </li>
                                                 )
                                             );