From b0b2fa8253ea60f8c2f6eded6680697971722ec4 Mon Sep 17 00:00:00 2001
From: "Mikal S." <7761729+revam@users.noreply.github.com>
Date: Mon, 21 Oct 2024 05:48:08 +0200
Subject: [PATCH] fix: fix image key and selected image (#1116)

Made sure the image key is unique across images, since only using the id is not unique enough in case the id overlaps between different providers and/or types. And exposed that the selected image can be null, instead of using a fake image type with no actual properties on it and checking if it's the fake type. `null` exists for a reason so might be a good idea to use it for it's intended use case.
---
 src/pages/collection/series/SeriesImages.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/collection/series/SeriesImages.tsx b/src/pages/collection/series/SeriesImages.tsx
index 74f54325..aa2be133 100644
--- a/src/pages/collection/series/SeriesImages.tsx
+++ b/src/pages/collection/series/SeriesImages.tsx
@@ -36,8 +36,6 @@ const sizeMap = {
   Logos: { image: 'h-[clamp(15rem,_16vw,_21rem)]', grid: 'grid-cols-4' },
 };
 
-const nullImage = {} as ImageType;
-
 const SeriesImages = () => {
   const { imageType, seriesId } = useParams();
 
@@ -47,7 +45,7 @@ const SeriesImages = () => {
     if (!imageType) return 'Posters';
     return capitalize(imageType) as ImageTabType;
   }, [imageType]);
-  const [selectedImage, setSelectedImage] = useState<ImageType>(nullImage);
+  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null);
   const images = useSeriesImagesQuery(toNumber(seriesId!), !!seriesId).data;
   const { mutate: changeImage } = useChangeSeriesImageMutation();
 
@@ -56,20 +54,21 @@ const SeriesImages = () => {
   const filepath = splitPath[0] ? splitPath.join('/') : '-';
 
   const handleSelectionChange = (item: ImageType) => {
-    setSelectedImage(old => ((old === item) ? nullImage : item));
+    setSelectedImage(old => ((old === item) ? null : item));
   };
 
   const handleSetPreferredImage = useEventCallback(() => {
+    if (!selectedImage) return;
     changeImage({ seriesId: toNumber(seriesId), image: selectedImage }, {
       onSuccess: () => {
-        setSelectedImage(nullImage);
+        setSelectedImage(null);
         toast.success(`Series ${selectedImage.Type} image has been changed.`);
       },
     });
   });
 
   const handleTabChange = useEventCallback((newType: ImageTabType) => {
-    setSelectedImage(nullImage);
+    setSelectedImage(null);
     navigate(`../images/${newType.toLowerCase()}`);
   });
 
@@ -97,7 +96,7 @@ const SeriesImages = () => {
           <Button
             buttonType="primary"
             buttonSize="normal"
-            disabled={selectedImage === nullImage || selectedImage.Preferred}
+            disabled={!selectedImage || selectedImage.Preferred}
             onClick={handleSetPreferredImage}
           >
             {`Set As Preferred ${tabType.slice(0, -1)}`}
@@ -124,7 +123,7 @@ const SeriesImages = () => {
           {images?.[tabType].map(item => (
             <div
               onClick={() => handleSelectionChange(item)}
-              key={item?.ID}
+              key={`${item.Source}-${item.Type}-${item.ID}`}
               className="group flex cursor-pointer items-center justify-between"
             >
               <BackgroundImagePlaceholderDiv