refactor: code refactoring

openedx · Oct 4, 2023 · 0109515 · 0109515
1 parent 1429e32
commit 0109515
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 16 deletions.
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -20,11 +20,9 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
 };
 
 exports.onCreatePage = ({ page, actions }) => {
-  const { createPage, deletePage } = actions;
+  const { createPage } = actions;
   const githubEditPath = `https://github.com/openedx/paragon/edit/master/www/src${page.componentPath.split('src')[1]}`;
-  deletePage(page);
-  // console.log('=================== page ====================', page.component);
-  // You can access the variable "house" in your page queries now
+
   createPage({
     ...page,
     context: {

diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Hyperlink, Nav } from '~paragon-react';
 
 export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
-  githubEditPath: string,
+  githubEditPath?: string,
   isNavLink?: boolean;
 }
 

diff --git a/www/src/pages/404.tsx b/www/src/pages/404.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Layout from '../components/PageLayout';
 import SEO from '../components/SEO';
 
-function NotFoundPage() {
+function NotFoundPage({ pageContext }) {
   return (
-    <Layout>
+    <Layout githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="404: Not found" />
       <h1>404: Not Found</h1>
@@ -14,4 +15,10 @@ function NotFoundPage() {
   );
 }
 
+NotFoundPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
+
 export default NotFoundPage;
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
@@ -121,13 +121,16 @@ export interface IColorsPage {
       nodes: [],
     },
   },
+  pageContext: {
+    githubEditPath: string,
+  }
 }
 
 // eslint-disable-next-line react/prop-types
 export default function ColorsPage({ data, pageContext }: IColorsPage) {
   const { settings } = useContext(SettingsContext);
   parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types
-  // console.log('====================== pageContext ========================', pageContext);
+
   return (
     <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}

diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx
@@ -399,3 +399,9 @@ export default function ElevationPage({ pageContext }) {
     </Layout>
   );
 }
+
+ElevationPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
diff --git a/www/src/pages/foundations/responsive.jsx b/www/src/pages/foundations/responsive.jsx
@@ -79,6 +79,7 @@ function Responsive({ pageContext }) {
             { Header: 'Min width', accessor: 'minWidth', Cell: MinWidthCell },
             { Header: 'Max Width', accessor: 'maxWidth', Cell: MaxWidthCell },
           ]}
+          itemCount={0}
         >
           <DataTable.Table />
         </DataTable>
@@ -103,6 +104,12 @@ function Responsive({ pageContext }) {
   );
 }
 
+Responsive.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
+
 const cellPropTypes = {
   row: PropTypes.shape({
     values: PropTypes.shape({

diff --git a/www/src/pages/foundations/spacing.tsx b/www/src/pages/foundations/spacing.tsx
@@ -109,6 +109,7 @@ export default function SpacingPage({ pageContext }) {
             { Header: 'Spacer value', accessor: 'spacer' },
             { Header: 'Pixel value', accessor: 'pixelValue' },
           ]}
+          itemCount={0}
         >
           <DataTable.Table />
         </DataTable>
@@ -197,9 +198,9 @@ export default function SpacingPage({ pageContext }) {
             </tr>
             <tr>
               {directions.map(({ key }) => (
-                <td>
+                <td key={key}>
                   {sizes.map(_size => (
-                    <code className="d-block">
+                    <code key={_size} className="d-block">
                       .{getUtilityClassName('m', key, _size)}
                     </code>
                   ))}
@@ -211,9 +212,9 @@ export default function SpacingPage({ pageContext }) {
             </tr>
             <tr>
               {directions.map(({ key }) => (
-                <td>
+                <td key={key}>
                   {sizes.map(_size => (
-                    <code className="d-block">
+                    <code key={_size} className="d-block">
                       .{getUtilityClassName('p', key, _size)}
                     </code>
                   ))}
@@ -226,3 +227,9 @@ export default function SpacingPage({ pageContext }) {
     </Layout>
   );
 }
+
+SpacingPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { Container } from '~paragon-react';
 import SEO from '../../components/SEO';
 import MeasuredItem from '../../components/MeasuredItem';
@@ -64,7 +65,7 @@ export default function TypographyPage({ pageContext }) {
               <th>CSS Class</th>
             </tr>
             {[1, 2, 3, 4, 5, 6].map(headingSize => (
-              <tr>
+              <tr key={headingSize}>
                 <td>
                   <MeasuredItem {...measuredTypeProps}>
                     <p className={`m-0 h${headingSize}`}>
@@ -166,7 +167,7 @@ export default function TypographyPage({ pageContext }) {
               <th>CSS Class</th>
             </tr>
             {[1, 2, 3, 4].map(displaySize => (
-              <tr>
+              <tr key={displaySize}>
                 <td>
                   <MeasuredItem {...measuredTypeProps}>
                     <p className={`m-0 display-${displaySize}`}>
@@ -398,3 +399,9 @@ export default function TypographyPage({ pageContext }) {
     </Layout>
   );
 }
+
+TypographyPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx
@@ -127,4 +127,7 @@ Playground.propTypes = {
     search: PropTypes.string,
     href: PropTypes.string,
   }).isRequired,
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
 };
diff --git a/www/src/pages/status.tsx b/www/src/pages/status.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
 import { Table, Container } from '~paragon-react';
 import { ComponentStatus } from '../components/doc-elements';
@@ -91,3 +92,9 @@ export default function StatusPage({ pageContext }) {
     </Layout>
   );
 }
+
+StatusPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
diff --git a/www/src/templates/default-mdx-page-template.tsx b/www/src/templates/default-mdx-page-template.tsx
@@ -29,14 +29,15 @@ export interface IPageTemplateType {
     frontmatter: {
       title: string,
     },
+    githubEditPath: string,
   },
 }
 
 export default function PageTemplate({ children, pageContext }: IPageTemplateType) {
   const { settings } = useContext(SettingsContext);
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title={pageContext?.frontmatter?.title} />
       <Container size={settings.containerWidth} className="py-5">
@@ -53,5 +54,6 @@ PageTemplate.propTypes = {
     frontmatter: PropTypes.shape({
       title: PropTypes.string,
     }),
+    githubEditPath: PropTypes.string,
   }).isRequired,
 };
diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -75,10 +75,11 @@ async function createPages(graphql, actions, reporter) {
   }
 
   INSIGHTS_PAGES.forEach(({ path: pagePath, tab }) => {
+    const githubEditPath = 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx';
     createPage({
       path: pagePath,
       component: require.resolve('../src/pages/insights.tsx'),
-      context: { tab, githubEditPath: 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx' },
+      context: { tab, githubEditPath },
     });
   });