upgraded to react router v4

frontend/components/AtlasPreview/AtlasPreview.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 
 import DocumentLink from './components/DocumentLink';
 

frontend/components/AtlasPreview/components/DocumentLink/DocumentLink.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 
 import moment from 'moment';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 
 import styles from './DocumentLink.scss';
 

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { toJS } from 'mobx';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import styles from './DocumentPreview.scss';
 

frontend/components/DropdownMenu/DropdownMenu.js

@@ -1,31 +1,20 @@
 // @flow
 import React from 'react';
-import { browserHistory } from 'react-router';
 
 import styles from './DropdownMenu.scss';
 
-class MenuItem extends React.Component {
-  onClick = () => {
-    if (this.props.to) {
-      browserHistory.push(this.props.to);
-    } else {
-      this.props.onClick();
-    }
-  };
-
-  render() {
-    return (
-      <div className={styles.menuItem} onClick={this.onClick}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-MenuItem.propTypes = {
-  onClick: React.PropTypes.func,
-  to: React.PropTypes.string,
-  children: React.PropTypes.node.isRequired,
+const MenuItem = ({
+  onClick,
+  children,
+}: {
+  onClick?: Function,
+  children?: React.Element<any>,
+}) => {
+  return (
+    <div className={styles.menuItem} onClick={onClick}>
+      {children}
+    </div>
+  );
 };
 
 //

frontend/components/Layout/Layout.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { browserHistory, Link } from 'react-router';
+import { Link, withRouter } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
@@ -9,7 +9,9 @@ import keydown from 'react-keydown';
 import classNames from 'classnames/bind';
 import searchIcon from 'assets/icons/search.svg';
 import { Flex } from 'reflexbox';
+import { textColor } from 'styles/constants.scss';
 import styles from './Layout.scss';
+
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import LoadingIndicator from 'components/LoadingIndicator';
 import UserStore from 'stores/UserStore';
@@ -17,6 +19,7 @@ import UserStore from 'stores/UserStore';
 const cx = classNames.bind(styles);
 
 type Props = {
+  history: Object,
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
   title?: ?React.Element<any>,
@@ -36,19 +39,23 @@ type Props = {
 
   @keydown(['/', 't'])
   search() {
-    // if (!this.props.user) return;
-    _.defer(() => browserHistory.push('/search'));
+    if (!this.props.user) return;
+    _.defer(() => this.props.history.push('/search'));
   }
 
   @keydown(['d'])
   dashboard() {
-    // if (!this.props.user) return;
-    _.defer(() => browserHistory.push('/'));
+    if (!this.props.user) return;
+    _.defer(() => this.props.history.push('/'));
   }
 
   render() {
     const user = this.props.user;
 
+    const handleLogout = () => {
+      user.logout(() => this.props.history.push('/'));
+    };
+
     return (
       <div className={styles.container}>
         <Helmet
@@ -83,21 +90,28 @@ type Props = {
                 <Flex>
                   {this.props.search &&
                     <Flex>
-                      <div
-                        onClick={this.search}
-                        className={styles.search}
-                        title="Search (/)"
-                      >
-                        <img src={searchIcon} alt="Search" />
-                      </div>
+                      <Link to="/search">
+                        <div className={styles.search} title="Search (/)">
+                          <img
+                            src={searchIcon}
+                            alt="Search"
+                          />
+                        </div>
+                      </Link>
                     </Flex>}
                   <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
-                    <MenuItem to="/settings">Settings</MenuItem>
-                    <MenuItem to="/keyboard-shortcuts">
-                      Keyboard shortcuts
-                    </MenuItem>
-                    <MenuItem to="/developers">API</MenuItem>
-                    <MenuItem onClick={user.logout}>Logout</MenuItem>
+                    <MenuLink to="/settings">
+                      <MenuItem>Settings</MenuItem>
+                    </MenuLink>
+                    <MenuLink to="/keyboard-shortcuts">
+                      <MenuItem>
+                        Keyboard shortcuts
+                      </MenuItem>
+                    </MenuLink>
+                    <MenuLink to="/developers">
+                      <MenuItem>API</MenuItem>
+                    </MenuLink>
+                    <MenuItem onClick={handleLogout}>Logout</MenuItem>
                   </DropdownMenu>
                 </Flex>}
             </Flex>
@@ -118,4 +132,8 @@ const Avatar = styled.img`
   border-radius: 50%;
 `;
 
-export default inject('user')(Layout);
+const MenuLink = styled(Link)`
+  color: ${textColor};
+`;
+
+export default withRouter(inject('user')(Layout));

frontend/components/Sidebar/Sidebar.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
+import { withRouter } from 'react-router-dom';
 
 import { Flex } from 'reflexbox';
 import Tree from 'components/Tree';
@@ -18,6 +19,7 @@ type Props = {
   navigationTree: Object,
   onNavigationUpdate: Function,
   onNodeCollapse: Function,
+  history: Object,
 };
 
 @observer class Sidebar extends React.Component {
@@ -47,6 +49,7 @@ type Props = {
                 allowUpdates={this.store.isEditing}
                 onChange={this.props.onNavigationUpdate}
                 onCollapse={this.props.onNodeCollapse}
+                history={this.props.history}
               />
             </Flex>
             <Flex auto className={styles.actions}>
@@ -79,4 +82,4 @@ type Props = {
   }
 }
 
-export default Sidebar;
+export default withRouter(Sidebar);

frontend/components/Tree/Node.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import history from 'utils/History';
+
 import styles from './Tree.scss';
 import classNames from 'classnames/bind';
 const cx = classNames.bind(styles);
@@ -60,6 +60,7 @@ class Node extends React.Component {
                 paddingLeft={this.props.paddingLeft}
                 onCollapse={this.props.onCollapse}
                 onDragStart={this.props.onDragStart}
+                history={this.props.history}
               />
             );
           })}
@@ -77,8 +78,7 @@ class Node extends React.Component {
   onClick = () => {
     const index = this.props.index;
     const node = index.node;
-
-    if (!this.isModifying()) history.push(node.url);
+    if (!this.isModifying()) this.props.history.push(node.url);
   };
 
   render() {

frontend/components/Tree/UiTree.js

@@ -13,6 +13,7 @@ export default React.createClass({
     paddingLeft: React.PropTypes.number,
     onCollapse: React.PropTypes.func,
     allowUpdates: React.PropTypes.bool,
+    history: React.PropTypes.object,
   },
 
   getDefaultProps() {
@@ -93,6 +94,7 @@ export default React.createClass({
           onDragStart={this.dragStart}
           onCollapse={this.toggleCollapse}
           dragging={dragging && dragging.id}
+          history={this.props.history}
         />
       </div>
     );