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(nullImage); + const [selectedImage, setSelectedImage] = useState(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 = () => {