refactor: refactoring after review

www/gatsby-node.js

@@ -13,6 +13,7 @@ const css = require('css');
 const fs = require('fs');
 const { INSIGHTS_PAGES } = require('./src/config');
 const { getThemesSCSSVariables, processComponentSCSSVariables } = require('./theme-utils');
+const componentsUsage = require('./src/utils/componentsUsage');
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -109,7 +110,12 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       component: path.resolve('./src/templates/component-page-template.tsx'),
       // You can use the values in this context in
       // our page layout component
-      context: { id: node.id, components: node.frontmatter.components || [], scssVariablesData },
+      context: {
+        id: node.id,
+        components: node.frontmatter.components || [],
+        scssVariablesData,
+        componentsUsageInsights: Object.keys(componentsUsage),
+      },
     });
   }
 

www/src/pages/insights.tsx

@@ -17,6 +17,7 @@ import SummaryUsageExamples, { ISummaryUsageExamples } from '../components/insig
 import ProjectUsageExamples, { IProjectUsageExamples } from '../components/insights/ProjectUsageExamples';
 import ComponentUsageExamples, { IComponentUsageExamples } from '../components/insights/ComponentUsageExamples';
 import getGithubProjectUrl from '../utils/getGithubProjectUrl';
+import componentsUsage from '../utils/componentsUsage';
 // @ts-ignore
 import dependentProjectsAnalysis from '../../../dependent-usage.json'; // eslint-disable-line
 import { INSIGHTS_TABS, INSIGHTS_PAGES } from '../config';
@@ -85,34 +86,22 @@ export interface IComponentUsage {
 
 const dependentProjects: IDependentUsage[] = [];
 
-const componentsUsage: Record<string, IComponentUsageData[]> = dependentProjectsUsages
-  .reduce((accumulator: any, project: any) => {
-    dependentProjects.push({
-      ...project,
-      repositoryUrl: getGithubProjectUrl(project.repository),
-      count: Object.values<IUsage[]>(project.usages).reduce((acc, usage) => acc + usage.length, 0),
-    });
-
-    Object.keys(project.usages).forEach(componentName => {
-      // The next line is necessary for the same naming of the components both in the file with the
-      // repositories of use and in the data structures GraphQL.
-      const newComponentName = componentName.replace(/\./g, '');
-      if (!accumulator[newComponentName]) {
-        accumulator[newComponentName] = [];
-      }
-      accumulator[newComponentName] = accumulator[newComponentName].concat({
-        name: project.name,
-        folderName: project.folderName,
-        version: project.version,
-        repositoryUrl: getGithubProjectUrl(project.repository),
-        componentUsageCount: project.usages[componentName].length,
-        usages: project.usages[componentName],
-      });
-    });
-    return accumulator;
-  }, {});
-
-export const componentsInUsage = Object.keys(componentsUsage);
+export interface IDependentProjectsUsages extends Omit<IDependentUsage, 'count'> {
+  version: string,
+  name: string,
+  repository: { type: string, url: string },
+  folderName: string,
+}
+
+dependentProjectsUsages.forEach((project: IDependentProjectsUsages) => {
+  dependentProjects.push({
+    ...project,
+    repositoryUrl: getGithubProjectUrl(project.repository),
+    count: Object.values<IUsage[]>(project.usages).reduce((acc, usage) => acc + usage.length, 0),
+  });
+});
+
+const componentsInUsage = Object.keys(componentsUsage);
 
 const round = (n: number) => Math.round(n * 10) / 10;
 

www/src/templates/component-page-template.tsx

@@ -17,7 +17,7 @@ import GenericPropsTable from '../components/PropsTable';
 import Layout from '../components/PageLayout';
 import SEO from '../components/SEO';
 import LinkedHeading from '../components/LinkedHeading';
-import { componentsInUsage, ComponentsUsage } from '../pages/insights';
+import { ComponentsUsage } from '../pages/insights';
 
 export interface IPageTemplate {
   data: {
@@ -39,6 +39,7 @@ export interface IPageTemplate {
   },
   pageContext: {
     scssVariablesData: Record<string, string>,
+    componentsUsageInsights: string[],
   }
 }
 
@@ -48,7 +49,7 @@ export type ShortCodesTypes = {
 
 export default function PageTemplate({
   data: { mdx, components: componentNodes },
-  pageContext: { scssVariablesData },
+  pageContext: { scssVariablesData, componentsUsageInsights },
 }: IPageTemplate) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
   const [showMinimizedTitle, setShowMinimizedTitle] = useState(false);
@@ -94,6 +95,9 @@ export default function PageTemplate({
   const usageInsightsTitle = 'Usage Insights';
   const usageInsightsUrl = 'usage-insights';
 
+  const sortedComponentNames = mdx.frontmatter?.components || [];
+  const isUsageInsights = (sortedComponentNames as []).some(value => componentsUsageInsights.includes(value));
+
   const getTocData = () => {
     const tableOfContents = JSON.parse(JSON.stringify(mdx.tableOfContents));
     if (Object.values(scssVariablesData).some(data => data) && !tableOfContents.items?.includes()) {
@@ -103,32 +107,19 @@ export default function PageTemplate({
       });
     }
     tableOfContents.items?.push({ title: propsAPITitle, url: `#${propsAPIUrl}` });
-    tableOfContents.items?.push({ title: usageInsightsTitle, url: `#${usageInsightsUrl}` });
+    if (isUsageInsights) {
+      tableOfContents.items?.push({
+        title: usageInsightsTitle,
+        url: `#${usageInsightsUrl}`,
+      });
+    }
     return tableOfContents;
   };
 
-  const sortedComponentNames = mdx.frontmatter?.components || [];
-
   const isDeprecated = mdx.frontmatter?.status?.toLowerCase().includes('deprecate') || false;
 
   useEffect(() => setShowMinimizedTitle(!!isMobile), [isMobile]);
 
-  const usageComponents = {};
-
-  componentsInUsage.forEach(key => {
-    usageComponents[key] = null;
-  });
-
-  if (typeof sortedComponentNames !== 'string') {
-    sortedComponentNames.forEach(componentName => {
-      if (componentName in usageComponents) {
-        usageComponents[componentName] = componentName;
-      }
-    });
-  }
-
-  const noMatchingValues = (sortedComponentNames as []).every(componentName => !(componentName in usageComponents));
-
   return (
     <Layout
       showMinimizedTitle={showMinimizedTitle}
@@ -174,7 +165,7 @@ export default function PageTemplate({
           }
           return <GenericPropsTable key={node.displayName} {...node} />;
         })}
-        {!noMatchingValues && (
+        {isUsageInsights && (
           <>
             <h2 className="pgn-doc__heading m-0" id={usageInsightsUrl}>
               {usageInsightsTitle}

www/src/utils/componentsUsage.js

@@ -0,0 +1,29 @@
+const getGithubProjectUrl = require('./getGithubProjectUrl');
+const dependentProjectsAnalysis = require('../../../dependent-usage.json');
+
+const {
+  projectUsages: dependentProjectsUsages,
+} = dependentProjectsAnalysis;
+
+const componentsUsage = dependentProjectsUsages
+  .reduce((accumulator, project) => {
+    Object.keys(project.usages).forEach(componentName => {
+      // The next line is necessary for the same naming of the components both in the file with the
+      // repositories of use and in the data structures GraphQL.
+      const newComponentName = componentName.replace(/\./g, '');
+      if (!accumulator[newComponentName]) {
+        accumulator[newComponentName] = [];
+      }
+      accumulator[newComponentName] = accumulator[newComponentName].concat({
+        name: project.name,
+        folderName: project.folderName,
+        version: project.version,
+        repositoryUrl: getGithubProjectUrl(project.repository),
+        componentUsageCount: project.usages[componentName].length,
+        usages: project.usages[componentName],
+      });
+    });
+    return accumulator;
+  }, {});
+
+module.exports = componentsUsage;

www/src/utils/getGithubProjectUrl.ts → www/src/utils/getGithubProjectUrl.js

@@ -1,4 +1,4 @@
-const getGithubProjectUrl = (repository?: string | { type: string, url: string }): string | undefined => {
+const getGithubProjectUrl = (repository) => {
   let repositoryUrl;
   if (typeof repository === 'string') {
     repositoryUrl = repository;
@@ -9,10 +9,10 @@ const getGithubProjectUrl = (repository?: string | { type: string, url: string }
     return undefined;
   }
   const parts = repositoryUrl.split('/');
-  const githubDomainIndex = parts.findIndex((part: string) => part === 'github.com');
+  const githubDomainIndex = parts.findIndex((part) => part === 'github.com');
   parts.splice(0, githubDomainIndex);
   const parsedRepositoryUrl = parts.join('/').replace('.git', '');
   return `https://${parsedRepositoryUrl}/blob/master`;
 };
 
-export default getGithubProjectUrl;
+module.exports = getGithubProjectUrl;