From 3f3bf8114921b1e0ae6f43071dcd33568572151d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20H=C3=A4rtel?= <lukashaertel@gmail.com>
Date: Sun, 15 Sep 2024 16:40:10 +0200
Subject: [PATCH] fix: Image cache key (#179)

* Create source from image helper.
* Apply image source helper to all images.
* Fix one direct use of expo-image.
---
 src/components/announce/AnnouncementCard.tsx     |  5 +++--
 src/components/artistalley/ArtistAlleyStatus.tsx |  8 +++++++-
 src/components/dealers/DealerCard.tsx            |  3 ++-
 src/components/dealers/DealerContent.tsx         |  3 ++-
 src/components/events/EventCard.tsx              |  3 ++-
 src/components/generic/atoms/Banner.tsx          |  3 ++-
 src/components/generic/atoms/Image.common.ts     | 16 ++++++++++++++++
 src/components/generic/atoms/ImageFill.tsx       |  5 +++--
 src/components/maps/MapContent.tsx               |  3 ++-
 src/components/viewer/ViewerImageRecord.tsx      |  3 ++-
 10 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 src/components/generic/atoms/Image.common.ts

diff --git a/src/components/announce/AnnouncementCard.tsx b/src/components/announce/AnnouncementCard.tsx
index 1d171bc..bdaf64e 100644
--- a/src/components/announce/AnnouncementCard.tsx
+++ b/src/components/announce/AnnouncementCard.tsx
@@ -1,4 +1,3 @@
-import { ImageBackground } from "expo-image";
 import moment, { Moment } from "moment-timezone";
 import React, { FC } from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
@@ -8,6 +7,8 @@ import { useThemeBackground, useThemeName } from "../../hooks/themes/useThemeHoo
 import { AnnouncementDetails } from "../../store/eurofurence/types";
 import { appStyles } from "../AppStyles";
 import { Label } from "../generic/atoms/Label";
+import { ImageBackground } from "../generic/atoms/ImageBackground";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 import { colorForArea } from "./utils";
 
 export type AnnouncementDetailsInstance = {
@@ -45,7 +46,7 @@ export const AnnouncementCard: FC<AnnouncementCardProps> = ({ containerStyle, st
             onPress={() => onPress?.(announcement.details)}
             onLongPress={() => onLongPress?.(announcement.details)}
         >
-            <ImageBackground style={[styles.pre, stylePre]} source={announcement.details.Image?.Url ?? null}>
+            <ImageBackground style={[styles.pre, stylePre]} source={sourceFromImage(announcement.details.Image)}>
                 <View style={[styles.areaIndicator, styleAreaIndicator]} />
             </ImageBackground>
 
diff --git a/src/components/artistalley/ArtistAlleyStatus.tsx b/src/components/artistalley/ArtistAlleyStatus.tsx
index dabbe8d..9674cf0 100644
--- a/src/components/artistalley/ArtistAlleyStatus.tsx
+++ b/src/components/artistalley/ArtistAlleyStatus.tsx
@@ -7,6 +7,7 @@ import { ArtistAlleyOwnTableRegistrationRecord } from "../../store/eurofurence/t
 import { Image } from "../generic/atoms/Image";
 import { Label } from "../generic/atoms/Label";
 import { Button } from "../generic/containers/Button";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 
 export type ArtistAlleyStatusProps = {
     data: ArtistAlleyOwnTableRegistrationRecord;
@@ -45,7 +46,12 @@ export const ArtistAlleyStatus = ({ data, onEdit }: ArtistAlleyStatusProps) => {
             </Label>
             <Label type="caption">{t("submission_image_label")}</Label>
             <View style={[styles.imageContainer, backgroundStyle]}>
-                <Image style={[styles.image, { aspectRatio: data.Image.Width / data.Image.Height }]} contentFit={undefined} source={data.Image.Url} placeholder={null} />
+                <Image
+                    style={[styles.image, { aspectRatio: data.Image.Width / data.Image.Height }]}
+                    contentFit={undefined}
+                    source={sourceFromImage(data.Image)}
+                    placeholder={null}
+                />
             </View>
 
             <Button style={styles.button} onPress={onEdit}>
diff --git a/src/components/dealers/DealerCard.tsx b/src/components/dealers/DealerCard.tsx
index 9c3b6c0..4a66f6c 100644
--- a/src/components/dealers/DealerCard.tsx
+++ b/src/components/dealers/DealerCard.tsx
@@ -10,6 +10,7 @@ import { assetSource } from "../../util/assets";
 import { appStyles } from "../AppStyles";
 import { Image } from "../generic/atoms/Image";
 import { Label } from "../generic/atoms/Label";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 import { isPresent, joinOffDays } from "./utils";
 
 export type DealerDetailsInstance = {
@@ -48,7 +49,7 @@ export const DealerCard: FC<DealerCardProps> = ({ containerStyle, style, dealer,
     const present = dealer.present;
     const description = dealer.details.Categories?.join(", ");
     const offDays = dealer.offDays;
-    const avatar = dealer.details.ArtistThumbnail ? dealer.details.ArtistThumbnail.Url : dealer.details.Artist ? dealer.details.Artist.Url : assetSource("ych");
+    const avatar = sourceFromImage(dealer.details.ArtistThumbnail) ?? sourceFromImage(dealer.details.Artist) ?? assetSource("ych");
 
     // Translation object.
     const { t } = useTranslation("Dealers");
diff --git a/src/components/dealers/DealerContent.tsx b/src/components/dealers/DealerContent.tsx
index fe7c0dd..b3ce2b3 100644
--- a/src/components/dealers/DealerContent.tsx
+++ b/src/components/dealers/DealerContent.tsx
@@ -26,6 +26,7 @@ import { ImageExButton } from "../generic/containers/ImageButton";
 import { LinkItem } from "../maps/LinkItem";
 import { conTimeZone } from "../../configuration";
 import { platformShareIcon } from "../generic/atoms/Icon";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 
 const DealerCategories = ({ t, dealer }: { t: TFunction; dealer: DealerDetails }) => {
     // Nothing to display for no categories.
@@ -130,7 +131,7 @@ export const DealerContent: FC<DealerContentProps> = ({ dealer, parentPad = 0, u
 
             {!dealer.Artist ? null : (
                 <View style={[appStyles.shadow, styles.avatarCircle]}>
-                    <Image contentFit="cover" style={styles.avatarImage} source={dealer.Artist.Url} />
+                    <Image contentFit="cover" style={styles.avatarImage} source={sourceFromImage(dealer.Artist)} />
                 </View>
             )}
 
diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
index 954af59..9fb9e34 100644
--- a/src/components/events/EventCard.tsx
+++ b/src/components/events/EventCard.tsx
@@ -12,6 +12,7 @@ import { Label } from "../generic/atoms/Label";
 import { Progress } from "../generic/atoms/Progress";
 import { Row } from "../generic/containers/Row";
 import { conTimeZone } from "../../configuration";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 import { EventCardTime } from "./EventCardTime";
 
 const glyphIconSize = 90;
@@ -136,7 +137,7 @@ export const EventCard: FC<EventCardProps> = ({ containerStyle, style, type = "d
 
             {event.details.Banner ? (
                 <View style={styles.mainPoster}>
-                    <ImageBackground source={event.details.Banner.Url} contentFit="cover" style={StyleSheet.absoluteFill} recyclingKey={event.details.Id}>
+                    <ImageBackground source={sourceFromImage(event.details.Banner)} contentFit="cover" style={StyleSheet.absoluteFill} recyclingKey={event.details.Id}>
                         <View style={styles.tagArea2}>
                             <View style={styles.tagAreaInner}>
                                 <Label style={styles.tag} type="regular" color="white" ellipsizeMode="head" numberOfLines={1}>
diff --git a/src/components/generic/atoms/Banner.tsx b/src/components/generic/atoms/Banner.tsx
index 1b54cad..b118590 100644
--- a/src/components/generic/atoms/Banner.tsx
+++ b/src/components/generic/atoms/Banner.tsx
@@ -7,6 +7,7 @@ import { useAppNavigation } from "../../../hooks/nav/useAppNavigation";
 import { useThemeBackground } from "../../../hooks/themes/useThemeHooks";
 import { ImageDetails } from "../../../store/eurofurence/types";
 import { Image, ImageProps } from "./Image";
+import { sourceFromImage } from "./Image.common";
 
 export type BannerProps = {
     /**
@@ -45,7 +46,7 @@ export const Banner: FC<BannerProps> = ({ style, image, placeholder, viewable })
                 if (viewable && image) navigation.navigate("Viewer", { id: image.Id });
             }}
         >
-            <Image style={[styles.image, aspect, style]} contentFit={undefined} source={image.Url} placeholder={placeholder} />
+            <Image style={[styles.image, aspect, style]} contentFit={undefined} source={sourceFromImage(image)} placeholder={placeholder} />
         </TouchableOpacity>
     );
 };
diff --git a/src/components/generic/atoms/Image.common.ts b/src/components/generic/atoms/Image.common.ts
new file mode 100644
index 0000000..42ccffa
--- /dev/null
+++ b/src/components/generic/atoms/Image.common.ts
@@ -0,0 +1,16 @@
+import { ImageSource } from "expo-image";
+import { ImageRecord } from "../../../store/eurofurence/types";
+
+/**
+ * Converts a record to an image source.
+ * @param image The image record to convert.
+ */
+export const sourceFromImage = (image: ImageRecord | null | undefined): ImageSource | null => {
+    if (!image) return null;
+    return {
+        uri: image.Url,
+        cacheKey: image.ContentHashSha1,
+        width: image.Width,
+        height: image.Height,
+    };
+};
diff --git a/src/components/generic/atoms/ImageFill.tsx b/src/components/generic/atoms/ImageFill.tsx
index c00a099..39b8b8f 100644
--- a/src/components/generic/atoms/ImageFill.tsx
+++ b/src/components/generic/atoms/ImageFill.tsx
@@ -4,6 +4,7 @@ import { Dimensions, StyleProp, StyleSheet, View, ViewStyle } from "react-native
 
 import { ImageDetails } from "../../../store/eurofurence/types";
 import { Image, ImageProps } from "./Image";
+import { sourceFromImage } from "./Image.common";
 
 const initialSize = { width: Dimensions.get("window").width - 40, height: 160 };
 
@@ -64,9 +65,9 @@ export const ImageFill: FC<ImageFillProps> = ({ style, image, target }) => {
 
     return (
         <View style={[StyleSheet.absoluteFill, style]} onLayout={(e) => setSize(e.nativeEvent.layout)}>
-            <Image style={StyleSheet.absoluteFill} contentFit="cover" blurRadius={20} source={image?.Url} priority="normal" />
+            <Image style={StyleSheet.absoluteFill} contentFit="cover" blurRadius={20} source={sourceFromImage(image)} priority="normal" />
             <View style={arrangerStyle}>
-                <Image style={imageStyle} contentFit="fill" contentPosition="top left" source={image?.Url} priority="normal" />
+                <Image style={imageStyle} contentFit="fill" contentPosition="top left" source={sourceFromImage(image)} priority="normal" />
             </View>
         </View>
     );
diff --git a/src/components/maps/MapContent.tsx b/src/components/maps/MapContent.tsx
index 85443de..f3eed4c 100644
--- a/src/components/maps/MapContent.tsx
+++ b/src/components/maps/MapContent.tsx
@@ -12,6 +12,7 @@ import { ImageDetails, LinkFragment, MapDetails, MapEntryDetails } from "../../s
 import { Image } from "../generic/atoms/Image";
 import { Label } from "../generic/atoms/Label";
 import { Marker } from "../generic/atoms/Marker";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 import { LinkItem } from "./LinkItem";
 
 const distSq = (hx: number, hy: number) => hx * hx + hy * hy;
@@ -159,7 +160,7 @@ export const MapContent: FC<MapContentProps> = ({ map, entry }) => {
                     onTransform={onTransform}
                 >
                     <View style={styleContainer}>
-                        <Image style={styles.image} allowDownscaling={false} contentFit={undefined} source={map.Image.Url} priority="high" />
+                        <Image style={styles.image} allowDownscaling={false} contentFit={undefined} source={sourceFromImage(map.Image)} priority="high" />
                         {!entry ? null : <Marker style={styleMarker} markerSize={75} />}
                     </View>
                 </ZoomableView>
diff --git a/src/components/viewer/ViewerImageRecord.tsx b/src/components/viewer/ViewerImageRecord.tsx
index f48ed07..7e404a6 100644
--- a/src/components/viewer/ViewerImageRecord.tsx
+++ b/src/components/viewer/ViewerImageRecord.tsx
@@ -10,6 +10,7 @@ import { RecordId } from "../../store/eurofurence/types";
 import { Image } from "../generic/atoms/Image";
 import { Header } from "../generic/containers/Header";
 import { platformShareIcon } from "../generic/atoms/Icon";
+import { sourceFromImage } from "../generic/atoms/Image.common";
 import { minZoomFor, shareImage } from "./Viewer.common";
 
 const viewerPadding = 20;
@@ -47,7 +48,7 @@ export const ViewerImageRecord: FC<ViewerImageRecordProps> = ({ id }) => {
                     bindToBorders={true}
                 >
                     <View style={styleContainer}>
-                        <Image style={styles.image} allowDownscaling={false} contentFit={undefined} source={image.Url} priority="high" />
+                        <Image style={styles.image} allowDownscaling={false} contentFit={undefined} source={sourceFromImage(image)} priority="high" />
                     </View>
                 </ZoomableView>
             )}