m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
Code

Refactor MenuBar component (#8643)

Browse Source 
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.
This commit is contained in:
Mark Stacey 2020-05-22 14:11:42 -03:00 committed by GitHub
parent 684c58b94e
commit 8379dd6a07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/components/app/menu-bar/index.js
View File

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

68
ui/app/components/app/menu-bar/menu-bar.component.js
View File

@ -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>
)
}
}

4
ui/app/components/app/menu-bar/menu-bar.container.js
View File

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

56
ui/app/components/app/menu-bar/menu-bar.js Normal file
View File

@ -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>
)
}

13
ui/app/components/app/menu-bar/tests/menu-bar.test.js
View File

@ -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'))
})
})