diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-09-12 08:32:37 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-09-20 07:37:23 +0800 |
commit | b579ee9619d5d775484f382b800c3426311da19d (patch) | |
tree | 33c4e1293178d1c6cdb4bdd74ee7732d516d072a /ui/app/components/pages/settings/settings.component.js | |
parent | 3c3fed46cb032f59cd30daae04c17475196cd5c9 (diff) | |
download | tangerine-wallet-browser-b579ee9619d5d775484f382b800c3426311da19d.tar.gz tangerine-wallet-browser-b579ee9619d5d775484f382b800c3426311da19d.tar.zst tangerine-wallet-browser-b579ee9619d5d775484f382b800c3426311da19d.zip |
Refactor settings page to use JSX and follow component file folder structure
Diffstat (limited to 'ui/app/components/pages/settings/settings.component.js')
-rw-r--r-- | ui/app/components/pages/settings/settings.component.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/ui/app/components/pages/settings/settings.component.js b/ui/app/components/pages/settings/settings.component.js new file mode 100644 index 000000000..94a97bba1 --- /dev/null +++ b/ui/app/components/pages/settings/settings.component.js @@ -0,0 +1,54 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { Switch, Route, matchPath } from 'react-router-dom' +import TabBar from '../../tab-bar' +import SettingsTab from './settings-tab' +import InfoTab from './info-tab' +import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes' + +export default class SettingsPage extends PureComponent { + static propTypes = { + location: PropTypes.object, + history: PropTypes.object, + t: PropTypes.func, + } + + static contextTypes = { + t: PropTypes.func, + } + + render () { + const { history, location } = this.props + + return ( + <div className="main-container settings-page"> + <div className="settings-page__header"> + <div + className="settings-page__close-button" + onClick={() => history.push(DEFAULT_ROUTE)} + /> + <TabBar + tabs={[ + { content: this.context.t('settings'), key: SETTINGS_ROUTE }, + { content: this.context.t('info'), key: INFO_ROUTE }, + ]} + isActive={key => matchPath(location.pathname, { path: key, exact: true })} + onSelect={key => history.push(key)} + /> + </div> + <Switch> + <Route + exact + path={INFO_ROUTE} + component={InfoTab} + /> + <Route + exact + path={SETTINGS_ROUTE} + component={SettingsTab} + /> + </Switch> + </div> + ) + } +} |