use react-router

package.json

@@ -59,7 +59,6 @@
     "@hot-loader/react-dom": "16.8",
     "@lbry/color": "^1.0.2",
     "@lbry/components": "^2.3.3",
-    "@reach/router": "^1.2.1",
     "@types/three": "^0.93.1",
     "async-exit-hook": "^2.0.1",
     "babel-eslint": "^10.0.1",
@@ -70,6 +69,7 @@
     "chalk": "^2.4.2",
     "classnames": "^2.2.5",
     "codemirror": "^5.39.2",
+    "connected-react-router": "^6.3.2",
     "copy-webpack-plugin": "^4.6.0",
     "country-data": "^0.0.31",
     "cross-env": "^5.2.0",
@@ -104,6 +104,7 @@
     "flow-typed": "^2.3.0",
     "formik": "^0.10.4",
     "hast-util-sanitize": "^1.1.2",
+    "history": "^4.9.0",
     "husky": "^0.14.3",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
@@ -134,7 +135,8 @@
     "react-modal": "^3.1.7",
     "react-paginate": "^5.2.1",
     "react-pose": "^4.0.5",
-    "react-redux": "^5.0.3",
+    "react-redux": "^6.0.1",
+    "react-router-dom": "^5.0.0",
     "react-simplemde-editor": "^4.0.0",
     "react-toggle": "^4.0.2",
     "react-virtualized": "^9.21.0",

src/ui/analytics.js

@@ -1,7 +1,6 @@
 // @flow
 import { Lbryio } from 'lbryinc';
 import ReactGA from 'react-ga';
-import { globalHistory } from '@reach/router';
 
 type Analytics = {
   pageView: string => void,
@@ -15,7 +14,7 @@ let analyticsEnabled: boolean = true;
 const analytics: Analytics = {
   pageView: path => {
     if (analyticsEnabled) {
-      ReactGA.pageview(path);
+      // ReactGA.pageview(path);
     }
   },
   setUser: user => {
@@ -72,19 +71,19 @@ const analytics: Analytics = {
 
 // Initialize google analytics
 // Set `debug: true` for debug info
-ReactGA.initialize('UA-60403362-12', {
-  gaOptions: { name: IS_WEB ? 'web' : 'desktop' },
-  testMode: process.env.NODE_ENV !== 'production',
-});
+// ReactGA.initialize('UA-60403362-12', {
+//   gaOptions: { name: IS_WEB ? 'web' : 'desktop' },
+//   testMode: process.env.NODE_ENV !== 'production',
+// });
 
 // Manually call the first page view
 // Reach Router doesn't include this on `history.listen`
-analytics.pageView(window.location.pathname + window.location.search);
+// analytics.pageView(window.location.pathname + window.location.search);
 
 // Listen for url changes and report
 // This will include search queries/filter options
-globalHistory.listen(({ location }) =>
-  analytics.pageView(window.location.pathname + window.location.search)
-);
+// globalHistory.listen(({ location }) =>
+//   analytics.pageView(window.location.pathname + window.location.search)
+// );
 
 export default analytics;

src/ui/app.js

@@ -1,4 +1,4 @@
-import store from 'store';
+import { store } from 'store';
 
 const env = process.env.NODE_ENV || 'production';
 

src/ui/component/app/view.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import Router from 'component/router/index';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
-import throttle from 'util/throttle';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
 import { openContextMenu } from 'util/context-menu';

src/ui/component/button/view.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import Icon from 'component/common/icon';
 import classnames from 'classnames';
-import { Link } from '@reach/router';
+import { NavLink } from 'react-router-dom';
 import { formatLbryUriForWeb } from 'util/uri';
 import { OutboundLink } from 'react-ga';
 
@@ -109,19 +109,16 @@ class Button extends React.PureComponent<Props> {
     }
 
     return path ? (
-      <Link
+      <NavLink
+        exact
         to={path}
         title={title}
         onClick={e => e.stopPropagation()}
-        getProps={({ isCurrent, isPartiallyCurrent }) => ({
-          className:
-            (path === '/' ? isCurrent : isPartiallyCurrent) && activeClass
-              ? `${combinedClassName} ${activeClass}`
-              : combinedClassName,
-        })}
+        className={combinedClassName}
+        activeClassName={activeClass}
       >
         {content}
-      </Link>
+      </NavLink>
     ) : (
       <button
         title={title}

src/ui/component/channelTile/view.jsx

@@ -5,7 +5,7 @@ import TruncatedText from 'component/common/truncated-text';
 import classnames from 'classnames';
 import SubscribeButton from 'component/subscribeButton';
 import type { Claim } from 'types/claim';
-import { navigate } from '@reach/router';
+import { withRouter } from 'react-router-dom';
 import { formatLbryUriForWeb } from 'util/uri';
 
 type Props = {
@@ -15,6 +15,7 @@ type Props = {
   size: string,
   claim: ?Claim,
   resolveUri: string => void,
+  history: { push: string => void },
 };
 
 class ChannelTile extends React.PureComponent<Props> {
@@ -37,7 +38,7 @@ class ChannelTile extends React.PureComponent<Props> {
   }
 
   render() {
-    const { claim, isResolvingUri, totalItems, uri, size } = this.props;
+    const { claim, isResolvingUri, totalItems, uri, size, history } = this.props;
 
     let channelName;
     let subscriptionUri;
@@ -46,7 +47,7 @@ class ChannelTile extends React.PureComponent<Props> {
       subscriptionUri = `lbry://${claim.permanent_url}`;
     }
 
-    const onClick = () => navigate(formatLbryUriForWeb(uri));
+    const onClick = () => history.push(formatLbryUriForWeb(uri));
 
     return (
       <section
@@ -86,4 +87,4 @@ class ChannelTile extends React.PureComponent<Props> {
   }
 }
 
-export default ChannelTile;
+export default withRouter(ChannelTile);

src/ui/component/externalLink/view.jsx

@@ -4,13 +4,11 @@ import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import { isURIValid } from 'lbry-redux';
 import Button from 'component/button';
-import { navigate } from '@reach/router';
 
 type Props = {
   href: string,
   title?: string,
   children: React.Node,
-  navigate: (string, ?{}) => void,
   openModal: (id: string, { uri: string }) => void,
 };
 
@@ -21,7 +19,7 @@ class ExternalLink extends React.PureComponent<Props> {
   };
 
   createLink() {
-    const { href, title, children, openModal, navigate } = this.props;
+    const { href, title, children, openModal } = this.props;
 
     // Regex for url protocol
     const protocolRegex = new RegExp('^(https?|lbry)+:', 'i');

src/ui/component/fileCard/view.jsx

@@ -11,7 +11,7 @@ import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 import { openCopyLinkMenu } from 'util/context-menu';
 import DateTime from 'component/dateTime';
-import { navigate } from '@reach/router';
+import { withRouter } from 'react-router-dom';
 import { formatLbryUriForWeb } from 'util/uri';
 
 type Props = {
@@ -29,6 +29,7 @@ type Props = {
   isNew: boolean,
   placeholder: boolean,
   preventResolve: boolean,
+  history: { push: string => void },
 };
 
 class FileCard extends React.PureComponent<Props> {
@@ -70,6 +71,7 @@ class FileCard extends React.PureComponent<Props> {
       isNew,
       isResolvingUri,
       placeholder,
+      history,
     } = this.props;
 
     const abandoned = !isResolvingUri && !claim && !pending && !placeholder;
@@ -110,7 +112,7 @@ class FileCard extends React.PureComponent<Props> {
 
     const onClick = e => {
       e.stopPropagation();
-      navigate(formatLbryUriForWeb(uri));
+      history.push(formatLbryUriForWeb(uri));
     };
 
     return (
@@ -147,4 +149,4 @@ class FileCard extends React.PureComponent<Props> {
   }
 }
 
-export default FileCard;
+export default withRouter(FileCard);

src/ui/component/fileTile/view.jsx

@@ -12,7 +12,7 @@ import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
 import Yrbl from 'component/yrbl';
-import { navigate } from '@reach/router';
+import { withRouter } from 'react-router-dom';
 import { formatLbryUriForWeb } from 'util/uri';
 
 type Props = {
@@ -32,6 +32,7 @@ type Props = {
   size: string,
   isSubscribed: boolean,
   isNew: boolean,
+  history: { push: string => void },
 };
 
 class FileTile extends React.PureComponent<Props> {
@@ -91,6 +92,7 @@ class FileTile extends React.PureComponent<Props> {
       hideNoResult,
       displayHiddenMessage,
       size,
+      history,
     } = this.props;
 
     if (!claim && isResolvingUri) {
@@ -136,7 +138,7 @@ class FileTile extends React.PureComponent<Props> {
 
     const wrapperProps = name
       ? {
-        onClick: () => navigate(formatLbryUriForWeb(uri)),
+        onClick: () => history.push(formatLbryUriForWeb(uri)),
         role: 'button',
       }
       : {};
@@ -209,7 +211,7 @@ class FileTile extends React.PureComponent<Props> {
 
                     clearPublish(); // to remove any existing publish data
                     updatePublishForm({ name: claimName }); // to populate the name
-                    navigate('/publish');
+                    history.push('/publish');
                   }}
                 />
               }
@@ -221,4 +223,4 @@ class FileTile extends React.PureComponent<Props> {
   }
 }
 
-export default FileTile;
+export default withRouter(FileTile);

src/ui/component/header/view.jsx

@@ -88,7 +88,7 @@ const Header = (props: Props) => {
               {roundedBalance} <LbcSymbol />
             </React.Fragment>
           }
-          navigate="/$/wallet"
+          navigate="/$/account"
         />
 
         <Button

src/ui/component/navigationHistory/index.js

@@ -11,7 +11,7 @@ const select = (state, props) => {
   return {
     page,
     pageCount: selectHistoryPageCount(state),
-    history: makeSelectHistoryForPage(page)(state),
+    historyItems: makeSelectHistoryForPage(page)(state),
   };
 };
 

src/ui/component/navigationHistory/view.jsx

@@ -4,19 +4,20 @@ import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
 import ReactPaginate from 'react-paginate';
 import NavigationHistoryItem from 'component/navigationHistoryItem';
-import { navigate } from '@reach/router';
+import { withRouter } from 'react-router-dom';
 
 type HistoryItem = {
   uri: string,
   lastViewed: number,
 };
 
 type Props = {
-  history: Array<HistoryItem>,
+  historyItems: Array<HistoryItem>,
   page: number,
   pageCount: number,
   clearHistoryUri: string => void,
   params: { page: number },
+  history: { push: string => void },
 };
 
 type State = {
@@ -52,7 +53,8 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
   }
 
   changePage(pageNumber: number) {
-    navigate(`?page=${pageNumber}`);
+    const { history } = this.props;
+    history.push(`?page=${pageNumber}`);
   }
 
   paginate(e: SyntheticKeyboardEvent<*>) {
@@ -69,9 +71,9 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
   }
 
   selectAll() {
-    const { history } = this.props;
+    const { historyItems } = this.props;
     const newSelectedState = {};
-    history.forEach(({ uri }) => (newSelectedState[uri] = true));
+    historyItems.forEach(({ uri }) => (newSelectedState[uri] = true));
     this.setState({ itemsSelected: newSelectedState });
   }
 
@@ -92,7 +94,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { history = [], page, pageCount } = this.props;
+    const { historyItems = [], page, pageCount } = this.props;
     const { itemsSelected } = this.state;
     const allSelected = Object.keys(itemsSelected).length === history.length;
     const selectHandler = allSelected ? this.unselectAll : this.selectAll;
@@ -113,9 +115,9 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
             onClick={selectHandler}
           />
         </div>
-        {!!history.length && (
+        {!!historyItems.length && (
           <section className="card__content item-list">
-            {history.map(item => (
+            {historyItems.map(item => (
               <NavigationHistoryItem
                 key={item.uri}
                 uri={item.uri}
@@ -182,4 +184,4 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
     );
   }
 }
-export default UserHistoryPage;
+export default withRouter(UserHistoryPage);