Merge pull request #193 from newrelic/feature/NR-2231-2

NR-2231 Fetch files from localhost

src/hooks/useLocalhostQuickstart.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+import { getQuickstartFilesFromLocal } from '../utils/preview/fetchHelpers';
+//import { parseQuickstartFiles } from '../utils/preview/parseHelpers';
+import { navigate } from 'gatsby';
+
+const useLocalhostQuickstart = (location) => {
+  const [quickstart, setQuickstart] = useState([]);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(location.search);
+    const port = urlParams.get('port') || 3000;
+
+    /*
+     * Async function to get quickstart files from local
+     * and set to state variable
+     **/
+    const fetchFiles = async () => {
+      let rawFileContent;
+
+      try {
+        rawFileContent = await getQuickstartFilesFromLocal(port);
+      } catch (err) {
+        navigate('/');
+        return;
+      }
+      /**
+       * TODO: Uncomment these lines and delete setQuickstart(rawFileContent) once parsing is complete
+       */
+      //const quickstart = await parseQuickstartFiles(rawFileContent);
+      //setQuickstart(quickstart);
+      setQuickstart(rawFileContent);
+    };
+
+    fetchFiles();
+  }, []);
+
+  return quickstart;
+};
+
+export default useLocalhostQuickstart;

src/pages/preview.jsx

@@ -1,65 +1,19 @@
-import React, { useEffect, useState } from 'react';
-
+import React from 'react';
 import PropTypes from 'prop-types';
-import { getQuickstartFilesFromPR } from '../utils/preview/fetchHelpers';
-import { navigate } from 'gatsby';
-
-const PreviewPage = ({ location }) => {
-  const [contentFiles, setContentFiles] = useState([]);
-
-  // TODO: Make this into a custom hook to reduce useEffect usage
-  useEffect(() => {
-    // grab query parameters to determine if it is a local preview or
-    // PR preview
-    const urlParams = new URLSearchParams(location.search);
-    const prNumber = urlParams.get('pr');
-    const quickstartPath = urlParams.get('quickstart');
 
-    // check to make sure query parameters are set
-    // otherwise, return home
-    if (!prNumber || !quickstartPath) {
-      console.log('Error: Missing query parameters');
-      if (!prNumber) {
-        console.log('prNumber');
-      }
-      if (!quickstartPath) {
-        console.log('quickstartPath');
-      }
+import useLocalhostQuickstart from '../hooks/useLocalhostQuickstart';
 
-      navigate('/');
-      return;
-    }
-
-    /*
-     * Async function to walk the file system in Github
-     * and set the content to a stateful variable.
-     **/
-    const fetchRawFiles = async () => {
-      try {
-        const fileContent = await getQuickstartFilesFromPR(
-          prNumber,
-          quickstartPath
-        );
-        setContentFiles(fileContent);
-      } catch (error) {
-        console.log('Error:', error.message);
-        navigate('/');
-        return;
-      }
-    };
-    fetchRawFiles();
-  }, []);
-
-  // To console log the results as part of AC
-  // TODO: Remove/refactor this in parsing implementation
-  useEffect(() => {
-    if (!contentFiles) {
-      return;
-    }
+const PreviewPage = ({ location }) => {
+  const urlParams = new URLSearchParams(location.search);
+  let contentFiles;
 
-    console.log(contentFiles);
-  }, [contentFiles]);
+  if (urlParams.get('local')) {
+    contentFiles = useLocalhostQuickstart(location);
+  } else {
+    //contentFiles = usePullRequestQuickstart(location);
+  }
 
+  console.log('Parsed quickstart content:', contentFiles);
   return <span>oh hai</span>;
 };
 

src/utils/preview/fetchHelpers.js

@@ -90,6 +90,45 @@ export const getRawContent = (fileAggregator) => {
   return Promise.all(fileAggregator.map(determineContent));
 };
 
+/**
+ * Async function to get list of files from localhost
+ * @param {number} port - Optional port env variable from the quickstart preview server. Defaults to 3000 
+ * @returns {Array<string>} - List of file names to be used to fetch the files from the local server
+ */
+ export const getFileListFromLocal = async (port) => {
+  const response = await fetch(`http://localhost:${port}`);
+
+  if (response.status !== 200 || !response.ok) {
+    throw new Error(
+      `Response from localhost came back with status ${response.status}\n`
+    );
+  };
+
+  const fileList = await response.json();
+
+  return fileList;
+};
+
+/**
+ * Async function to get list of files from localhost
+ * @param {Array<string>} fileList - List of file paths to fetch files from localhost
+ * @param {number} port - Optional port env variable from the quickstart preview server. Defaults to 3000 
+ * @returns {Array<object>} - Array of objects containing metadata and file contents
+ */
+export const getQuickstartFilesFromLocal = async (port) => {
+  const fileList = await getFileListFromLocal(port);
+
+  const data = fileList.map(path => {
+    return {
+      path,
+      name: path.split('/').pop(),
+      download_url: `http://localhost:${port}/${path}`
+    }
+  });
+
+  return getRawContent(data);
+};
+
 /**
  * Async function handles fetching changed files in pull request from Github
  **/