Refactor `MenuBar` component (#8643)

The `MenuBar` component has been converted to a functional component.
This was done to make upcoming changes related to the home screen
redesign easier to implement.

ui/app/components/app/menu-bar/index.js

@@ -1 +1 @@
-export { default } from './menu-bar.container'
+export { default } from './menu-bar'

ui/app/components/app/menu-bar/menu-bar.component.js

@@ -1,68 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import Tooltip from '../../ui/tooltip'
-import SelectedAccount from '../selected-account'
-import ConnectedStatusIndicator from '../connected-status-indicator'
-import AccountDetailsDropdown from '../dropdowns/account-details-dropdown'
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
-import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes'
-
-export default class MenuBar extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  static propTypes = {
-    history: PropTypes.object.isRequired,
-  }
-
-  state = { accountDetailsMenuOpen: false }
-
-  render () {
-    const { history } = this.props
-    const { t } = this.context
-    const { accountDetailsMenuOpen } = this.state
-
-    return (
-      <div className="menu-bar">
-        {
-          getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-            ? <ConnectedStatusIndicator onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)} />
-            : null
-        }
-
-        <SelectedAccount />
-
-        <Tooltip title={t('accountOptions')} position="left">
-          <button
-            className="fas fa-ellipsis-v menu-bar__account-options"
-            title={t('accountOptions')}
-            onClick={() => {
-              this.context.metricsEvent({
-                eventOpts: {
-                  category: 'Navigation',
-                  action: 'Home',
-                  name: 'Opened Account Options',
-                },
-              })
-              this.setState((prevState) => ({
-                accountDetailsMenuOpen: !prevState.accountDetailsMenuOpen,
-              }))
-            }}
-          >
-          </button>
-        </Tooltip>
-
-        {
-          accountDetailsMenuOpen && (
-            <AccountDetailsDropdown
-              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
-            />
-          )
-        }
-      </div>
-    )
-  }
-}

ui/app/components/app/menu-bar/menu-bar.container.js

@@ -1,4 +0,0 @@
-import { withRouter } from 'react-router-dom'
-import MenuBar from './menu-bar.component'
-
-export default withRouter(MenuBar)

ui/app/components/app/menu-bar/menu-bar.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import Tooltip from '../../ui/tooltip'
+import SelectedAccount from '../selected-account'
+import ConnectedStatusIndicator from '../connected-status-indicator'
+import AccountDetailsDropdown from '../dropdowns/account-details-dropdown'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes'
+import { useI18nContext } from '../../../hooks/useI18nContext'
+import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useHistory } from 'react-router-dom'
+
+export default function MenuBar () {
+  const t = useI18nContext()
+  const openAccountOptionsEvent = useMetricEvent({
+    eventOpts: {
+      category: 'Navigation',
+      action: 'Home',
+      name: 'Opened Account Options',
+    },
+  })
+  const history = useHistory()
+  const [accountDetailsMenuOpen, setAccountDetailsMenuOpen] = useState(false)
+
+  return (
+    <div className="menu-bar">
+      {
+        getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+          ? <ConnectedStatusIndicator onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)} />
+          : null
+      }
+
+      <SelectedAccount />
+
+      <Tooltip title={t('accountOptions')} position="left">
+        <button
+          className="fas fa-ellipsis-v menu-bar__account-options"
+          title={t('accountOptions')}
+          onClick={() => {
+            openAccountOptionsEvent()
+            setAccountDetailsMenuOpen(true)
+          }}
+        >
+        </button>
+      </Tooltip>
+
+      {
+        accountDetailsMenuOpen && (
+          <AccountDetailsDropdown
+            onClose={() => setAccountDetailsMenuOpen(false)}
+          />
+        )
+      }
+    </div>
+  )
+}

ui/app/components/app/menu-bar/tests/menu-bar.test.js

@@ -36,9 +36,11 @@ describe('MenuBar', function () {
         <MenuBar />
       </Provider>
     )
+    assert.ok(!wrapper.exists('AccountDetailsDropdown'))
     const accountOptions = wrapper.find('.menu-bar__account-options')
     accountOptions.simulate('click')
-    assert.equal(wrapper.find('MenuBar').instance().state.accountDetailsMenuOpen, true)
+    wrapper.update()
+    assert.ok(wrapper.exists('AccountDetailsDropdown'))
   })
 
   it('sets accountDetailsMenuOpen to false when closed', function () {
@@ -48,12 +50,13 @@ describe('MenuBar', function () {
         <MenuBar />
       </Provider>
     )
-    wrapper.find('MenuBar').instance().setState({ accountDetailsMenuOpen: true })
+    const accountOptions = wrapper.find('.menu-bar__account-options')
+    accountOptions.simulate('click')
     wrapper.update()
-
+    assert.ok(wrapper.exists('AccountDetailsDropdown'))
     const accountDetailsMenu = wrapper.find('AccountDetailsDropdown')
     accountDetailsMenu.prop('onClose')()
-
-    assert.equal(wrapper.find('MenuBar').instance().state.accountDetailsMenuOpen, false)
+    wrapper.update()
+    assert.ok(!wrapper.exists('AccountDetailsDropdown'))
   })
 })