nav-link as a legacy Link substitute

frontend/src/components/breadcrumb/index.js

@@ -1,12 +1,13 @@
+const React = require('react');
+const Styled = require('styled-components');
+const flatten = require('lodash.flatten');
+
 const Container = require('@ui/components/container');
 const Row = require('@ui/components/row');
 const Column = require('@ui/components/column');
 const BaseElements = require('@ui/components/base-elements');
+const NavLink = require('@ui/components/nav-link');
 const PropTypes = require('@root/prop-types');
-const React = require('react');
-const ReactRouter = require('react-router-dom');
-const Styled = require('styled-components');
-const flatten = require('lodash.flatten');
 const fns = require('@ui/shared/functions');
 const constants = require('@ui/shared/constants');
 
@@ -28,12 +29,12 @@ const {
 
 // Main Contonent Wrapper Styles
 const StyledDiv = styled.div`
-  border-bottom: solid ${remcalc(1)} ${colors.greyDark};
+  border-bottom: solid ${remcalc(1)} ${colors.base.greyDark};
   padding: ${remcalc(30)} 0;
   margin-bottom: ${remcalc(21)};
 `;
 
-const BreadcrumbA = styled.a`
+const BreadcrumbA = styled(NavLink)`
   text-decoration: none;
 `;
 
@@ -41,10 +42,6 @@ const BreadcrumbSpan = styled.span`
   color: ${colors.base.secondaryDark};
 `;
 
-const {
-  Link
-} = ReactRouter;
-
 function getNameLink(name) {
   return flatten(name.map((part, i) => {
     if (!part.name) {
@@ -52,17 +49,9 @@ function getNameLink(name) {
     }
 
     const link = (
-      <Link key={part.pathname} to={part.pathname}>
+      <BreadcrumbA key={part.pathname} to={part.pathname}>
-        {
+        {part.name}
-          ({
+      </BreadcrumbA>
-            href,
-            onClick,
-          }) =>
-            <BreadcrumbA href={href} onClick={onClick}>
-              {part.name}
-            </BreadcrumbA>
-        }
-      </Link>
     );
 
     const key = `${part.pathname}${i}`;

frontend/src/components/navigation/org.js

@@ -1,10 +1,10 @@
 const React = require('react');
-const ReactRouter = require('react-router-dom');
 const ReactRedux = require('react-redux');
 const Styled = require('styled-components');
 
 const Avatar = require('@ui/components/avatar');
 const Container = require('@ui/components/container');
+const NavLink = require('@ui/components/nav-link');
 const constants = require('@ui/shared/constants');
 const PropTypes = require('@root/prop-types');
 const selectors = require('@state/selectors');
@@ -15,10 +15,6 @@ const {
   connect
 } = ReactRedux;
 
-const {
-  NavLink
-} = ReactRouter;
-
 const {
   default: styled
 } = Styled;
@@ -110,31 +106,24 @@ const OrgNavigation = ({
 
     return (
       <NavLi key={to}>
-        <NavLink activeClassName='active' to={to}>
+        <NavLink activeClassName='active' to={to}>{({
-          {
+          isActive
-            ({
+        }) =>
-              isActive,
+          <NavigationLinkContainer className={isActive ? 'active' : ''}>
-              href,
+            { !isActive && <Shadow />}
-              onClick,
+            <OrgImage>
-            }) =>
+              <OrgAvatar
-              <a href={href} onClick={onClick}>
+                height={remcalc(26)}
-                <NavigationLinkContainer className={isActive ? 'active' : ''}>
+                name={name}
-                  { !isActive && <Shadow />}
+                src={image}
-                  <OrgImage>
+                width={remcalc(26)}
-                    <OrgAvatar
+              />
-                      height={remcalc(26)}
+            </OrgImage>
-                      name={name}
+            <OrgName>
-                      src={image}
+              {name}
-                      width={remcalc(26)}
+            </OrgName>
-                    />
+          </NavigationLinkContainer>
-                  </OrgImage>
+        }</NavLink>
-                  <OrgName>
-                    {name}
-                  </OrgName>
-                </NavigationLinkContainer>
-              </a>
-          }
-        </NavLink>
       </NavLi>
     );
   });

frontend/src/components/section/index.js

@@ -1,9 +1,9 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
-const ReactRouter = require('react-router-dom');
 const Styled = require('styled-components');
 
 const Li = require('@ui/components/horizontal-list/li');
+const NavLink = require('@ui/components/nav-link');
 const constants = require('@ui/shared/constants');
 const PropTypes = require('@root/prop-types');
 const Ul = require('@ui/components/horizontal-list/ul');
@@ -17,10 +17,6 @@ const {
   FormattedMessage
 } = ReactIntl;
 
-const {
-  NavLink
-} = ReactRouter;
-
 const {
   breakpoints,
 } = constants;

frontend/src/containers/projects/index.js

@@ -1,10 +1,10 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router-dom');
 
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
+const NavLink = require('@ui/components/nav-link');
 const EmptyProjects = require('@components/empty/projects');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
@@ -23,10 +23,6 @@ const {
   projectsByOrgIdSelector
 } = selectors;
 
-const {
-  NavLink
-} = ReactRouter;
-
 const Projects = (props) => {
   const {
     org = {},

ui/src/components/nav-link/index.js

@@ -0,0 +1,80 @@
+// from https://github.com/ReactTraining/react-router/blob/91f529db2e4feb7b8581881c83ee96f7ceabfb26/packages/react-router-dom/modules/NavLink.js
+
+const React = require('react');
+const ReactRouter = require('react-router-dom');
+
+const {
+  Link,
+  Route
+} = ReactRouter;
+
+const NavLink = ({
+  activeClassName,
+  activeStyle,
+  children,
+  className,
+  exact,
+  isActive: getIsActive,
+  strict,
+  style,
+  to,
+  ...rest
+}) => {
+  const render = (props) => {
+    const {
+      // eslint-disable-next-line react/prop-types
+      location,
+      // eslint-disable-next-line react/prop-types
+      match
+    } = props;
+
+    // eslint-disable-next-line object-curly-newline
+    const isActive = !!(getIsActive ? getIsActive(match, location) : match);
+    const newChildren = typeof children === 'function'
+      ? children({ ...props, isActive }) // eslint-disable-line object-curly-newline
+      : children;
+
+    const clssnm = isActive
+      ? [ activeClassName, className ].join(' ')
+      : className;
+
+    return (
+      <Link
+        className={clssnm}
+        // eslint-disable-next-line object-curly-newline
+        style={isActive ? { ...style, ...activeStyle } : style}
+        to={to}
+        {...rest}
+      >
+        {newChildren}
+      </Link>
+    );
+  };
+
+  return (
+    <Route
+      // eslint-disable-next-line react/no-children-prop
+      children={render}
+      exact={exact}
+      path={typeof to === 'object' ? to.pathname : to}
+      strict={strict}
+    />
+  );
+};
+
+NavLink.propTypes = {
+  activeClassName: React.PropTypes.string,
+  activeStyle: React.PropTypes.object,
+  children: React.PropTypes.oneOf([
+    React.PropTypes.node,
+    React.PropTypes.func
+  ]),
+  className: React.PropTypes.string,
+  exact: React.PropTypes.bool,
+  isActive: React.PropTypes.func,
+  strict: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  to: Link.propTypes.to
+};
+
+module.exports = NavLink;

ui/src/index.js

@@ -12,6 +12,7 @@ module.exports = {
   List: require('./components/list'),
   Modal: require('./components/modal'),
   MiniMetric: require('./components/mini-metric'),
+  NavLink: require('./components/nav-link'),
   Notificaton: require('./components/notification'),
   Pagination: require('./components/pagination'),
   Radio: require('./components/radio'),