create named function that displays in profile frame

react/src/components/Products.js

@@ -10,6 +10,62 @@ import { useState, useEffect } from 'react';
 function Products({ frontendSlowdown, backend }) {
   const [products, setProducts] = useState([]);
 
+  function determineProductsEndpoint() {
+    return frontendSlowdown ? '/products-join' : '/products';
+  }
+
+  function fetchUncompressedAsset() {
+    let uc_small_script = document.createElement('script');
+    uc_small_script.async = false;
+    uc_small_script.src =
+      backend +
+      '/compressed_assets/compressed_small_file.js' +
+      '?cacheBuster=' +
+      Math.random();
+    document.body.appendChild(uc_small_script);
+
+    // big uncompressed file
+    let c_big_script = document.createElement('script');
+    c_big_script.async = false;
+
+    c_big_script.src =
+      backend +
+      '/uncompressed_assets/uncompressed_big_file.js' +
+      '?cacheBuster=' +
+      Math.random();
+    document.body.appendChild(c_big_script);
+  }
+
+  // intentionally supposed to be slow
+  function renderProducts(data) {
+    try {
+      // Trigger a Sentry 'Performance Issue' in the case of
+      // a frontend slowdown
+      if (frontendSlowdown) {
+        // Must bust cache to have force transfer size
+        // small compressed file
+        fetchUncompressedAsset();
+
+        console.log('triggering slow render problem');
+        // When triggering a frontend-only slowdown, cause a slow render problem
+        setProducts(
+          Array(150) // 150 is arbitrary to make a slow enough render
+            .fill(data.slice(0, 4))
+            .flat()
+            .map((p, n) => {
+              p.id = n;
+              return p;
+            })
+        );
+      } else {
+        console.log('setting products quickly');
+        setProducts(data.slice(0, 4));
+      }
+    } catch (err) {
+      Sentry.captureException(new Error('app unable to load products: ' + err));
+    }
+  }
+
   useEffect(() => {
     // getProducts handles error responses differently, depending on the browser used
     function getProducts(frontendSlowdown) {
@@ -37,13 +93,9 @@ function Products({ frontendSlowdown, backend }) {
       // When triggering a frontend-only slowdown, use the products-join endpoint
       // because it returns product data with a fast backend response.
       // Otherwise use the /products endpoint, which provides a slow backend response.
-      const productsEndpoint = frontendSlowdown
-        ? '/products-join'
-        : '/products';
-      console.log(`productsEndpoint: ${productsEndpoint}`);
-      console.log(backend);
-      console.log(backend + productsEndpoint);
-      let result = fetch(backend + productsEndpoint, {
+      const productsEndpoint = determineProductsEndpoint();
+
+      fetch(backend + productsEndpoint, {
         method: 'GET',
         headers: {
           se,
@@ -53,8 +105,6 @@ function Products({ frontendSlowdown, backend }) {
         },
       })
         .then((result) => {
-          console.log('THE RESULTS::::::::::::');
-          console.log(result);
           if (!result.ok) {
             Sentry.configureScope(function (scope) {
               Sentry.setContext('err', {
@@ -67,66 +117,14 @@ function Products({ frontendSlowdown, backend }) {
             return result.json();
           }
         })
-        .then((data) => {
-          console.log('OKKKKK:::::');
-          console.log(data);
-          try {
-            // Trigger a Sentry 'Performance Issue' in the case of
-            // a frontend slowdown
-            if (frontendSlowdown) {
-              // Must bust cache to have force transfer size
-              // small compressed file
-              let uc_small_script = document.createElement('script');
-              uc_small_script.async = false;
-              uc_small_script.src =
-                backend +
-                '/compressed_assets/compressed_small_file.js' +
-                '?cacheBuster=' +
-                Math.random();
-              document.body.appendChild(uc_small_script);
-
-              // big uncompressed file
-              let c_big_script = document.createElement('script');
-              c_big_script.async = false;
-
-              c_big_script.src =
-                backend +
-                '/uncompressed_assets/uncompressed_big_file.js' +
-                '?cacheBuster=' +
-                Math.random();
-              document.body.appendChild(c_big_script);
-
-              console.log('triggering slow render problem');
-              // When triggering a frontend-only slowdown, cause a slow render problem
-              setProducts(
-                Array(200 / 4)
-                  .fill(data.slice(0, 4))
-                  .flat()
-                  .map((p, n) => {
-                    p.id = n;
-                    return p;
-                  })
-              );
-            } else {
-              console.log('setting products quickly');
-              setProducts(data.slice(0, 4));
-            }
-          } catch (err) {
-            Sentry.captureException(
-              new Error('app unable to load products: ' + err)
-            );
-          }
-        })
+        .then(renderProducts)
         .catch((err) => {
           return { ok: false, status: 500 };
         });
-      console.log('REAL RES::::::::');
-      console.log(result);
-      return result;
     }
 
     getProducts(frontendSlowdown);
-  }, [products, frontendSlowdown, backend]);
+  }, []);
 
   return products.length > 0 ? (
     <div>