Move logic to hook and update based on PR suggestions

client/src/app/components/target-card/hooks/useFetchImageDataUrl.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import DefaultImage from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
+import { Target } from "@app/api/models";
+import { FILES } from "@app/api/rest";
+
+const useFetchImageDataUrl = (target: Target) => {
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const imagePath = target?.image?.id
+      ? `${FILES}/${target?.image.id}`
+      : DefaultImage;
+
+    (async () => {
+      try {
+        const response = await axios.get(imagePath, {
+          headers: {
+            Accept: "application/octet-stream",
+          },
+          responseType: "arraybuffer",
+        });
+        const contentType = response.headers["content-type"];
+
+        let imageData;
+
+        if (contentType === "image/svg+xml") {
+          const text = new TextDecoder().decode(response.data);
+          imageData = `data:${contentType},${encodeURIComponent(text)}`;
+        } else {
+          const base64 = btoa(
+            new Uint8Array(response.data).reduce(
+              (data, byte) => data + String.fromCharCode(byte),
+              ""
+            )
+          );
+          imageData = `data:${contentType};base64,${base64}`;
+        }
+
+        setImageDataUrl(imageData);
+      } catch (error) {
+        console.error("There was an issue fetching the image:", error);
+      }
+    })();
+  }, [target]);
+
+  return imageDataUrl;
+};
+
+export default useFetchImageDataUrl;

client/src/app/components/TargetCard.tsx → client/src/app/components/target-card/target-card.tsx

@@ -1,3 +1,4 @@
+import "./target-card.css";
 import * as React from "react";
 import {
   EmptyState,
@@ -28,11 +29,10 @@ import { GripVerticalIcon } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { useTranslation } from "react-i18next";
 
-import { KebabDropdown } from "./KebabDropdown";
-import DefaultRulesetIcon from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
+import { KebabDropdown } from "../KebabDropdown";
+import DefaultImage from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
 import { Target, TargetLabel } from "@app/api/models";
-import "./TargetCard.css";
-import axios from "axios";
+import useFetchImageDataUrl from "./hooks/useFetchImageDataUrl";
 
 export interface TargetCardProps {
   item: Target;
@@ -68,8 +68,7 @@ export const TargetCard: React.FC<TargetCardProps> = ({
 }) => {
   const { t } = useTranslation();
   const [isCardSelected, setCardSelected] = React.useState(cardSelected);
-
-  const [imageDataUrl, setImageDataUrl] = React.useState<string | null>(null);
+  const imageDataUrl = useFetchImageDataUrl(target);
 
   const prevSelectedLabel =
     formLabels?.find((formLabel) => {
@@ -108,24 +107,6 @@ export const TargetCard: React.FC<TargetCardProps> = ({
     }
   };
 
-  const fetchImageAndSetDataUrl = async (imagePath: string) => {
-    try {
-      const imageDataResponse = await axios.get(imagePath, {
-        headers: {
-          Accept: "application/octet-stream",
-        },
-      });
-      const encodedSvg = encodeURIComponent(imageDataResponse.data);
-      setImageDataUrl(`data:image/svg+xml,${encodedSvg}`);
-    } catch (error) {
-      console.error("There was an issue fetching the image:", error);
-    }
-  };
-  const imagePath = target?.image?.id
-    ? `/hub/files/${target?.image.id}`
-    : DefaultRulesetIcon;
-  fetchImageAndSetDataUrl(imagePath);
-
   return (
     <Card
       onClick={handleCardClick}
@@ -182,9 +163,12 @@ export const TargetCard: React.FC<TargetCardProps> = ({
           <EmptyStateIcon
             icon={() => (
               <img
-                src={imageDataUrl || DefaultRulesetIcon}
+                src={imageDataUrl || DefaultImage}
                 alt="Card logo"
                 style={{ height: 80, pointerEvents: "none" }}
+                onError={(e) => {
+                  e.currentTarget.src = DefaultImage;
+                }}
               />
             )}
           />

client/src/app/pages/applications/analysis-wizard/set-targets.tsx

@@ -10,7 +10,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
 
-import { TargetCard } from "@app/components/TargetCard";
+import { TargetCard } from "@app/components/target-card/target-card";
 import { AnalysisWizardFormValues } from "./schema";
 import { useSetting } from "@app/queries/settings";
 import { useFetchTargets } from "@app/queries/targets";

client/src/app/pages/migration-targets/components/dnd/item.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { TargetCard } from "@app/components/TargetCard";
+import { TargetCard } from "@app/components/target-card/target-card";
 import { useFetchTargets } from "@app/queries/targets";
 
 interface ItemProps {