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
2017-10-04 00:13:49 -04:00 · 2017-10-04 00:13:49 -04:00 · 6f7e3c27e2
parent 81025e7d6e
commit 6f7e3c27e2
16 changed files with 78 additions and 91 deletions
--- a/common/components/Header/components/Navigation.tsx
+++ b/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 (
-                <NavigationLink
-                  key={link.name}
-                  link={link}
-                  location={location}
-                />
-              );
+              return <NavigationLink key={link.name} link={link} />;
            })}
          </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>
--- a/common/components/Header/components/NavigationLink.tsx
+++ b/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);
--- a/common/components/Header/index.tsx
+++ b/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
-          location={this.props.location}
-          color={selectedNetwork.color}
-        />
+        <Navigation color={selectedNetwork.color} />
      </div>
    );
  }
--- a/common/containers/TabSection/NotificationRow.tsx
+++ b/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">
-          {level}
-        </span>
-        <div className="Notification-message">
-          {msg}
-        </div>
+        <span className="sr-only">{level}</span>
+        <div className="Notification-message">{msg}</div>
        <button
          className="Notification-close"
          aria-label="dismiss"
--- a/common/containers/TabSection/Notifications.scss
+++ b/common/containers/TabSection/Notifications.scss
--- a/common/containers/TabSection/Notifications.tsx
+++ b/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>
    );
  }
--- a/common/containers/TabSection/index.tsx
+++ b/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);
--- a/common/containers/Tabs/ENS/components/ENS.tsx
+++ b/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 = () => (
--- a/common/containers/Tabs/GenerateWallet/index.tsx
+++ b/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>
    );
  }
 }
--- a/common/containers/Tabs/Help/index.tsx
+++ b/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;
--- a/common/containers/Tabs/SendTransaction/index.tsx
+++ b/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
--- a/common/containers/Tabs/Swap/index.tsx
+++ b/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>
    );
  }
 }
--- a/common/containers/Tabs/ViewWallet/index.tsx
+++ b/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>
    );
  }
 }
--- a/common/containers/index.ts
+++ b/common/containers/index.ts
@ -1,2 +1,2 @@
-import App from './App';
-export default App;
+import TabSection from './TabSection';
+export default TabSection;
--- a/package-lock.json
+++ b/package-lock.json
@ -17,9 +17,9 @@
      "dev": true
    },
    "@types/history": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@types/history/-/history-3.2.2.tgz",
-      "integrity": "sha512-DMvBzeA2dp1uZZftXkoqPC4TrdHlyuuTabCOxHY6EAKOJRMaPVu8b6lvX0QxEGKZq3cK/h3JCSxgfKmbDOYmRw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.6.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "dev": true,
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.0.0.tgz",
+      "integrity": "sha1-+99wBLTSr/eS+YcZgbeieU9VWUc=",
      "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=",
-      "dev": true
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
    },
    "string-length": {
      "version": "1.0.1",
--- a/package.json
+++ b/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",