From e80f1d54c42dda26618b7b119d76c944eadd40e9 Mon Sep 17 00:00:00 2001
From: aizad-deriv <103104395+aizad-deriv@users.noreply.github.com>
Date: Mon, 30 Jan 2023 13:59:34 +0800
Subject: [PATCH] Aizad/Fix Derived toggle click on reload (#7293)

* task: fix derived toggle click on reload

* fix: active icon behavior

* resolved: replace with classNames function

---------

Co-authored-by: Matin shafiei <matin@deriv.com>
---
 src/javascript/app/pages/trade/markets.jsx | 53 ++++++++++++++++------
 src/sass/app/components/market.scss        |  5 ++
 2 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/javascript/app/pages/trade/markets.jsx b/src/javascript/app/pages/trade/markets.jsx
index fd8c7d481872d..14edc1ffc40b6 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,
                     });
                 }
             }
@@ -523,11 +525,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>
@@ -538,18 +545,30 @@ class Markets extends React.Component {
                                             >
                                                 <div
                                                     className={classNames('market', {
-                                                        'active': subgroup_active,
+                                                        'active'         : subgroup_active,
+                                                        'accordion-label': !!open_accordion,
                                                     })}
-                                                    onClick={toggleAccordion || (subgroup_active ? toggleAccordion : '')}
+                                                    onClick={toggleAccordion}
                                                 >
-                                                    <span className={`icon synthetic_index ${open_accordion ? '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}`)}
                                                         >
@@ -576,9 +595,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>
@@ -591,7 +615,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>
                                                 )
                                             );
diff --git a/src/sass/app/components/market.scss b/src/sass/app/components/market.scss
index 9e79844dfdda3..9a9d783351196 100644
--- a/src/sass/app/components/market.scss
+++ b/src/sass/app/components/market.scss
@@ -170,6 +170,11 @@
                     display: flex;
                     flex-direction: column;
 
+                    .accordion-label {
+                        &:hover {
+                            text-decoration: none;
+                        }
+                    }
                     .accordion-content {
                         flex-direction: column;
                         display: none;