feat: add unique keys for avatars, icons and banners (#109)

feat: add unique keys for avatars, icons and banners in ImageFromHash components
discordplace · Oct 25, 2024 · 9caca83 · 9caca83
1 parent 762457f
commit 9caca83
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}