import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { Switch, Route, matchPath } from 'react-router-dom'; import classnames from 'classnames'; import TabBar from '../../components/app/tab-bar'; import { ALERTS_ROUTE, ADVANCED_ROUTE, SECURITY_ROUTE, GENERAL_ROUTE, ABOUT_US_ROUTE, SETTINGS_ROUTE, NETWORKS_ROUTE, ///: BEGIN:ONLY_INCLUDE_IN(flask) SNAPS_VIEW_ROUTE, SNAPS_LIST_ROUTE, ///: END:ONLY_INCLUDE_IN CONTACT_LIST_ROUTE, CONTACT_ADD_ROUTE, CONTACT_EDIT_ROUTE, CONTACT_VIEW_ROUTE, EXPERIMENTAL_ROUTE, ADD_NETWORK_ROUTE, } from '../../helpers/constants/routes'; import { getSettingsRoutes } from '../../helpers/utils/settings-search'; import SettingsTab from './settings-tab'; import AlertsTab from './alerts-tab'; import NetworksTab from './networks-tab'; import AdvancedTab from './advanced-tab'; import InfoTab from './info-tab'; import SecurityTab from './security-tab'; import ContactListTab from './contact-list-tab'; import ExperimentalTab from './experimental-tab'; ///: BEGIN:ONLY_INCLUDE_IN(flask) import SnapListTab from './flask/snaps-list-tab'; import ViewSnap from './flask/view-snap'; ///: END:ONLY_INCLUDE_IN import SettingsSearch from './settings-search'; import SettingsSearchList from './settings-search-list'; class SettingsPage extends PureComponent { static propTypes = { addressName: PropTypes.string, backRoute: PropTypes.string, currentPath: PropTypes.string, history: PropTypes.object, isAddressEntryPage: PropTypes.bool, isPopup: PropTypes.bool, isSnapViewPage: PropTypes.bool, pathnameI18nKey: PropTypes.string, initialBreadCrumbRoute: PropTypes.string, breadCrumbTextKey: PropTypes.string, initialBreadCrumbKey: PropTypes.string, mostRecentOverviewPage: PropTypes.string.isRequired, addNewNetwork: PropTypes.bool, conversionDate: PropTypes.number, }; static contextTypes = { t: PropTypes.func, }; state = { lastFetchedConversionDate: null, searchResults: [], isSearchList: false, searchText: '', }; componentDidMount() { this.handleConversionDate(); } componentDidUpdate() { this.handleConversionDate(); } handleConversionDate() { const { conversionDate } = this.props; if (conversionDate !== null) { this.setState({ lastFetchedConversionDate: conversionDate }); } } handleClickSetting(setting) { const { history } = this.props; history.push(setting.route); this.setState({ searchResults: '', isSearchList: '', }); } render() { const { history, backRoute, currentPath, mostRecentOverviewPage, addNewNetwork, isSnapViewPage, } = this.props; const { searchResults, isSearchList, searchText } = this.state; const { t } = this.context; return (
{currentPath !== SETTINGS_ROUTE && (
history.push(backRoute)} /> )}
{this.renderTitle()}
{ if (addNewNetwork) { history.push(NETWORKS_ROUTE); } else { history.push(mostRecentOverviewPage); } }} />
{ this.setState({ searchResults: results, isSearchList: searchQuery !== '', searchText: searchQuery, }); }} settingsRoutesList={getSettingsRoutes(t)} /> {isSearchList && searchText.length >= 3 && ( this.handleClickSetting(setting)} /> )}
{this.renderTabs()}
{isSnapViewPage ? null : this.renderSubHeader()} {this.renderContent()}
); } renderTitle() { const { t } = this.context; const { isPopup, pathnameI18nKey, addressName, isSnapViewPage, } = this.props; let titleText; if (isSnapViewPage) { titleText = t('snaps'); } else if (isPopup && addressName) { titleText = t('details'); } else if (pathnameI18nKey && isPopup) { titleText = t(pathnameI18nKey); } else { titleText = t('settings'); } return (
{titleText}
); } renderSubHeader() { const { t } = this.context; const { currentPath, isPopup, isAddressEntryPage, pathnameI18nKey, addressName, initialBreadCrumbRoute, breadCrumbTextKey, history, initialBreadCrumbKey, } = this.props; let subheaderText; if (isPopup && isAddressEntryPage) { subheaderText = t('settings'); } else if (initialBreadCrumbKey) { subheaderText = t(initialBreadCrumbKey); } else { subheaderText = t(pathnameI18nKey || 'general'); } return ( !currentPath.startsWith(NETWORKS_ROUTE) && (
initialBreadCrumbRoute && history.push(initialBreadCrumbRoute) } > {subheaderText}
{breadCrumbTextKey && (
{' > '} {t(breadCrumbTextKey)}
)} {isAddressEntryPage && (
{' > '} {addressName}
)}
) ); } renderTabs() { const { history, currentPath } = this.props; const { t } = this.context; return ( , content: t('general'), key: GENERAL_ROUTE, }, { icon: , content: t('advanced'), key: ADVANCED_ROUTE, }, { icon: , content: t('contacts'), key: CONTACT_LIST_ROUTE, }, ///: BEGIN:ONLY_INCLUDE_IN(flask) { icon: ( {t('snapsSettingsDescription')} ), content: t('snaps'), key: SNAPS_LIST_ROUTE, }, ///: END:ONLY_INCLUDE_IN { icon: , content: t('securityAndPrivacy'), key: SECURITY_ROUTE, }, { icon: , content: t('alerts'), key: ALERTS_ROUTE, }, { icon: , content: t('networks'), key: NETWORKS_ROUTE, }, { icon: , content: t('experimental'), key: EXPERIMENTAL_ROUTE, }, { icon: , content: t('about'), key: ABOUT_US_ROUTE, }, ]} isActive={(key) => { if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) { return true; } return matchPath(currentPath, { path: key, exact: true }); }} onSelect={(key) => history.push(key)} /> ); } renderContent() { return ( ( )} /> } /> { ///: BEGIN:ONLY_INCLUDE_IN(flask) ///: END:ONLY_INCLUDE_IN } { ///: BEGIN:ONLY_INCLUDE_IN(flask) ///: END:ONLY_INCLUDE_IN } ( )} /> ); } } export default SettingsPage;