feat(component): add hash routing to security center pages

blockchain · Dec 12, 2018 · fd9d607 · fd9d607
1 parent 1948413
commit fd9d607
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 56 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Footer/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Footer/template.js
@@ -9,7 +9,7 @@ const Footer = props => {
 
   return (
     <Wrapper>
-      <LinkContainer to='/security-center' activeClassName='active'>
+      <LinkContainer to='/security-center/basic' activeClassName='active'>
         <MenuItem data-e2e='securityCenterLink'>
           <Icon name='security' />
           <FormattedMessage

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/Menu/index.js
@@ -1,63 +1,55 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
+import { LinkContainer } from 'react-router-bootstrap'
 
-import { Text } from 'blockchain-info-components'
+import { TabMenu, TabMenuItem } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  background-color: ${props => props.theme['white-blue']};
   width: 100%;
-  height: 50px;
-  border-bottom: 1px solid #eaeaea;
-  padding: 0 30px;
+  padding: 8px 30px;
+  box-sizing: border-box;
+  background-color: ${props => props.theme['white-blue']};
+  border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
-const TabList = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  div:first-of-type {
-    margin-right: 25px;
+const LinkItem = styled(TabMenuItem)`
+  &.active {
+    & :after {
+      position: absolute;
+      content: '';
+      top: 36px;
+      left: 0;
+      width: 100%;
+      border-bottom: 4px solid ${props => props.theme['brand-secondary']};
+    }
   }
 `
-const Tab = styled(Text)`
-  cursor: pointer;
-  border-bottom: ${props => (props.active ? '1px solid black' : null)};
-  opacity: ${props => (props.active ? 1 : 0.3)};
-  text-transform: uppercase;
-`
 
 class MenuContainer extends React.PureComponent {
   render () {
-    const { activeTab, setActiveTab } = this.props
-
     return (
       <Wrapper>
-        <TabList>
-          <Tab
-            active={activeTab === 'basic'}
-            onClick={() => {
-              setActiveTab('basic')
-            }}
-          >
-            <FormattedMessage
-              id='scenes.securitycenter.menu.basic'
-              defaultMessage='Basic'
-            />
-          </Tab>
-          <Tab
-            active={activeTab === 'advanced'}
-            onClick={() => {
-              setActiveTab('advanced')
-            }}
+        <TabMenu>
+          <LinkContainer to='/security-center/basic' activeClassName='active'>
+            <LinkItem>
+              <FormattedMessage
+                id='scenes.securitycenter.menu.basic'
+                defaultMessage='Basic'
+              />
+            </LinkItem>
+          </LinkContainer>
+          <LinkContainer
+            to='/security-center/advanced'
+            activeClassName='active'
           >
-            <FormattedMessage
-              id='scenes.securitycenter.menu.advanced'
-              defaultMessage='Advanced'
-            />
-          </Tab>
-        </TabList>
+            <LinkItem>
+              <FormattedMessage
+                id='scenes.securitycenter.menu.advanced'
+                defaultMessage='Advanced'
+              />
+            </LinkItem>
+          </LinkContainer>
+        </TabMenu>
       </Wrapper>
     )
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/SecurityCenter/index.js
@@ -43,8 +43,6 @@ const IntroText = styled.div`
   }
 `
 class SecurityCenterContainer extends React.PureComponent {
-  state = { activeTab: 'basic' }
-
   determineProgress = () => {
     const { authType, emailVerified, isMnemonicVerified } = this.props
     let progress = 0
@@ -54,18 +52,13 @@ class SecurityCenterContainer extends React.PureComponent {
     return progress
   }
 
-  setActiveTab = tab => {
-    this.setState({ activeTab: tab })
-  }
-
   render () {
-    const { authType, emailVerified, isMnemonicVerified } = this.props
-    const { activeTab } = this.state
+    const { authType, emailVerified, isMnemonicVerified, location } = this.props
     const progress = this.determineProgress()
 
     return (
       <Wrapper>
-        <Menu activeTab={activeTab} setActiveTab={this.setActiveTab} />
+        <Menu location={location} />
         <ContentWrapper>
           <StatusWrapper>
             <IntroText>
@@ -91,7 +84,11 @@ class SecurityCenterContainer extends React.PureComponent {
               />
             }
           </StatusWrapper>
-          {activeTab === 'basic' ? <BasicSettings /> : <AdvancedSettings />}
+          {location.pathname.includes('/advanced') ? (
+            <AdvancedSettings />
+          ) : (
+            <BasicSettings />
+          )}
         </ContentWrapper>
       </Wrapper>
     )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Menu/index.js
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
 import { LinkContainer } from 'react-router-bootstrap'
+
 import { Icon, TabMenu, TabMenuItem } from 'blockchain-info-components'
 import { TextBox } from 'components/Form'
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.js b/packages/blockchain-wallet-v4-frontend/src/scenes/app.js
@@ -106,7 +106,11 @@ class App extends React.PureComponent {
                     />
                     <WalletLayout path='/exchange' component={Exchange} exact />
                     <WalletLayout
-                      path='/security-center'
+                      path='/security-center/basic'
+                      component={SecurityCenter}
+                    />
+                    <WalletLayout
+                      path='/security-center/advanced'
                       component={SecurityCenter}
                     />
                     <WalletLayout