fix: move link query update template to use new page context

carbon-design-system · Jul 17, 2019 · 53a344c · 53a344c
1 parent 98ddefd
commit 53a344c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.js b/packages/gatsby-theme-carbon/src/components/EditLink/EditLink.js
@@ -1,38 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { graphql, useStaticQuery } from 'gatsby';
 
 import { link, row } from './EditLink.module.scss';
 
-export default class EditLink extends React.Component {
-  render() {
-    const {
-      repository: { baseUrl, subDirectory },
-      slug,
-      fileType,
-    } = this.props;
-    const href = `${baseUrl}/tree/master${subDirectory}/src/pages${slug}.${fileType}`;
+const EditLink = ({ relativePagePath }) => {
+  const {
+    site: {
+      siteMetadata: { repository },
+    },
+  } = useStaticQuery(graphql`
+    query REPOSITORY_QUERY {
+      site {
+        siteMetadata {
+          repository {
+            baseUrl
+            subDirectory
+          }
+        }
+      }
+    }
+  `);
 
-    return baseUrl ? (
-      <div className={`bx--row ${row}`}>
-        <div className="bx--col">
-          <a className={link} href={href}>
-            Edit this page on GitHub
-          </a>
-        </div>
+  const { baseUrl, subDirectory } = repository;
+  const href = `${baseUrl}/tree/master${subDirectory}/src/pages${relativePagePath}`;
+
+  return baseUrl ? (
+    <div className={`bx--row ${row}`}>
+      <div className="bx--col">
+        <a className={link} href={href}>
+          Edit this page on GitHub
+        </a>
       </div>
-    ) : null;
-  }
-}
+    </div>
+  ) : null;
+};
 
 EditLink.propTypes = {
   repository: PropTypes.shape({
     baseUrl: PropTypes.string,
     subDirectory: PropTypes.string,
   }),
-  fileType: PropTypes.string,
-  slug: PropTypes.string.isRequired,
+  relativePagePath: PropTypes.string,
 };
 
 EditLink.defaultProps = {
-  fileType: 'mdx',
+  relativePagePath: '/index.mdx',
 };
+
+export default EditLink;
diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js
@@ -13,27 +13,18 @@ import PageTabs from '../components/PageTabs';
 import Main from '../components/Main';
 
 const Default = ({ pageContext, children, location }) => {
-  const { frontmatter = {} } = pageContext;
+  const { frontmatter = {}, relativePagePath } = pageContext;
   const { tabs, title } = frontmatter;
   const scrollDirection = useScrollDirection();
   const shouldHideHeader = !!tabs && scrollDirection === 'down';
 
   // get the path prefix if it exists
   const {
-    site: {
-      pathPrefix,
-      siteMetadata: { repository },
-    },
+    site: { pathPrefix },
   } = useStaticQuery(graphql`
     query PATH_PREFIX_QUERY {
       site {
         pathPrefix
-        siteMetadata {
-          repository {
-            baseUrl
-            subDirectory
-          }
-        }
       }
     }
   `);
@@ -61,9 +52,8 @@ const Default = ({ pageContext, children, location }) => {
       </PageHeader>
       <Main padded>
         {children}
-        <EditLink repository={repository} slug={slug} />
+        <EditLink relativePagePath={relativePagePath} />
       </Main>
-
       <NextPrevious
         pageContext={pageContext}
         location={location}