feat: Add a useComponentDoc hook. Update ReferenceTemplate to use it

newrelic · Jun 3, 2020 · e3fc863 · e3fc863
1 parent 5572f98
commit e3fc863
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 28 deletions.
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+const IGNORED_METHODS = [
+  'prototype',
+  'length',
+  'name',
+  'propTypes',
+  'getDerivedStateFromProps',
+  'defaultProps',
+];
+
+const useComponentDoc = (componentName) => {
+  if (typeof window === 'undefined') global.window = {};
+
+  return useMemo(() => {
+    const component = window?.__NR1_SDK__?.default?.[componentName];
+
+    return {
+      description: component?.__docs__.text,
+      examples: component?.__docs__.tags.examples ?? [],
+      methods: Object.getOwnPropertyNames(component).filter(
+        (member) =>
+          !IGNORED_METHODS.includes(member) &&
+          typeof component[member] === 'function'
+      ),
+    };
+  }, [componentName, window?.__NR1_SDK__]);
+};
+
+export default useComponentDoc;
diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
@@ -8,10 +8,9 @@ import ComponentExample from '../components/ComponentExample';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
-
 import pages from '../data/sidenav.json';
-
 import styles from './ReferenceTemplate.module.scss';
+import useComponentDoc from '../hooks/useComponentDoc';
 
 const previewStyles = {
   Spinner: {
@@ -24,10 +23,9 @@ const ReferenceTemplate = ({ data }) => {
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
-
-  if (typeof window === 'undefined') global.window = {};
-  const componentData = window?.__NR1_SDK__?.default?.[component];
-  const examples = componentData?.__docs__.tags.examples || [];
+  const { examples, description: componentDescription } = useComponentDoc(
+    component
+  );
 
   return (
     <Layout>
@@ -42,28 +40,24 @@ const ReferenceTemplate = ({ data }) => {
         <main className={styles.content}>
           <h1>{component}</h1>
 
-          {componentData && componentData.__docs__ && (
-            <>
-              <section className={cx(styles.section, styles.description)}>
-                <ReactMarkdown source={componentData.__docs__.text} />
-              </section>
-              {examples.length > 0 && (
-                <section className={styles.section}>
-                  <h2>Examples</h2>
-                  <div>
-                    {examples.map((example, i) => (
-                      <ComponentExample
-                        key={i}
-                        useToastManager={component === 'Toast'}
-                        className={styles.componentExample}
-                        example={example}
-                        previewStyle={previewStyles[component]}
-                      />
-                    ))}
-                  </div>
-                </section>
-              )}
-            </>
+          <section className={cx(styles.section, styles.description)}>
+            <ReactMarkdown source={componentDescription} />
+          </section>
+          {examples.length > 0 && (
+            <section className={styles.section}>
+              <h2>Examples</h2>
+              <div>
+                {examples.map((example, i) => (
+                  <ComponentExample
+                    key={i}
+                    useToastManager={component === 'Toast'}
+                    className={styles.componentExample}
+                    example={example}
+                    previewStyle={previewStyles[component]}
+                  />
+                ))}
+              </div>
+            </section>
           )}
         </main>
       </Container>