From 52bd23b425019a2b4e314505a05dceea54e34c7a Mon Sep 17 00:00:00 2001 From: Mickey Ryan Date: Tue, 17 May 2022 14:44:18 -0400 Subject: [PATCH 1/2] NR-2231 Fetch files from localhost --- src/hooks/useLocalhostQuickstart.js | 39 +++++++++++++++++ src/pages/preview.jsx | 66 +++++------------------------ src/utils/preview/fetchHelpers.js | 39 +++++++++++++++++ 3 files changed, 88 insertions(+), 56 deletions(-) create mode 100644 src/hooks/useLocalhostQuickstart.js diff --git a/src/hooks/useLocalhostQuickstart.js b/src/hooks/useLocalhostQuickstart.js new file mode 100644 index 00000000..3a9640b9 --- /dev/null +++ b/src/hooks/useLocalhostQuickstart.js @@ -0,0 +1,39 @@ +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; + } + + const quickstart = await parseQuickstartFiles(rawFileContent); + + setQuickstart(quickstart); + }; + + fetchFiles(); + }, []); + + return quickstart; +}; + +export default useLocalhostQuickstart; \ No newline at end of file diff --git a/src/pages/preview.jsx b/src/pages/preview.jsx index 101e3a14..2e6ffb8e 100644 --- a/src/pages/preview.jsx +++ b/src/pages/preview.jsx @@ -1,65 +1,19 @@ import React, { useEffect, useState } 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 oh hai; }; diff --git a/src/utils/preview/fetchHelpers.js b/src/utils/preview/fetchHelpers.js index 2268d165..a113980d 100644 --- a/src/utils/preview/fetchHelpers.js +++ b/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} - 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} 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} - 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 **/ From 1f4a30af659b66afa295460e9093679bb5850d4f Mon Sep 17 00:00:00 2001 From: Mickey Ryan Date: Tue, 17 May 2022 14:58:39 -0400 Subject: [PATCH 2/2] Comment parsing --- src/hooks/useLocalhostQuickstart.js | 12 +++++++----- src/pages/preview.jsx | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/hooks/useLocalhostQuickstart.js b/src/hooks/useLocalhostQuickstart.js index 3a9640b9..47ad4903 100644 --- a/src/hooks/useLocalhostQuickstart.js +++ b/src/hooks/useLocalhostQuickstart.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { getQuickstartFilesFromLocal } from '../utils/preview/fetchHelpers'; -import { parseQuickstartFiles } from '../utils/preview/parseHelpers'; +//import { parseQuickstartFiles } from '../utils/preview/parseHelpers'; import { navigate } from 'gatsby'; const useLocalhostQuickstart = (location) => { @@ -24,10 +24,12 @@ const useLocalhostQuickstart = (location) => { navigate('/'); return; } - - const quickstart = await parseQuickstartFiles(rawFileContent); - - setQuickstart(quickstart); + /** + * TODO: Uncomment these lines and delete setQuickstart(rawFileContent) once parsing is complete + */ + //const quickstart = await parseQuickstartFiles(rawFileContent); + //setQuickstart(quickstart); + setQuickstart(rawFileContent); }; fetchFiles(); diff --git a/src/pages/preview.jsx b/src/pages/preview.jsx index 2e6ffb8e..b25d6001 100644 --- a/src/pages/preview.jsx +++ b/src/pages/preview.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import useLocalhostQuickstart from '../hooks/useLocalhostQuickstart'; @@ -10,7 +10,7 @@ const PreviewPage = ({ location }) => { if (urlParams.get('local')) { contentFiles = useLocalhostQuickstart(location); } else { - contentFiles = usePullRequestQuickstart(location); + //contentFiles = usePullRequestQuickstart(location); } console.log('Parsed quickstart content:', contentFiles);