Persist mapper query param in docs.

Author: Hyperkid123

packages/react-renderer-demo/src/components/common/connected-links.js

@@ -7,6 +7,7 @@ import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import Link from 'next/link';
 
 import MenuContext from '../navigation/menu-context';
+import useMapperLink from '../../hooks/use-mapper-link';
 
 const useStyles = makeStyles(() => ({
   linksContainer: {
@@ -23,12 +24,14 @@ const useStyles = makeStyles(() => ({
 const ConnectedLinks = () => {
   const { prev, next } = useContext(MenuContext);
   const classNames = useStyles();
+  const prevLink = `/${useMapperLink(prev && prev.link)}`;
+  const nextLink = `/${useMapperLink(next && next.link)}`;
   return (
     <Grid container justify="space-between" className={classNames.linksContainer}>
       <Grid item>
         {prev && prev.link && (
-          <Link href={`/${prev.link}`}>
-            <a className={classNames.link} href={`/${prev.link}`}>
+          <Link href={prevLink}>
+            <a className={classNames.link} href={prevLink}>
               <Button>
                 <ChevronLeft />
                 {prev.label}
@@ -39,8 +42,8 @@ const ConnectedLinks = () => {
       </Grid>
       <Grid item>
         {next && next.link && (
-          <Link href={`/${next.link}`}>
-            <a className={classNames.link} href={`/${next.link}`}>
+          <Link href={nextLink}>
+            <a className={classNames.link} href={nextLink}>
               <Button>
                 {next.label}
                 <ChevronRight />

packages/react-renderer-demo/src/components/navigation/mapper.js

@@ -15,12 +15,14 @@ import { useRouter } from 'next/router';
 
 import { navStyles } from './nav-styles';
 import { query } from './find-connected-links';
+import useMapperLink from '../../hooks/use-mapper-link';
 
 const useStyles = makeStyles(navStyles);
 
 const Item = ({ href, linkText, component }) => {
   const classes = useStyles();
   const router = useRouter();
+  const link = useMapperLink(href.replace('/?', '?'));
 
   return (
     <ListItem
@@ -29,8 +31,8 @@ const Item = ({ href, linkText, component }) => {
       key={href || linkText}
       className={classes.nested}
       component={forwardRef((props, ref) => (
-        <RouterNavLink ref={ref} key={component} href={href.replace('/?', '?')}>
-          <Link style={{ color: 'rgba(0, 0, 0, 0.87)' }} {...props} href={href.replace('/?', '?')} />
+        <RouterNavLink ref={ref} key={component} href={link}>
+          <Link style={{ color: 'rgba(0, 0, 0, 0.87)' }} {...props} href={link} />
         </RouterNavLink>
       ))}
     >

packages/react-renderer-demo/src/hooks/use-mapper-link.js

@@ -0,0 +1,12 @@
+import useQueryParam from './use-query-param';
+
+/**
+ * Appends current query mapper value to URL
+ * @param {string} link url string to be appended with current mapper query param
+ */
+const useMapperLink = (link = '') => {
+  const mapperQuery = useQueryParam('mapper');
+  return link.includes('component-example/') ? `${link}${mapperQuery}` : link;
+};
+
+export default useMapperLink;

packages/react-renderer-demo/src/hooks/use-query-param.js

@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+/**
+ * Returns a value of given query param from URL
+ * @param {string} param name of the query param value to be extracted from URL
+ */
+const useQueryParam = (param) => {
+  const { asPath } = useRouter();
+  if (!param) {
+    return '';
+  }
+
+  const queryParam = new URLSearchParams(`?${asPath.split('?').pop()}`).get(param);
+  if (!queryParam) {
+    return '';
+  }
+
+  return `?${param}=${queryParam}`;
+};
+
+export default useQueryParam;

yarn.lock

@@ -6335,6 +6335,11 @@ clsx@^1.0.2, clsx@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
 
+clsx@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702"
+  integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==
+
 cmd-shim@^3.0.0, cmd-shim@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-3.0.3.tgz#2c35238d3df37d98ecdd7d5f6b8dc6b21cadc7cb"