From 9caca8354b0571d345753838ed21f6b1e24deb9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=B6khan=20Bulut?= <skyhancloud@gmail.com>
Date: Fri, 25 Oct 2024 06:58:30 +0300
Subject: [PATCH] feat: add unique keys for avatars, icons and banners (#109)

feat: add unique keys for avatars, icons and banners in ImageFromHash components
---
 client/app/components/ImageFromHash/ServerBanner.jsx | 2 ++
 client/app/components/ImageFromHash/ServerIcon.jsx   | 2 ++
 client/app/components/ImageFromHash/UserAvatar.jsx   | 2 ++
 client/app/components/ImageFromHash/UserBanner.jsx   | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/client/app/components/ImageFromHash/ServerBanner.jsx b/client/app/components/ImageFromHash/ServerBanner.jsx
index cb17996d..2108671f 100644
--- a/client/app/components/ImageFromHash/ServerBanner.jsx
+++ b/client/app/components/ImageFromHash/ServerBanner.jsx
@@ -21,6 +21,7 @@ export default function ServerBanner({ id, hash, format, size, className, motion
 
   if (!hash) return (
     <MotionImage
+      key={`server-icon-${id}-replaced-with-default-avatar`}
       src={defaultAvatarURL}
       alt={`Image ${hash}`}
       className={className}
@@ -31,6 +32,7 @@ export default function ServerBanner({ id, hash, format, size, className, motion
 
   return (
     <MotionImage
+      key={`server-banner-${id}-${hash}`}
       src={`https://cdn.discordapp.com/banners/${id}/${hash}.${hash.startsWith('a_') ? 'gif' : 'png'}?size=${options.size}&format=${options.format}`}
       alt={`Image ${hash}`}
       className={className}
diff --git a/client/app/components/ImageFromHash/ServerIcon.jsx b/client/app/components/ImageFromHash/ServerIcon.jsx
index 56ee9e66..6754cfae 100644
--- a/client/app/components/ImageFromHash/ServerIcon.jsx
+++ b/client/app/components/ImageFromHash/ServerIcon.jsx
@@ -21,6 +21,7 @@ export default function ServerIcon({ id, hash, format, size, className, motionOp
 
   if (!hash) return (
     <MotionImage
+      key={`server-icon-${id}-replaced-with-default-avatar`}
       src={defaultAvatarURL}
       alt={`Image ${hash}`}
       className={className}
@@ -31,6 +32,7 @@ export default function ServerIcon({ id, hash, format, size, className, motionOp
 
   return (
     <MotionImage
+      key={`server-icon-${id}-${hash}`}
       src={`https://cdn.discordapp.com/icons/${id}/${hash}.${hash.startsWith('a_') ? 'gif' : 'png'}?size=${options.size}&format=${options.format}`}
       alt={`Image ${hash}`}
       className={className}
diff --git a/client/app/components/ImageFromHash/UserAvatar.jsx b/client/app/components/ImageFromHash/UserAvatar.jsx
index ee31b79f..f95cb7ab 100644
--- a/client/app/components/ImageFromHash/UserAvatar.jsx
+++ b/client/app/components/ImageFromHash/UserAvatar.jsx
@@ -83,6 +83,7 @@ export default function UserAvatar({ id, hash, format, size, className, motionOp
 
   if (!hash) return (
     <MotionImage
+      key={`user-avatar-${id}-replaced-with-default-avatar`}
       src={defaultAvatarURL}
       alt={`Image ${hash}`}
       className={className}
@@ -93,6 +94,7 @@ export default function UserAvatar({ id, hash, format, size, className, motionOp
 
   return (
     <MotionImage
+      key={`user-avatar-${id}-${hash}`}
       src={currentSource}
       alt={`Image ${hash}`}
       className={className}
diff --git a/client/app/components/ImageFromHash/UserBanner.jsx b/client/app/components/ImageFromHash/UserBanner.jsx
index 6706b1e9..9aaaf987 100644
--- a/client/app/components/ImageFromHash/UserBanner.jsx
+++ b/client/app/components/ImageFromHash/UserBanner.jsx
@@ -83,6 +83,7 @@ export default function UserBanner({ id, hash, format, size, className, motionOp
 
   if (!hash) return (
     <MotionImage
+      key={`user-banner-${id}-replaced-with-default-banner`}
       src={defaultBannerURL}
       alt={`Image ${hash}`}
       className={className}
@@ -93,6 +94,7 @@ export default function UserBanner({ id, hash, format, size, className, motionOp
 
   return (
     <MotionImage
+      key={`user-banner-${id}-${hash}`}
       src={currentSource}
       alt={`Image ${hash}`}
       className={className}