Merge pull request #2548 from IntersectMBO/fix/2546-fetching-dreps-images-is-throwing-different-errors-in-console

fix(#2546): handle errors on fetching drep images

Author: MSzalowski

CHANGELOG.md

@@ -17,6 +17,7 @@ changes.
 ### Fixed
 
 - Move matomo initalization out of the react code
+- Fix some non-ipfs related errors while fetching the DRep images [Issue 2546](https://github.com/IntersectMBO/govtool/issues/2546)
 
 ### Changed
 

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -14,7 +14,7 @@ import {
 } from "@hooks";
 import { DataActionsBar, EmptyStateDrepDirectory } from "@molecules";
 import { AutomatedVotingOptions, DRepCard } from "@organisms";
-import { correctAdaFormat, isSameDRep } from "@utils";
+import { correctAdaFormat, isSameDRep, uniqBy } from "@utils";
 import { DRepData, DRepListSort, DRepStatus } from "@models";
 import {
   AutomatedVotingOptionCurrentDelegation,
@@ -106,8 +106,9 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
 
   const ada = correctAdaFormat(votingPower);
 
-  const listedDRepsWithoutYourself = dRepList?.filter(
-    (dRep) => !dRep.doNotList && !isSameDRep(dRep, myDRepId),
+  const listedDRepsWithoutYourself = uniqBy(
+    dRepList?.filter((dRep) => !dRep.doNotList && !isSameDRep(dRep, myDRepId)),
+    "view",
   );
   const dRepListToDisplay =
     yourselfDRep && showYourselfDRep
@@ -212,7 +213,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
         >
           {dRepList?.length === 0 && <EmptyStateDrepDirectory />}
           {dRepListToDisplay?.map((dRep) => (
-            <Box key={dRep.drepId} component="li" sx={{ listStyle: "none" }}>
+            <Box key={dRep.view} component="li" sx={{ listStyle: "none" }}>
               <DRepCard
                 dRep={dRep}
                 isConnected={!!isConnected}

govtool/frontend/src/utils/index.ts

@@ -34,3 +34,4 @@ export * from "./removeMarkdown";
 export * from "./setProtocolParameterUpdate";
 export * from "./testIdFromLabel";
 export * from "./wait";
+export * from "./uniqBy";

govtool/frontend/src/utils/mapDtoToDrep.ts

@@ -7,6 +7,10 @@ import {
 import { postValidate } from "@/services";
 import { fixViewForScriptBasedDRep } from "./dRep";
 
+const imageFetchDefaultOptions: RequestInit = {
+  mode: "no-cors",
+};
+
 export const mapDtoToDrep = async (dto: DrepDataDTO): Promise<DRepData> => {
   const emptyMetadata = {
     paymentAddress: null,
@@ -34,9 +38,13 @@ export const mapDtoToDrep = async (dto: DrepDataDTO): Promise<DRepData> => {
         : dto.imageUrl,
       isIPFSImage
         ? {
+            ...imageFetchDefaultOptions,
             headers: { project_id: import.meta.env.VITE_IPFS_PROJECT_ID },
           }
-        : {},
+        : // set request mode no-cors
+          {
+            ...imageFetchDefaultOptions,
+          },
     )
       .then(async (res) => {
         const blob = await res.blob();
@@ -46,8 +54,10 @@ export const mapDtoToDrep = async (dto: DrepDataDTO): Promise<DRepData> => {
           base64Image = reader.result;
         };
       })
-      .catch((e) => {
-        console.error("Fetching the DRep image failed, reason: ", e);
+      .catch((error) => {
+        if (import.meta.env.VITE_IS_DEV) {
+          console.error("Error fetching image", error);
+        }
       });
   }
 

govtool/frontend/src/utils/tests/uniqBy.test.ts

@@ -0,0 +1,26 @@
+import { uniqBy } from "../uniqBy";
+
+describe("uniqBy", () => {
+  it("should return an array of unique elements based on the specified key", () => {
+    const arr = [
+      { id: 1, name: "John" },
+      { id: 2, name: "Jane" },
+      { id: 3, name: "John" },
+      { id: 4, name: "Jane" },
+    ];
+
+    const result = uniqBy(arr, "name");
+    expect(result).toEqual([
+      { id: 3, name: "John" },
+      { id: 4, name: "Jane" },
+    ]);
+  });
+
+  it("should handle empty input array", () => {
+    const arr: never[] = [];
+
+    const result = uniqBy(arr, "name");
+
+    expect(result).toEqual([]);
+  });
+});

govtool/frontend/src/utils/uniqBy.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns an array of unique elements from the input array based on the specified key.
+ * @param arr - The input array.
+ * @param key - The key to determine uniqueness.
+ * @returns An array of unique elements.
+ * @template T - The type of elements in the array.
+ */
+export const uniqBy = <T>(arr: T[], key: keyof T): T[] => {
+  const map = new Map<T[keyof T], T>();
+  arr.forEach((item) => {
+    map.set(item[key], item);
+  });
+  return Array.from(map.values());
+};