feat: Add API docs hook and render list of modules for POC API page

amiller-gh · amiller-gh · commit 6f7aa177ca4f · 2019-09-07T13:27:43.000-07:00
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
@@ -1,15 +1,2 @@
-import { useState, useEffect } from 'react';
-
-export function useReleaseHistory() {
-  const releasesURL = 'https://nodejs.org/dist/index.json';
-  const [releaseHistory, setReleaseHistory] = useState([]);
-  useEffect(() => {
-    const fetchData = async () => {
-      const result = await fetch(releasesURL).then(data => data.json());
-      setReleaseHistory(result);
-    };
-    fetchData();
-  }, []);
-
-  return releaseHistory;
-}
+export { useApiData } from './useApiDocs';
+export { useReleaseHistory } from './useReleaseHistory';
diff --git a/src/hooks/useApiDocs.tsx b/src/hooks/useApiDocs.tsx
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+// TODO: Flesh out API types.
+/* tslint:disable */
+interface APIResponse {
+  classes: any[];
+  globals: any[];
+  methods: any[];
+  miscs: any[];
+  modules: any[];
+}
+/* tslint:enable */
+
+export function useApiData(version: string): APIResponse {
+  const [apiData, setApiData] = useState<APIResponse>({
+    classes: [],
+    globals: [],
+    methods: [],
+    miscs: [],
+    modules: [],
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await window.fetch(
+        `https://nodejs.org/dist/${version}/docs/api/all.json`
+      );
+      setApiData((await res.json()) as APIResponse);
+    };
+    fetchData();
+  }, []);
+
+  return apiData;
+}
diff --git a/src/hooks/useReleaseHistory.tsx b/src/hooks/useReleaseHistory.tsx
@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+
+export function useReleaseHistory() {
+  const releasesURL = 'https://nodejs.org/dist/index.json';
+  const [releaseHistory, setReleaseHistory] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await fetch(releasesURL).then(data => data.json());
+      setReleaseHistory(result);
+    };
+    fetchData();
+  }, []);
+
+  return releaseHistory;
+}
diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
@@ -1,15 +1,24 @@
 import React from 'react';
+import { useApiData } from '../hooks';
 import Hero from '../components/hero';
 import Layout from '../components/layout';
 
 export default () => {
   const title = 'API Docs';
   const description = 'Come learn yourself something.';
+  const apiData = useApiData('v12.9.1');
 
   return (
     <Layout title={title} description={description}>
       <Hero title={title} />
       <article style={{ width: '100%' }} className="article-reader">
+        <nav>
+          <ul>
+            {apiData.modules.map(module => (
+              <li key={module.name}>{module.displayName}</li>
+            ))}
+          </ul>
+        </nav>
         <p>Welcome to the API Page!</p>
       </article>
     </Layout>
