Merge pull request #542 from LiskHQ/499-refactor-route-definitions

Refactor route definition - Closes #499

src/components/app/index.js

@@ -38,29 +38,29 @@ class App extends React.Component {
             <div className={styles.mainBox}>
               <Header />
               <Switch>
-                <PrivateRoutes path='/main' render={ ({ match }) => (
+                <PrivateRoutes path={routes.main.path} render={ ({ match }) => (
                   <main className={offlineStyle.disableWhenOffline}>
                     <Switch>
-                      <Route path={`${match.url}/account-visual-demo/:dialog?`} component={AccountVisualDemo} />
-                      <Route path={`${match.url}/dashboard/:dialog?`} component={Dashboard} />
-                      <Route path={`${match.url}${routes.wallet.short}/:dialog?`} component={TransactionDashboard} />
-                      <Route path={`${match.url}/voting/:dialog?`} component={Voting} />
-                      <Route path={`${match.url}/sidechains/:dialog?`} component={Sidechains} />
+                      <Route path={`${match.url}${routes.accountVisualDemo.path}/:dialog?`} component={AccountVisualDemo} />
+                      <Route path={`${match.url}${routes.dashboard.path}/:dialog?`} component={Dashboard} />
+                      <Route path={`${match.url}${routes.wallet.path}/:dialog?`} component={TransactionDashboard} />
+                      <Route path={`${match.url}${routes.voting.path}/:dialog?`} component={Voting} />
+                      <Route path={`${match.url}${routes.sidechains.path}/:dialog?`} component={Sidechains} />
                       <Route path='*' component={NotFound} />
                     </Switch>
                   </main>
                 )} />
-                <Route path='/explorer' render={ ({ match }) => (
+                <Route path={routes.explorer.path} render={ ({ match }) => (
                   <main>
-                    <Route path={`${match.url}${routes.search.short}/:dialog?`} component={Search} />
-                    <Route path={`${match.url}${routes.searchResult.short}/:query?`} component={SearchResult} />
-                    <Route path={`${match.url}${routes.account.short}/:address?`} component={AccountTransactions} />
-                    <Route path={`${match.url}${routes.transaction.short}/:id`} component={SingleTransaction} />
+                    <Route path={`${match.url}${routes.search.path}/:dialog?`} component={Search} />
+                    <Route path={`${match.url}${routes.searchResult.path}/:query?`} component={SearchResult} />
+                    <Route path={`${match.url}${routes.account.path}/:address?`} component={AccountTransactions} />
+                    <Route path={`${match.url}${routes.transaction.path}/:id`} component={SingleTransaction} />
                   </main>
                 )} />
-                <Route path={`${routes.register.url}:dialog?`} component={Register} />
-                <Route path={`${routes.addAccount.url}:dialog?`} component={Login} />
-                <Route exact path={routes.login.url} component={Login} />
+                <Route path={`${routes.register.path}:dialog?`} component={Register} />
+                <Route path={`${routes.addAccount.path}:dialog?`} component={Login} />
+                <Route exact path={routes.login.path} component={Login} />
                 <Route path='*' component={NotFound} />
               </Switch>
             </div>

src/components/app/index.test.js

@@ -11,6 +11,7 @@ import Login from '../login';
 import Transactions from '../transactionDashboard';
 import Search from '../search';
 import Voting from '../voting';
+import routes from '../../constants/routes';
 
 const fakeStore = configureStore();
 
@@ -27,12 +28,12 @@ const addRouter = Component => (props, path) =>
 
 const publicComponent = [
   { route: '/', component: Login },
-  { route: '/explorer/search', component: Search },
+  { route: `${routes.explorer.path}${routes.search.path}`, component: Search },
 ];
 
 const privateComponent = [
-  { route: '/main/transactions', component: Transactions },
-  { route: '/main/voting', component: Voting },
+  { route: `${routes.main.path}${routes.transaction.path}`, component: Transactions },
+  { route: `${routes.main.path}${routes.voting.path}`, component: Voting },
 ];
 
 describe('App', () => {

src/components/dashboard/index.js

@@ -8,6 +8,7 @@ import Box from '../box';
 import TransactionList from './../transactions/transactionList';
 import Send from '../send';
 import CurrencyGraph from './currencyGraph';
+import routes from '../../constants/routes';
 import styles from './dashboard.css';
 
 class Dashboard extends React.Component {
@@ -22,7 +23,7 @@ class Dashboard extends React.Component {
           <header>
             <h2 className={styles.title}>
               {t('Latest activity')}
-              <Link to='/main/transactions' className={styles.seeAllLink}>
+              <Link to={`${routes.main.path}${routes.dashboard.path}`} className={styles.seeAllLink}>
                 {t('See all transactions')}
                 <FontIcon value='arrow-right'/>
               </Link>

src/components/dialog/dialog.test.js

@@ -16,7 +16,7 @@ describe('Dialog', () => {
   beforeEach(() => {
     history = {
       location: {
-        pathname: `${routes.search.long}saved-accounts`,
+        pathname: `${routes.explorer.path}${routes.search.path}saved-accounts`,
         search: '',
       },
       push: sinon.spy(),
@@ -45,15 +45,15 @@ describe('Dialog', () => {
   });
 
   it('allows to close the dialog on regexp path ', () => {
-    const basePath = '/explorer/transactions/1523498127498/';
+    const basePath = `${routes.explorer.path}${routes.wallet.path}/1523498127498/`;
     history.location.pathname = `${basePath}saved-accounts`;
     wrapper.setProps({ history });
     wrapper.find('.x-button').simulate('click');
     expect(history.push).to.have.been.calledWith(basePath);
   });
 
   it('allows to close the dialog on non-regexp path ', () => {
-    history.location.pathname = `${routes.wallet.long}saved-accounts`;
+    history.location.pathname = `${routes.main.path}${routes.wallet.path}saved-accounts`;
     wrapper.setProps({ history });
     wrapper.find('.x-button').simulate('click');
     expect(history.push).to.have.been.calledWith();

src/components/header/header.js

@@ -19,15 +19,15 @@ class Header extends React.Component {
     const { pathname } = this.props.location;
     return !this.props.isAuthenticated
       && !this.props.account.loading
-      && pathname !== routes.login.url
-      && ![routes.register.url, routes.addAccount.url]
+      && pathname !== routes.login.path
+      && ![routes.register.path, routes.addAccount.path]
         .some(el => pathname.includes(el));
   }
 
   shouldShowSearchBar() {
     const { pathname } = this.props.location;
-    return ![routes.search.long, routes.register.url, routes.addAccount.url]
-      .some(el => pathname.includes(el)) && pathname !== routes.login.url;
+    return ![`${routes.explorer.path}${routes.search.path}`, routes.register.path, routes.addAccount.path]
+      .some(el => pathname.includes(el)) && pathname !== routes.login.path;
   }
 
   render() {

src/components/header/header.test.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import sinon from 'sinon';
 import Header from './header';
 import i18n from '../../i18n';
+import routes from '../../constants/routes';
 
 describe('Header', () => {
   let wrapper;
@@ -25,7 +26,7 @@ describe('Header', () => {
       setActiveDialog: () => { },
       account: {},
       t: key => key,
-      location: { pathname: '/explorer/search' },
+      location: { pathname: `${routes.explorer.path}${routes.search}` },
       isAuthenticated: false,
     };
     propsMock = sinon.mock(mockInputProps);

src/components/login/login.js

@@ -12,6 +12,7 @@ import { extractAddress } from '../../utils/api/account';
 import PassphraseInput from '../passphraseInput';
 import styles from './login.css';
 import networks from '../../constants/networks';
+import routes from '../../constants/routes';
 import getNetwork from '../../utils/getNetwork';
 import { parseSearchParams } from './../../utils/searchParams';
 import Box from '../box';
@@ -99,7 +100,7 @@ class Login extends React.Component {
 
   getReferrerRoute() {
     const search = parseSearchParams(this.props.history.location.search);
-    const dashboardRoute = '/main/dashboard';
+    const dashboardRoute = `${routes.main.path}${routes.dashboard.path}`;
     const referrerRoute = search.referrer ? search.referrer : dashboardRoute;
     return referrerRoute;
   }
@@ -200,7 +201,7 @@ class Login extends React.Component {
           <section className={styles.table}>
             <div className='text-left'>
               <h2>
-                <Link className='new-account-button' to='/register'>
+                <Link className='new-account-button' to={routes.register.path}>
                   {this.props.t('Create Lisk ID')}
                 </Link>
                 <FontIcon className={styles.singUpArrow} value='arrow-right' />

src/components/login/login.test.js

@@ -7,6 +7,7 @@ import { MemoryRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import i18n from '../../i18n';
 import Login from './login';
+import routes from '../../constants/routes';
 
 describe('Login', () => {
   let wrapper;
@@ -88,15 +89,15 @@ describe('Login', () => {
     it('calls this.props.history.replace(\'/main/dashboard\')', () => {
       wrapper = shallow(<Login {...props}/>, options);
       wrapper.setProps({ account: { address: 'dummy' } });
-      expect(props.history.replace).to.have.been.calledWith('/main/dashboard');
+      expect(props.history.replace).to.have.been.calledWith(`${routes.main.path}${routes.dashboard.path}`);
     });
 
     it('calls this.props.history.replace with referrer address', () => {
       wrapper = shallow(<Login {...props}/>, options);
       props.history.replace.reset();
-      history.location.search = '?referrer=/main/voting';
+      history.location.search = `?referrer=${routes.main.path}${routes.voting.path}`;
       wrapper.setProps({ history, account: { address: 'dummy' } });
-      expect(props.history.replace).to.have.been.calledWith('/main/voting');
+      expect(props.history.replace).to.have.been.calledWith(`${routes.main.path}${routes.voting.path}`);
     });
 
     it('hides network options by default', () => {

src/components/mainMenu/mainMenu.js

@@ -7,6 +7,7 @@ import logo from '../../assets/images/logo-beta.svg';
 import * as menuLogos from '../../assets/images/main-menu-icons/*.svg'; //eslint-disable-line
 import { FontIcon } from '../fontIcon';
 import Setting from '../setting';
+import routes from '../../constants/routes';
 
 const getIndex = (history, tabs) => {
   if (history.location.pathname.includes('explorer')) return 2;
@@ -64,12 +65,12 @@ class MainMenu extends React.Component {
     const tabs = [
       {
         label: t('Dashboard'),
-        route: '/main/dashboard',
+        route: `${routes.main.path}${routes.dashboard.path}`,
         id: 'dashboard',
         image: menuLogos.dashboard,
       }, {
         label: t('Wallet'),
-        route: '/main/transactions',
+        route: `${routes.main.path}${routes.wallet.path}`,
         id: 'transactions',
         image: menuLogos.wallet,
       }, {
@@ -81,12 +82,12 @@ class MainMenu extends React.Component {
       }, {
       */
         label: t('Explorer'),
-        route: '/explorer/search',
+        route: `${routes.explorer.path}${routes.search.path}`,
         id: 'explorer',
         image: menuLogos.search,
       }, {
         label: t('Sidechains'),
-        route: '/main/sidechains',
+        route: `${routes.main.path}${routes.sidechains.path}`,
         id: 'sidechains',
         image: menuLogos.sidechains,
       },
@@ -96,7 +97,7 @@ class MainMenu extends React.Component {
       tabs.splice(tabs.length - 1, 0, {
         label: t('Delegates'),
         id: 'voting',
-        route: '/main/voting',
+        route: `${routes.main.path}${routes.voting.path}`,
         image: menuLogos.delegates,
       });
     }

src/components/mainMenu/mainMenu.test.js

@@ -8,6 +8,7 @@ import sinon from 'sinon';
 import PropTypes from 'prop-types';
 import i18n from '../../i18n';
 import MainMenu from './mainMenu';
+import routes from '../../constants/routes';
 
 
 describe('MainMenu', () => {
@@ -41,7 +42,7 @@ describe('MainMenu', () => {
 
   const history = {
     location: {
-      pathname: '/main/voting',
+      pathname: `${routes.main.path}${routes.voting.path}`,
     },
     push: sinon.spy(),
   };
@@ -111,7 +112,7 @@ describe('MainMenu', () => {
       <MainMenu {...props} />
     </MemoryRouter>, options);
     wrapper.find(Tab).at(1).simulate('click');
-    expect(history.push).to.have.been.calledWith('/main/transactions');
+    expect(history.push).to.have.been.calledWith(`${routes.main.path}${routes.wallet.path}`);
   });
 
   it('should click on more activate the drawer', () => {

src/components/register/register.js

@@ -9,6 +9,7 @@ import networks from '../../constants/networks';
 import getNetwork from '../../utils/getNetwork';
 import Box from '../box';
 import styles from './register.css';
+import routes from '../../constants/routes';
 
 
 class Register extends React.Component {
@@ -19,7 +20,7 @@ class Register extends React.Component {
 
   componentDidUpdate() {
     if (this.props.account.passphrase !== undefined) {
-      this.props.history.push('/main/dashboard');
+      this.props.history.push(`${routes.main.path}${routes.dashboard.path}`);
     }
   }
 

src/components/savedAccounts/savedAccounts.js

@@ -69,7 +69,7 @@ class SavedAccounts extends React.Component {
     const switchAccount = (account) => {
       if (!this.state.editing) {
         accountSwitched(account);
-        history.push('/main/dashboard/');
+        history.push(`${routes.main.path}${routes.dashboard.path}`);
       }
     };
 
@@ -81,7 +81,7 @@ class SavedAccounts extends React.Component {
         </h1>
         <ul className={styles.cardsWrapper} >
           <li>
-            <Link to={`${routes.addAccount.url}?referrer=/main/dashboard/`} >
+            <Link to={`${routes.addAccount.path}?referrer=${routes.main.path}${routes.dashboard.path}/`} >
               <div className={`add-lisk-id-card ${styles.card} ${styles.addNew}`} >
                 <div className={styles.cardIcon}>
                   <img src={plusShapeIcon} className={styles.plusShapeIcon} />

src/components/savedAccounts/savedAccounts.test.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import i18n from '../../i18n';
 import networks from '../../constants/networks';
 import SavedAccounts from './savedAccounts';
+import routes from '../../constants/routes';
 
 const mountWithRouter = (node, options) => mount(<Router>{node}</Router>, options);
 const fakeStore = configureStore();
@@ -89,7 +90,7 @@ describe('SavedAccounts', () => {
   it('should call props.accountSwitched on the "saved account card" click', () => {
     wrapper.find('.saved-account-card').at(1).simulate('click');
     expect(props.accountSwitched).to.have.been.calledWith(savedAccounts[1]);
-    expect(props.history.push).to.have.been.calledWith('/main/dashboard/');
+    expect(props.history.push).to.have.been.calledWith(`${routes.main.path}${routes.dashboard.path}`);
   });
 
   it('should not call props.accountSwitched on the "saved account card" click if in "edit" mode', () => {

src/components/search/keyAction.js

@@ -13,17 +13,17 @@ const saveSearch = (search) => {
 
 export const visit = (value, history) => {
   if (value.match(regex.address)) {
-    history.push(`${routes.account.long}/${value}`);
+    history.push(`${routes.explorer.path}${routes.account.path}/${value}`);
   } else if (value.match(regex.transactionId)) {
-    history.push(`${routes.transaction.long}/${value}`);
+    history.push(`${routes.explorer.path}${routes.transaction.path}/${value}`);
   } else {
-    history.push(`${routes.searchResult.long}/${value}`);
+    history.push(`${routes.explorer.path}${routes.searchResult.path}/${value}`);
   }
 };
 
 export const visitAndSaveSearch = (value, history) => {
   if (value.length === 0) {
-    history.push(routes.search.long);
+    history.push(`${routes.explorer.path}${routes.search.path}`);
   } else {
     value = value.trim();
     saveSearch(value);

src/components/search/keyAction.test.js

@@ -43,9 +43,9 @@ describe('Search KeyAction', () => {
     ];
 
     const expectedHistory = [
-      `${routes.account.long}/${testValues[0]}`,
-      `${routes.transaction.long}/${testValues[1]}`,
-      `${routes.searchResult.long}/${testValues[2]}`,
+      `${routes.explorer.path}${routes.account.path}/${testValues[0]}`,
+      `${routes.explorer.path}${routes.transaction.path}/${testValues[1]}`,
+      `${routes.explorer.path}${routes.searchResult.path}/${testValues[2]}`,
     ];
 
     testValues.forEach((value) => {

src/components/searchBar/index.js

@@ -28,7 +28,7 @@ class Search extends React.Component {
 
   shouldShowSearchBarOnMobile() {
     const { pathname } = this.props.location;
-    return pathname.includes('explorer') && !pathname.includes(routes.search.long);
+    return pathname.includes('explorer') && !pathname.includes(`${routes.explorer.path}${routes.search.path}`);
   }
 
 

src/components/sendTo/index.js

@@ -58,7 +58,7 @@ class SendTo extends React.Component {
       ${grid['middle-sm']}
       ${styles.sendButton}
       `}>
-          <Link to={`${routes.wallet.long}?address=${this.props.address}`}>
+          <Link to={`${routes.main.path}${routes.wallet.path}?address=${this.props.address}`}>
             <TertiaryButton className={`${styles.button} send-to-address`} >
               <FontIcon value={'send-token'}/> {this.props.t('Send to this address')}
             </TertiaryButton>

src/components/sendTo/sendTo.test.js

@@ -18,11 +18,11 @@ describe('SendTo Component', () => {
   });
 
   it('renders correct link', () => {
-    expect(wrapper.find('Link').prop('to')).to.equal(`${routes.wallet.long}?address=${props.address}`);
+    expect(wrapper.find('Link').prop('to')).to.equal(`${routes.main.path}${routes.wallet.path}?address=${props.address}`);
   });
 
   it('updates when address changes', () => {
     wrapper.setProps({ address: '9876L' });
-    expect(wrapper.find('Link').prop('to')).to.equal(`${routes.wallet.long}?address=9876L`);
+    expect(wrapper.find('Link').prop('to')).to.equal(`${routes.main.path}${routes.wallet.path}?address=9876L`);
   });
 });