From 0e770d838da7891131b05356ed6ae3cf84f15bfc Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Wed, 10 Jun 2020 17:16:48 -0400
Subject: [PATCH] feat: constants showing up on page

---
 src/components/ConstantReference.js          | 38 ++++++++++++++++++++
 src/components/ConstantReference.module.scss |  0
 src/hooks/useApiDoc.js                       |  2 +-
 src/templates/ApiReferenceTemplate.js        | 15 ++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ConstantReference.js
 create mode 100644 src/components/ConstantReference.module.scss

diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js
new file mode 100644
index 000000000..0d751427b
--- /dev/null
+++ b/src/components/ConstantReference.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import Markdown from 'react-markdown';
+import PropTypes from 'prop-types';
+import styles from './TypeDefReference.module.scss';
+
+const ConstantReference = ({ constant }) => {
+    const { name, value } = constant
+
+    const isConstantArray = Array.isArray(value)
+    console.log(isConstantArray)
+    
+    const lines = (!isConstantArray) ? 
+                    Object.getOwnPropertyNames(value).map(key=>{
+                        return `${key}: ${JSON.stringify(value[key])}`
+                    }) : value.map(el => JSON.stringify(el)); 
+   
+
+    return (
+        <div className = {styles.container}>
+            <div className = {styles.name}>{name}</div>
+            <div>{isConstantArray ? '[': '{'}</div>
+                <div className= {styles.propertyContainer}>
+                {lines.map((line,i)=> {
+                    return <Markdown 
+                        key={i}
+                        source={line}
+                    />
+                })
+                }
+                </div>
+            <div>{isConstantArray ? '}': ']'}</div>
+        </div>
+    )
+}
+
+//render differently based on whether it's an array or object
+
+export default ConstantReference
\ No newline at end of file
diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js
index ea6dac9d9..86fceddd5 100644
--- a/src/hooks/useApiDoc.js
+++ b/src/hooks/useApiDoc.js
@@ -61,7 +61,7 @@ const useApiDoc = (name) => {
             value: api[member]
           }
         })
-    }
+    };
 
     return {
       description: apiDocs?.text,
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index 4c9df8d46..163a9a5dd 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -8,6 +8,7 @@ import Container from '../components/Container';
 import Layout from '../components/Layout';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
+import ConstantReference from '../components/ConstantReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import pages from '../data/sidenav.json';
@@ -24,8 +25,10 @@ const ApiReferenceTemplate = ({ data }) => {
     methods = [],
     usage = '',
     typeDefs = [],
+    constants = []
   } = useApiDoc(api) ?? {};
 
+  console.log(constants)
   return (
     <Layout>
       <SEO title={title} description={description} />
@@ -67,6 +70,18 @@ const ApiReferenceTemplate = ({ data }) => {
               ))}
             </section>
           )}
+
+          {constants.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2>Constants</h2>
+              {constants.map((constant, i) => {
+                return <ConstantReference key={i} constant={constant} />
+              })
+
+              }
+            </section>
+          )}
+
         </main>
       </Container>
     </Layout>