fix: rewrites having no effect

mui · Nov 20, 2019 · 3c3b2e9 · 3c3b2e9
1 parent fad482d
commit 3c3b2e9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 37 deletions.
diff --git a/docs/next.config.js b/docs/next.config.js
@@ -136,7 +136,7 @@ module.exports = {
 
       pages2.forEach(page => {
         if (!page.children) {
-          map[`${prefix}${page.pathname}`] = {
+          map[`${prefix}${page.pathname.replace(/^\/api-docs\/(.*)/, '/api/$1')}`] = {
             page: page.pathname,
             query: {
               userLanguage,
@@ -160,7 +160,9 @@ module.exports = {
 
     return map;
   },
-  async rewrites() {
-    return [{ source: '/api/:rest*', destination: '/api-docs/:rest' }];
+  experimental: {
+    async rewrites() {
+      return [{ source: '/api/:rest*', destination: '/api-docs/:rest*' }];
+    },
   },
 };
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -3,7 +3,6 @@ import 'docs/src/modules/components/bootstrap';
 // --- Post bootstrap -----
 import React from 'react';
 import App from 'next/app';
-import find from 'lodash/find';
 import { Provider as ReduxProvider, useDispatch, useSelector } from 'react-redux';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
 import NextHead from 'next/head';
@@ -242,31 +241,6 @@ Tip: you can access the documentation \`theme\` object directly in the console.
   );
 }
 
-function findActivePage(currentPages, pathname) {
-  const activePage = find(currentPages, page => {
-    if (page.children) {
-      if (pathname.indexOf(`${page.pathname}/`) === 0) {
-        // Check if one of the children matches (for /components)
-        return findActivePage(page.children, pathname);
-      }
-    }
-
-    // Should be an exact match if no children
-    return pathname === page.pathname;
-  });
-
-  if (!activePage) {
-    return null;
-  }
-
-  // We need to drill down
-  if (activePage.pathname !== pathname) {
-    return findActivePage(activePage.children, pathname);
-  }
-
-  return activePage;
-}
-
 function AppWrapper(props) {
   const { children, pageProps } = props;
 
@@ -293,7 +267,7 @@ function AppWrapper(props) {
     pathname = pathname.replace(/\/$/, '');
   }
   // console.log(pages, { ...router, pathname })
-  const activePage = findActivePage(pages, pathname);
+  const activePage = { pathname: router.pathname };
 
   let fonts = ['https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'];
   if (pathname.match(/onepirate/)) {

diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
@@ -28,37 +28,49 @@ function Link(props) {
   const {
     activeClassName = 'active',
     className: classNameProps,
+    href: routerHref,
     innerRef,
     naked,
     role: roleProp,
     ...other
   } = props;
+
+  // apply nextjs rewrites
+  const href = routerHref.replace(/\/api-docs\/(.*)/, '/api/$1');
+
   const router = useRouter();
 
   const userLanguage = useSelector(state => state.options.userLanguage);
   const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === props.href && activeClassName,
+    [activeClassName]: router.pathname === routerHref && activeClassName,
   });
 
-  if (userLanguage !== 'en' && other.href.indexOf('/') === 0 && other.href.indexOf('/blog') !== 0) {
-    other.as = `/${userLanguage}${other.href}`;
+  if (userLanguage !== 'en' && href.indexOf('/') === 0 && href.indexOf('/blog') !== 0) {
+    other.as = `/${userLanguage}${href}`;
   }
 
   // catch role passed from ButtonBase. This is definitely a link
   const role = roleProp === 'button' ? undefined : roleProp;
 
-  const isExternal = other.href.startsWith('https:') || other.href.startsWith('mailto:');
+  const isExternal = href.startsWith('https:') || href.startsWith('mailto:');
 
   if (isExternal) {
-    return <MuiLink className={className} ref={innerRef} role={role} {...other} />;
+    return <MuiLink className={className} href={href} ref={innerRef} role={role} {...other} />;
   }
 
   if (naked) {
-    return <NextComposed className={className} ref={innerRef} role={role} {...other} />;
+    return <NextComposed className={className} href={href} ref={innerRef} role={role} {...other} />;
   }
 
   return (
-    <MuiLink component={NextComposed} className={className} ref={innerRef} role={role} {...other} />
+    <MuiLink
+      component={NextComposed}
+      className={className}
+      href={href}
+      ref={innerRef}
+      role={role}
+      {...other}
+    />
   );
 }