feat: page speed fetch request

Update analyze button so it makes the the page speed fetch request to
the testing URL. Updates async handling of the button and includes
both console and a UI facing error message.

Author: jawinn

src/core/PageSpeedService.js

@@ -8,15 +8,35 @@
  * 
  * @param {string} urlToMeasure - URL to measure the performance of.
  * @param {bool} logDebug - Whether to log results of request to the console for debugging.
- * @returns {JSON} @see https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
+ * @returns {Promise<JSON>|Promise<null>} @see https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
  */
 export const makePageSpeedAPIRequest = async (urlToMeasure, logDebug = false) => {
     // Proxy URL using serverless function that will return data.
-    const proxyRequestUrl = ``;
+    // TODO: Replace testing environment URL with actual URL.
+    const proxyRequestUrl = `https://deploy-preview-2--carbon-calculator-proxy.netlify.app/.netlify/functions/page-speed?url=${encodeURIComponent(urlToMeasure)}`;
 
+    // Debug: log intro to console.
     if (logDebug) {
         console.log(`~~~~~~ Google PageSpeed Results for: "${urlToMeasure}" ~~~~~~`);
         console.log(`Making request to "${proxyRequestUrl}" ...`);
     }
-};
 
+    // Make request.
+    try {
+        const response = await fetch(proxyRequestUrl);
+        if (!response.ok) {
+            throw new Error(`Fetch error encountered. Response status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        // Debug: log results to console.
+        if (logDebug) {
+            console.log(`Results JSON response:`, result);
+        }
+        return result;
+    } catch (error) {
+        console.error("Error with Page Speed API request:", error.message);
+        return null;
+    }
+};

src/panels/welcome/welcome.html

@@ -38,6 +38,7 @@ <h2 class="cv-welcome__title">Welcome to Carbon Visualizer</h2>
         <button class="cv-btn cv-btn--primary" id="analyze-page-btn">
           Analyze This Page
         </button>
+         <p class="message message--negative" id="analyze-page-error"></p>
       </div>
     </main>
   </div>

src/panels/welcome/welcome.js

@@ -11,25 +11,35 @@ export function initializePanel(panelType, data) {
 
   // Get analyze button from within the container
   const analyzeBtn = container.querySelector('#analyze-page-btn');
+  const analyzeErrorMessage = container.querySelector('#analyze-page-error');
 
   // Check if button exists before adding event listener
   if (!analyzeBtn) {
     return;
   }
 
   // Event listener for analyze button
-  analyzeBtn.addEventListener('click', () => {
-    // For now, just show a simple message
+  analyzeBtn.addEventListener('click', async () => {
+    // For now, just show a simple message within the button.
     analyzeBtn.disabled = true;
-    analyzeBtn.textContent = 'Test: logging to console...';
+    analyzeBtn.textContent = 'Test: Making request and logging to console...';
+    if (analyzeErrorMessage) {
+      analyzeErrorMessage.textContent = '';
+    }
 
     // Make API request.
     const currentPageURL = window.location.toString();
-    const pageSpeedResults = makePageSpeedAPIRequest(currentPageURL, true);
-    
-    setTimeout(() => {
-      analyzeBtn.disabled = false;
-      analyzeBtn.textContent = 'Analyze This Page';
-    }, 2000);
+    const pageSpeedResults = await makePageSpeedAPIRequest(currentPageURL, true);
+
+    // Display error message in UI if there was an error or nothing was returned.
+    if (!pageSpeedResults || Object.keys(pageSpeedResults).length === 0) {
+      if (analyzeErrorMessage) {
+        analyzeErrorMessage.textContent = 'Sorry! An error occurred when making the API request that tests the page. Please try again a little later. If this continues to happen, please let us know!';
+      }
+    }
+  
+    // Reset button back to usable state.
+    analyzeBtn.textContent = 'Analyze This Page';
+    analyzeBtn.disabled = false;
   });
 }