From b316ad41fb5dc356dbfc4bc9442836364f284d45 Mon Sep 17 00:00:00 2001
From: Karl Cardenas <29551334+karl-cardenas-coding@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:10:49 -0700
Subject: [PATCH] chore: iconmapper error fix (#3669)

* chore: iconmapper error fix

* chore: fix import with idealImage

* chore: fix

* chore: added comments
---
 src/components/Technologies/PackCardIcon.tsx | 52 +++++++++-----------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/Technologies/PackCardIcon.tsx b/src/components/Technologies/PackCardIcon.tsx
index 3cf89e88db..ab84d18a1e 100644
--- a/src/components/Technologies/PackCardIcon.tsx
+++ b/src/components/Technologies/PackCardIcon.tsx
@@ -1,8 +1,8 @@
+/* eslint-disable */
 import React, { useState, useEffect, ReactElement } from "react";
 import styles from "./PackCardIcon.module.scss";
 import IconMapper from "@site/src/components/IconMapper/IconMapper";
 import Image from "@theme/IdealImage";
-
 interface PackCardIconProps {
   appType?: string;
   logoUrl?: string;
@@ -10,40 +10,34 @@ interface PackCardIconProps {
   className?: any;
 }
 
-type ImageModule = {
-  default: string;
-};
-
 export default function PackCardIcon({ appType, logoUrl, type, className }: PackCardIconProps) {
   const [icon, setIcon] = useState<ReactElement | null>(null);
+  // Declare a state variable 'icon' with an initial value of null,
+  // which will store the React element to be rendered as the icon.
 
   useEffect(() => {
-    const loadIcon = async () => {
-      if (logoUrl && appType === "app") {
-        setIcon(<img src={logoUrl} />);
-        return;
-      }
-
-      if (logoUrl) {
-        try {
-          const module: ImageModule = await import(`/static/img/packs/${logoUrl}`);
-          setIcon(<Image img={module.default} />);
-          return;
-        } catch (e) {
-          console.error(e);
+    if (logoUrl) {
+      // Check if 'logoUrl' is provided.
+      try {
+        if (appType === "app") {
+          // If 'appType' is "app", set the icon to an img element with the 'logoUrl' as the source.
+          setIcon(<img src={logoUrl} />);
+        } else {
+          // Otherwise, set the icon to an Image component, requiring the image from a specific path.
+          setIcon(<Image img={require(`/static/img/packs/${logoUrl}`)} />);
         }
+      } catch (e) {
+        // If an error occurs (e.g., the image cannot be found), fall back to the IconMapper component.
+        type ? setIcon(<IconMapper type={type} />) : setIcon(null);
       }
-
-      if (type) {
-        setIcon(<IconMapper type={type} />);
-      } else {
-        setIcon(null);
-      }
-    };
-
-    // Explicitly mark the promise as intentionally unhandled
-    void loadIcon();
-  }, [logoUrl, appType, type]);
+    } else {
+      // If no 'logoUrl' is provided, fall back to rendering an icon based on the 'type' prop.
+      type ? setIcon(<IconMapper type={type} />) : setIcon(null);
+    }
+  }, [logoUrl]);
+  // The useEffect hook is triggered whenever 'logoUrl' changes.
 
   return <div className={`${className} ${styles.imageWrapper}`}>{icon}</div>;
+  // Return a div containing the icon, with a combination of the provided 'className' and
+  // a CSS class from the imported styles.
 }