Fix regressions introduced in #241 (#247)

* Fix location query

* Remove unnecessary polyfill

* Fix tslint error & update history types

* Parse search str using Node Query String

* Revert "Parse search str using Node Query String"

This reverts commit 0a482dabf29c3fbcbfd3112b974d6b98c14dca2e.

* fix formatting

* Add query-string

* Rename App container to TabSection & pass it location prop

* Add react-router withRouter HOC to NavigationLink

* various adjustments/finalizations

* Add location to props interface

common/components/Header/components/Navigation.tsx

@@ -36,7 +36,6 @@ const tabs = [
 ];
 
 interface Props {
-  location: object;
   color?: string;
 }
 
@@ -62,7 +61,7 @@ export default class Navigation extends Component<Props, State> {
    */
 
   public render() {
-    const { location, color } = this.props;
+    const { color } = this.props;
     const borderStyle: BorderStyle = {};
 
     if (color) {
@@ -80,7 +79,6 @@ export default class Navigation extends Component<Props, State> {
           <a
             aria-hidden="true"
             className="Navigation-arrow Navigation-arrow--left"
-            // onClick={() => this.scrollLeft()}
           >
             &#171;
           </a>
@@ -89,13 +87,7 @@ export default class Navigation extends Component<Props, State> {
         <div className="Navigation-scroll container">
           <ul className="Navigation-links">
             {tabs.map(link => {
-              return (
+              return <NavigationLink key={link.name} link={link} />;
-                <NavigationLink
-                  key={link.name}
-                  link={link}
-                  location={location}
-                />
-              );
             })}
           </ul>
         </div>
@@ -104,7 +96,6 @@ export default class Navigation extends Component<Props, State> {
           <a
             aria-hidden="true"
             className="Navigation-arrow Navigation-arrow-right"
-            // onClick={() => this.scrollRight()}
           >
             &#187;
           </a>

common/components/Header/components/NavigationLink.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 import translate, { translateRaw } from 'translations';
 import './NavigationLink.scss';
 
@@ -10,12 +10,19 @@ interface Props {
     to?: string;
     external?: boolean;
   };
-  location: any;
 }
 
-export default class NavigationLink extends React.Component<Props, {}> {
+interface InjectedLocation extends Props {
+  location: { pathname: string };
+}
+
+class NavigationLink extends React.Component<Props, {}> {
+  get injected() {
+    return this.props as InjectedLocation;
+  }
   public render() {
-    const { link, location } = this.props;
+    const { link } = this.props;
+    const { location } = this.injected;
     const linkClasses = classnames({
       'NavigationLink-link': true,
       'is-disabled': !link.to,
@@ -48,3 +55,6 @@ export default class NavigationLink extends React.Component<Props, {}> {
     return <li className="NavigationLink">{linkEl}</li>;
   }
 }
+
+// withRouter is a HOC which provides NavigationLink with a react-router location prop
+export default withRouter(NavigationLink);

common/components/Header/index.tsx

@@ -17,7 +17,6 @@ import { getKeyByValue } from 'utils/helpers';
 import './index.scss';
 
 interface Props {
-  location: {};
   languageSelection: string;
   nodeSelection: string;
   gasPriceGwei: number;
@@ -124,10 +123,7 @@ export default class Header extends Component<Props, {}> {
           </section>
         </section>
 
-        <Navigation
+        <Navigation color={selectedNetwork.color} />
-          location={this.props.location}
-          color={selectedNetwork.color}
-        />
       </div>
     );
   }

common/containers/TabSection/NotificationRow.tsx

@@ -19,12 +19,8 @@ export default class NotificationRow extends Component<Props, {}> {
 
     return (
       <div className={notifClass} role="alert" aria-live="assertive">
-        <span className="sr-only">
+        <span className="sr-only">{level}</span>
-          {level}
+        <div className="Notification-message">{msg}</div>
-        </span>
-        <div className="Notification-message">
-          {msg}
-        </div>
         <button
           className="Notification-close"
           aria-label="dismiss"

common/containers/TabSection/Notifications.tsx

@@ -19,13 +19,13 @@ export class Notifications extends React.Component<Props, {}> {
     }
     return (
       <div className="Notifications">
-        {this.props.notifications.map((n, i) =>
+        {this.props.notifications.map((n, i) => (
           <NotificationRow
             key={`${n.level}-${i}`}
             notification={n}
             onClose={this.props.closeNotification}
           />
-        )}
+        ))}
       </div>
     );
   }

common/containers/TabSection/index.tsx

@@ -14,9 +14,6 @@ import Notifications from './Notifications';
 interface Props {
   // FIXME
   children: any;
-  location: any;
-  router: any;
-  isMobile: boolean;
 
   languageSelection: string;
   nodeSelection: string;
@@ -27,7 +24,7 @@ interface Props {
   changeNode: TChangeNode;
   changeGasPrice: TChangeGasPrice;
 }
-class App extends Component<Props, {}> {
+class TabSection extends Component<Props, {}> {
   public render() {
     const {
       children,
@@ -42,7 +39,6 @@ class App extends Component<Props, {}> {
     } = this.props;
 
     const headerProps = {
-      location,
       languageSelection,
       nodeSelection,
       gasPriceGwei,
@@ -78,4 +74,4 @@ export default connect(mapStateToProps, {
   changeGasPrice: dChangeGasPrice,
   changeLanguage: dChangeLanguage,
   changeNode: dChangeNode
-})(App);
+})(TabSection);

common/containers/Tabs/ENS/components/ENS.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { GeneralInfoPanel } from './GeneralInfoPanel';
 import Title from './Title';
 import UnfinishedBanner from './UnfinishedBanner';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 
 interface ContainerTabPaneActiveProps {
   children: React.ReactElement<any> | React.ReactElement<any>[];
 }
 
 const ContainerTabPaneActive = ({ children }: ContainerTabPaneActiveProps) => (
-  <App>
+  <TabSection>
     <section className="container">
       <div className="tab-content">
         <main className="tab-pane active">
@@ -19,7 +19,7 @@ const ContainerTabPaneActive = ({ children }: ContainerTabPaneActiveProps) => (
         </main>
       </div>
     </section>
-  </App>
+  </TabSection>
 );
 
 const ENS = () => (

common/containers/Tabs/GenerateWallet/index.tsx

@@ -13,7 +13,7 @@ import { AppState } from 'reducers';
 import DownloadWallet from './components/DownloadWallet';
 import EnterPassword from './components/EnterPassword';
 import PaperWallet from './components/PaperWallet';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 
 interface Props {
   // Redux state
@@ -73,9 +73,9 @@ class GenerateWallet extends Component<Props, {}> {
     }
 
     return (
-      <App>
+      <TabSection>
         <section className="Tab-content">{content}</section>
-      </App>
+      </TabSection>
     );
   }
 }

common/containers/Tabs/Help/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import translate from 'translations';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 
 const Help = () => (
-  <App>
+  <TabSection>
     <section className="container" style={{ minHeight: '50%' }}>
       <div className="tab-content">
         <article className="tab-pane help active">
@@ -41,7 +41,7 @@ const Help = () => (
         </article>
       </div>
     </section>
-  </App>
+  </TabSection>
 );
 
 export default Help;

common/containers/Tabs/SendTransaction/index.tsx

@@ -5,7 +5,7 @@ import { BalanceSidebar } from 'components';
 // COMPONENTS
 import { UnlockHeader } from 'components/ui';
 import { donationAddressMap, NetworkConfig, NodeConfig } from 'config/data';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 // CONFIG
 import { TransactionWithoutGas } from 'libs/messages';
 import { RPCNode } from 'libs/nodes';
@@ -51,6 +51,7 @@ import {
   DataField,
   GasField
 } from './components';
+import queryString from 'query-string';
 // MISC
 import customMessages from './messages';
 
@@ -80,11 +81,6 @@ interface State {
 }
 
 interface Props {
-  location: {
-    query: {
-      [key: string]: string;
-    };
-  };
   wallet: IWallet;
   balance: Ether;
   node: NodeConfig;
@@ -96,6 +92,7 @@ interface Props {
   transactions: BroadcastTransactionStatus[];
   showNotification: TShowNotification;
   broadcastTx: TBroadcastTx;
+  location: { search: string };
 }
 
 const initialState: State = {
@@ -177,7 +174,7 @@ export class SendTransaction extends React.Component<Props, State> {
     const customMessage = customMessages.find(m => m.to === to);
 
     return (
-      <App>
+      <TabSection>
         <section className="Tab-content">
           <UnlockHeader title={'NAV_SendEther'} />
 
@@ -287,12 +284,15 @@ export class SendTransaction extends React.Component<Props, State> {
               />
             )}
         </section>
-      </App>
+      </TabSection>
     );
   }
 
   public parseQuery() {
-    const query = this.props.location.query;
+    const searchStr = this.props.location.search;
+    console.log(searchStr);
+    const query = queryString.parse(searchStr);
+    console.log(query);
     const to = getParam(query, 'to');
     const data = getParam(query, 'data');
     // FIXME validate token against presets

common/containers/Tabs/Swap/index.tsx

@@ -40,7 +40,7 @@ import CurrentRates from './components/CurrentRates';
 import PartThree from './components/PartThree';
 import ReceivingAddress from './components/ReceivingAddress';
 import SwapInfoHeader from './components/SwapInfoHeader';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 
 interface ReduxStateProps {
   originAmount: number | null;
@@ -188,7 +188,7 @@ class Swap extends Component<ReduxActionProps & ReduxStateProps, {}> {
     };
 
     return (
-      <App>
+      <TabSection>
         <section className="Tab-content swap-tab">
           {step === 1 && <CurrentRates {...CurrentRatesProps} />}
           {(step === 2 || step === 3) && (
@@ -201,7 +201,7 @@ class Swap extends Component<ReduxActionProps & ReduxStateProps, {}> {
             {step === 3 && <PartThree {...PartThreeProps} />}
           </main>
         </section>
-      </App>
+      </TabSection>
     );
   }
 }

common/containers/Tabs/ViewWallet/index.tsx

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import translate from 'translations';
-import App from 'containers/App';
+import TabSection from 'containers/TabSection';
 
 export default class ViewWallet extends Component {
   public render() {
     return (
-      <App>
+      <TabSection>
         <section className="container">
           <div className="tab-content">
             <article className="tab-pane active">
@@ -20,7 +20,7 @@ export default class ViewWallet extends Component {
             </article>
           </div>
         </section>
-      </App>
+      </TabSection>
     );
   }
 }

common/containers/index.ts

@@ -1,2 +1,2 @@
-import App from './App';
+import TabSection from './TabSection';
-export default App;
+export default TabSection;

package-lock.json

@@ -17,9 +17,9 @@
       "dev": true
     },
     "@types/history": {
-      "version": "3.2.2",
+      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-3.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.6.0.tgz",
-      "integrity": "sha512-DMvBzeA2dp1uZZftXkoqPC4TrdHlyuuTabCOxHY6EAKOJRMaPVu8b6lvX0QxEGKZq3cK/h3JCSxgfKmbDOYmRw==",
+      "integrity": "sha512-2A0stT6b61DANLErAfSkeQ77N+A3FbR7ardUJUP3xm9f4W8qtG9ispBYDUX42Fl1EbR0rqSV3IWjbB6ew7hXRw==",
       "dev": true
     },
     "@types/jest": {
@@ -104,7 +104,7 @@
       "integrity": "sha512-E3rS+jFk/zMcoIv4caqfic3mcIoQImpVaC9lNEgPqZttjocgLvjOwT+peBNbUCLPBeNwaTdglZZeZJmowb28sw==",
       "dev": true,
       "requires": {
-        "@types/history": "3.2.2",
+        "@types/history": "4.6.0",
         "@types/react": "16.0.5"
       }
     },
@@ -114,7 +114,7 @@
       "integrity": "sha512-+Ipm4f9eNhzu4PKoQIqrj+VMiYWLFb1UXWOpx5z1CmSoVIdA0x703aUuRPncC1o9KKcuwr3bj1tEIzg1I/vhAg==",
       "dev": true,
       "requires": {
-        "@types/history": "3.2.2",
+        "@types/history": "4.6.0",
         "@types/react": "16.0.5",
         "@types/react-router": "4.0.15"
       }
@@ -2680,16 +2680,6 @@
         "sha.js": "2.4.8"
       }
     },
-    "create-react-class": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz",
-      "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=",
-      "requires": {
-        "fbjs": "0.8.12",
-        "loose-envify": "1.3.1",
-        "object-assign": "4.1.1"
-      }
-    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -2976,6 +2966,11 @@
       "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
       "dev": true
     },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
     "decompress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/decompress/-/decompress-3.0.0.tgz",
@@ -9021,6 +9016,18 @@
         "prepend-http": "1.0.4",
         "query-string": "4.3.4",
         "sort-keys": "1.1.2"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "4.1.1",
+            "strict-uri-encode": "1.1.0"
+          }
+        }
       }
     },
     "npm-path": {
@@ -10477,11 +10484,11 @@
       "dev": true
     },
     "query-string": {
-      "version": "4.3.4",
+      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.0.0.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "integrity": "sha1-+99wBLTSr/eS+YcZgbeieU9VWUc=",
-      "dev": true,
       "requires": {
+        "decode-uri-component": "0.2.0",
         "object-assign": "4.1.1",
         "strict-uri-encode": "1.1.0"
       }
@@ -10606,16 +10613,6 @@
         }
       }
     },
-    "react-addons-perf": {
-      "version": "15.4.2",
-      "resolved": "https://registry.npmjs.org/react-addons-perf/-/react-addons-perf-15.4.2.tgz",
-      "integrity": "sha1-EQvc9cRZxPd8uF7WNLzTOXU2ODs=",
-      "dev": true,
-      "requires": {
-        "fbjs": "0.8.12",
-        "object-assign": "4.1.1"
-      }
-    },
     "react-deep-force-update": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-2.0.1.tgz",
@@ -12186,8 +12183,7 @@
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-      "dev": true
     },
     "string-length": {
       "version": "1.0.1",

package.json

@@ -24,6 +24,7 @@
     "moment": "^2.18.1",
     "qrcode": "^0.8.2",
     "qrcode.react": "^0.7.1",
+    "query-string": "^5.0.0",
     "react": "16.0.0",
     "react-dom": "16.0.0",
     "react-markdown": "^2.5.0",
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@types/bignumber.js": "^4.0.2",
     "@types/classnames": "^2.2.3",
+    "@types/history": "^4.6.0",
     "@types/jest": "^21.1.0",
     "@types/lodash": "^4.14.74",
     "@types/moment": "^2.13.0",