ui: migrate router-aware navigation to hooks

Author: zerbitx

ui/src/components/basic/CustomNavLink/CustomNavLink.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
-import { NavLink, NavLinkProps } from 'react-router-dom';
+import { NavLink, NavLinkProps, useLocation, useResolvedPath } from 'react-router-dom';
 import { formatURL } from 'lib/utils';
 
-const CustomNavLink = (props: NavLinkProps) => (
-  <NavLink
-    isActive={(_, { pathname }) =>
-      pathname.startsWith(
-        typeof props.to === 'object' ? formatURL(props.to.pathname) : formatURL(props.to.toString().replace(/\?.+$/, ''))
-      )
-    }
-    {...props}
-  />
-);
+interface Props extends Omit<NavLinkProps, 'className'> {
+  activeClassName?: string;
+  className?: string;
+}
+
+const CustomNavLink = ({ activeClassName, className, to, ...props }: Props) => {
+  const location = useLocation();
+  const resolvedPath = useResolvedPath(to);
+  const currentPath = formatURL(location.pathname);
+  const targetPath = formatURL(resolvedPath.pathname);
+  const isActive = targetPath ? currentPath.startsWith(targetPath) : currentPath === targetPath;
+  const classNames = [className, isActive ? activeClassName : undefined].filter(Boolean).join(' ');
+
+  return <NavLink {...props} className={classNames} to={to} />;
+};
 
 export default CustomNavLink;

ui/src/components/basic/LinkTabSelector/CommandsLinkTabSelector/CommandsLinkTabSelector.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styles from '../LinkTabSelector.module.scss';
 import LinkTabSelector from 'components/basic/LinkTabSelector/LinkTabSelector';
 import CustomNavLink from 'components/basic/CustomNavLink/CustomNavLink';
 import { formatURL } from 'lib/utils';
 
-interface Props extends RouteComponentProps {
+interface Props {
   className?: string;
 }
 
 const CommandsLinkTabSelector = (props: Props) => {
-  const currentPathArr = formatURL(props.location.pathname).split('/');
+  const location = useLocation();
+  const currentPathArr = formatURL(location.pathname).split('/');
   currentPathArr.length = currentPathArr.length - 2;
   const currentPath = currentPathArr.join('/');
 
@@ -23,4 +24,4 @@ const CommandsLinkTabSelector = (props: Props) => {
   );
 };
 
-export default withRouter(CommandsLinkTabSelector);
+export default CommandsLinkTabSelector;

ui/src/components/basic/LinkTabSelector/LogsLinkTabSelector/LogsLinkTabSelector.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styles from '../LinkTabSelector.module.scss';
 import LinkTabSelector from 'components/basic/LinkTabSelector/LinkTabSelector';
 import CustomNavLink from 'components/basic/CustomNavLink/CustomNavLink';
 import { formatURL } from 'lib/utils';
 
-interface Props extends RouteComponentProps {
+interface Props {
   className?: string;
 }
 
 const LogsLinkTabSelector = (props: Props) => {
-  const currentPathArr = formatURL(props.location.pathname).split('/');
+  const location = useLocation();
+  const currentPathArr = formatURL(location.pathname).split('/');
   currentPathArr.length = currentPathArr.length - 2;
   const currentPath = currentPathArr.join('/');
 
@@ -23,4 +24,4 @@ const LogsLinkTabSelector = (props: Props) => {
   );
 };
 
-export default withRouter(LogsLinkTabSelector);
+export default LogsLinkTabSelector;

ui/src/components/basic/LinkTabSelector/StackLinkTabSelector/StackLinkTabSelector.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import styles from '../LinkTabSelector.module.scss';
 import LinkTabSelector from 'components/basic/LinkTabSelector/LinkTabSelector';
 import CustomNavLink from 'components/basic/CustomNavLink/CustomNavLink';
 import { formatURL } from 'lib/utils';
 
-interface Props extends RouteComponentProps {
+interface Props {
   className?: string;
 }
 
 const StackLinkTabSelector = (props: Props) => {
-  const currentPathArr = formatURL(props.location.pathname).split('/');
+  const location = useLocation();
+  const currentPathArr = formatURL(location.pathname).split('/');
   currentPathArr.length = currentPathArr.length - 2;
   const currentPath = currentPathArr.join('/');
 
@@ -23,4 +24,4 @@ const StackLinkTabSelector = (props: Props) => {
   );
 };
 
-export default withRouter(StackLinkTabSelector);
+export default StackLinkTabSelector;

ui/src/components/basic/PageLayout/Header/Breadcrumb/Breadcrumb.tsx

@@ -1,77 +1,67 @@
 import React from 'react';
 import styles from './Breadcrumb.module.scss';
 import Arrow from 'images/breadcrumb-arrow.svg';
-import { withRouter, RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import ErrorBoundary from 'components/basic/ErrorBoundary/ErrorBoundary';
 import withDevSpaceConfig, { DevSpaceConfigContext } from 'contexts/withDevSpaceConfig/withDevSpaceConfig';
+import { formatURL } from 'lib/utils';
 
 const capitalize = (s: string) => {
   if (typeof s !== 'string') return '';
   return s.charAt(0).toUpperCase() + s.slice(1);
 };
 
-interface Props extends RouteComponentProps, DevSpaceConfigContext {}
-interface State {}
+interface Props extends DevSpaceConfigContext {}
 
-class Breadcrumb extends React.Component<Props, State> {
-  isComponentMounted: boolean = false;
+const Breadcrumb = (props: Props) => {
+  const location = useLocation();
 
-  componentDidMount() {
-    this.isComponentMounted = true;
-  }
+  const renderBreadcrumb = () => {
+    const arrow = <img alt="" src={Arrow} />;
+    const crumbs = formatURL(location.pathname)
+      .split('/')
+      .filter(Boolean);
+    const breadcrumbs = crumbs.length > 1 ? crumbs.slice(0, crumbs.length - 1) : crumbs;
 
-  componentWillUnmount() {
-    this.isComponentMounted = false;
-  }
-
-  renderBreadcrumb = () => {
-    const arrow = <img src={Arrow} />;
-
-    // Removes empty string "" because path starts with "/"
-    const crumbs = this.props.match.url.split('/').slice(1);
-    const crumbsWithIds = crumbs.slice(0, crumbs.length - 1);
-    const params = this.props.match.path.split('/').slice(1);
-    const crumbsWithParams = params.slice(0, params.length - 1);
+    if (!breadcrumbs.length) {
+      return null;
+    }
 
-    if (crumbs.length === 1) {
+    if (breadcrumbs.length === 1) {
       return (
         <span className={styles.crumb}>
           {arrow}
-          <span className={styles.text}>{capitalize(crumbs[0])}</span>
+          <span className={styles.text}>{capitalize(breadcrumbs[0])}</span>
         </span>
       );
     }
 
-    return [
-      crumbsWithParams.map((crumb: string, idx: number) => {
-        const isLastOne = idx === crumbsWithParams.length - 1;
-        const shouldNotBeLink = false;
-
-        if (isLastOne || shouldNotBeLink) {
-          return (
-            <span className={styles.crumb} key={idx}>
-              {arrow}
-              <span className={styles.text}>{capitalize(crumb)}</span>
-            </span>
-          );
-        }
+    return breadcrumbs.map((crumb: string, idx: number) => {
+      const isLastOne = idx === breadcrumbs.length - 1;
 
+      if (isLastOne) {
         return (
           <span className={styles.crumb} key={idx}>
             {arrow}
-            <Link to={'/' + crumbsWithIds.slice(0, idx + 1).join('/')}>{capitalize(crumb)}</Link>
+            <span className={styles.text}>{capitalize(crumb)}</span>
           </span>
         );
-      }),
-    ];
+      }
+
+      return (
+        <span className={styles.crumb} key={idx}>
+          {arrow}
+          <Link to={'/' + breadcrumbs.slice(0, idx + 1).join('/')}>{capitalize(crumb)}</Link>
+        </span>
+      );
+    });
   };
 
-  renderPrefix = () => {
-    if (!this.props.devSpaceConfig.workingDirectory || !this.props.devSpaceConfig.config) {
+  const renderPrefix = () => {
+    if (!props.devSpaceConfig.workingDirectory || !props.devSpaceConfig.config) {
       return 'DevSpace';
     } else {
-      const wd = this.props.devSpaceConfig.workingDirectory;
+      const wd = props.devSpaceConfig.workingDirectory;
       // Unix
       const lastIdxOfSlash = wd.lastIndexOf('/');
       // Windows
@@ -85,22 +75,20 @@ class Breadcrumb extends React.Component<Props, State> {
     }
   };
 
-  renderRoute() {
+  const renderRoute = () => {
     return (
       <React.Fragment>
-        <div className={styles['account-selector']}>{this.renderPrefix()}</div>
-        <div className={styles.crumbs}>{this.renderBreadcrumb()}</div>
+        <div className={styles['account-selector']}>{renderPrefix()}</div>
+        <div className={styles.crumbs}>{renderBreadcrumb()}</div>
       </React.Fragment>
     );
-  }
+  };
 
-  render() {
-    return (
-      <ErrorBoundary>
-        <div className={styles.breadcrumb}>{this.renderRoute()}</div>
-      </ErrorBoundary>
-    );
-  }
-}
+  return (
+    <ErrorBoundary>
+      <div className={styles.breadcrumb}>{renderRoute()}</div>
+    </ErrorBoundary>
+  );
+};
 
-export default withRouter(withDevSpaceConfig(Breadcrumb));
+export default withDevSpaceConfig(Breadcrumb);