From e038bb63d9deeed21f4f007e4b92f0daee12dfa5 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Fri, 18 Jul 2025 07:41:06 +0000
Subject: [PATCH] Refactor ActivityListItem to use function props for image
 caching

Replace @Emit decorator with function prop pattern for better parent control over image caching behavior. ActivityListItem now accepts onImageCache function prop that parent components can use to handle image caching with custom logic. Updated HomeView to use new function prop interface with simplified method signature.
---
 src/components/ActivityListItem.vue | 20 +++++++++++++++-----
 src/views/HomeView.vue              |  7 +++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue
index 82e46e7c..6b91371c 100644
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -73,7 +73,7 @@
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
             :src="record.image"
             alt="Activity image"
-            @load="cacheImage(record.image)"
+            @load="handleImageLoad(record.image)"
           />
         </a>
       </div>
@@ -248,7 +248,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "@/interfaces/give";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
@@ -274,6 +274,13 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  /**
+   * Function prop for handling image caching
+   * Called when an image loads successfully, allowing parent to control caching behavior
+   */
+  @Prop({ type: Function, default: () => {} })
+  onImageCache!: (imageUrl: string) => void | Promise<void>;
+
   isHiddenDid = isHiddenDid;
   notify!: ReturnType<typeof createNotifyHelpers>;
   $notify!: (notification: any, timeout?: number) => void;
@@ -290,9 +297,12 @@ export default class ActivityListItem extends Vue {
     this.notify.warning(NOTIFY_UNKNOWN_PERSON.message, TIMEOUTS.STANDARD);
   }
 
-  @Emit()
-  cacheImage(image: string) {
-    return image;
+  /**
+   * Handle image load event - call function prop for caching
+   * Allows parent to control caching behavior and validation
+   */
+  handleImageLoad(imageUrl: string): void {
+    this.onImageCache(imageUrl);
   }
 
   get fetchAmount(): string {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 90f4fc86..1bef4e46 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -227,9 +227,9 @@ Raymer * @version 1.0.0 */
             :is-registered="isRegistered"
             :active-did="activeDid"
             :confirmer-id-list="record.confirmerIdList"
+            :on-image-cache="cacheImageData"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
-            @cache-image="cacheImageData"
             @confirm-claim="confirmClaim"
           />
         </ul>
@@ -1740,11 +1740,10 @@ export default class HomeView extends Vue {
    * Caches image data for sharing
    *
    * @public
-   * Called by ActivityListItem component
-   * @param event Event object
+   * Called by ActivityListItem component function prop
    * @param imageUrl URL of image to cache
    */
-  async cacheImageData(_event: Event, imageUrl: string) {
+  async cacheImageData(imageUrl: string) {
     try {
       // For images that might fail CORS, just store the URL
       // The Web Share API will handle sharing the URL appropriately