diff --git a/CHANGELOG.md b/CHANGELOG.md index b34236d5d..ad1eadbed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ changes. ### Fixed -- +- Fix some non-ipfs related errors while fetching the DRep images [Issue 2546](https://github.com/IntersectMBO/govtool/issues/2546) ### Changed diff --git a/govtool/frontend/src/pages/DRepDirectoryContent.tsx b/govtool/frontend/src/pages/DRepDirectoryContent.tsx index bef54617c..441f3fbc2 100644 --- a/govtool/frontend/src/pages/DRepDirectoryContent.tsx +++ b/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 = ({ 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 = ({ > {dRepList?.length === 0 && } {dRepListToDisplay?.map((dRep) => ( - + => { const emptyMetadata = { paymentAddress: null, @@ -34,9 +38,13 @@ export const mapDtoToDrep = async (dto: DrepDataDTO): Promise => { : 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 => { 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); + } }); } diff --git a/govtool/frontend/src/utils/tests/uniqBy.test.ts b/govtool/frontend/src/utils/tests/uniqBy.test.ts new file mode 100644 index 000000000..804f83f21 --- /dev/null +++ b/govtool/frontend/src/utils/tests/uniqBy.test.ts @@ -0,0 +1,40 @@ +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: 1, name: "John" }, + { id: 2, name: "Jane" }, + ]); + }); + + it("should handle empty input array", () => { + const arr: never[] = []; + + const result = uniqBy(arr, "name"); + + expect(result).toEqual([]); + }); + + it("should handle empty key", () => { + const arr = [ + { id: 1, name: "John" }, + { id: 2, name: "Jane" }, + ]; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + const result = uniqBy(arr, ""); + + expect(result).toEqual(arr); + }); +}); diff --git a/govtool/frontend/src/utils/uniqBy.ts b/govtool/frontend/src/utils/uniqBy.ts new file mode 100644 index 000000000..34a84802a --- /dev/null +++ b/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 = (arr: T[], key: keyof T): T[] => { + const map = new Map(); + arr.forEach((item) => { + map.set(item[key], item); + }); + return Array.from(map.values()); +};