Browse Source

refactor(ui): remove unused image cache system and fix TypeScript compilation

- Remove imageCache Map that only stored null values
- Remove selectedImageData Blob property (never used)
- Remove cacheImageData method and related function props
- Remove handleImageLoad method from ActivityListItem
- Clean up ImageViewer component props
- Fix TypeScript compilation by replacing legacy logConsoleAndDb calls
- Replace logConsoleAndDb with logger.error in deepLinks service
- Images continue to work via direct URL references

The image cache system was non-functional and only stored null values.
ImageViewer component ignored blob data and only used URLs.
Fixed production build failure caused by undefined logConsoleAndDb function.
Removing dead code improves maintainability without affecting functionality.
pull/164/head
Matthew Raymer 5 days ago
parent
commit
bb357f294a
  1. 16
      src/components/ActivityListItem.vue
  2. 1
      src/components/ImageViewer.vue
  3. 10
      src/services/deepLinks.ts
  4. 27
      src/views/HomeView.vue

16
src/components/ActivityListItem.vue

@ -73,7 +73,6 @@
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="handleImageLoad(record.image)"
/>
</a>
</div>
@ -272,13 +271,6 @@ export default class ActivityListItem extends Vue {
@Prop() isRegistered!: boolean;
@Prop() activeDid!: 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;
@ -295,14 +287,6 @@ export default class ActivityListItem extends Vue {
this.notify.warning(NOTIFY_UNKNOWN_PERSON.message, TIMEOUTS.STANDARD);
}
/**
* 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 {
const claim =
(this.record.fullClaim as any)?.claim || this.record.fullClaim;

1
src/components/ImageViewer.vue

@ -45,7 +45,6 @@ import { logger } from "../utils/logger";
@Component({ emits: ["update:isOpen"] })
export default class ImageViewer extends Vue {
@Prop() imageUrl!: string;
@Prop() imageData!: Blob | null;
@Prop() isOpen!: boolean;
userAgent = new UAParser();

10
src/services/deepLinks.ts

@ -53,6 +53,7 @@ import {
DeepLinkRoute,
} from "../interfaces/deepLinks";
import type { DeepLinkError } from "../interfaces/deepLinks";
import { logger } from "../utils/logger";
// Helper function to extract the first key from a Zod object schema
function getFirstKeyFromZodObject(
@ -204,9 +205,8 @@ export class DeepLinkHandler {
validatedParams = await schema.parseAsync(params);
} catch (error) {
// For parameter validation errors, provide specific error feedback
logConsoleAndDb(
logger.error(
`[DeepLink] Invalid parameters for route name ${routeName} for path: ${path}: ${JSON.stringify(error)} ... with params: ${JSON.stringify(params)} ... and query: ${JSON.stringify(query)}`,
true,
);
await this.router.replace({
name: "deep-link-error",
@ -229,9 +229,8 @@ export class DeepLinkHandler {
params: validatedParams,
});
} catch (error) {
logConsoleAndDb(
logger.error(
`[DeepLink] Error routing to route name ${routeName} for path: ${path}: ${JSON.stringify(error)} ... with validated params: ${JSON.stringify(validatedParams)}`,
true,
);
// For parameter validation errors, provide specific error feedback
await this.router.replace({
@ -263,9 +262,8 @@ export class DeepLinkHandler {
await this.validateAndRoute(path, sanitizedParams, query);
} catch (error) {
const deepLinkError = error as DeepLinkError;
logConsoleAndDb(
logger.error(
`[DeepLink] Error (${deepLinkError.code}): ${deepLinkError.details}`,
true,
);
throw {

27
src/views/HomeView.vue

@ -234,7 +234,6 @@ Raymer * @version 1.0.0 */
:last-viewed-claim-id="feedLastViewedClaimId"
:is-registered="isRegistered"
:active-did="activeDid"
:on-image-cache="cacheImageData"
@load-claim="onClickLoadClaim"
@view-image="openImageViewer"
/>
@ -255,11 +254,7 @@ Raymer * @version 1.0.0 */
<ChoiceButtonDialog ref="choiceButtonDialog" />
<ImageViewer
v-model:is-open="isImageViewerOpen"
:image-url="selectedImage"
:image-data="selectedImageData"
/>
<ImageViewer v-model:is-open="isImageViewerOpen" :image-url="selectedImage" />
</template>
<script lang="ts">
@ -434,9 +429,7 @@ export default class HomeView extends Vue {
showShortcutBvc = false;
userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
selectedImage = "";
selectedImageData: Blob | null = null;
isImageViewerOpen = false;
imageCache: Map<string, Blob | null> = new Map();
showProjectsDialog = false;
/**
@ -1614,23 +1607,6 @@ export default class HomeView extends Vue {
});
}
/**
* Caches image data for sharing
*
* @public
* Called by ActivityListItem component function prop
* @param imageUrl URL of image to cache
*/
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
this.imageCache.set(imageUrl, null);
} catch (error) {
logger.warn("Failed to cache image:", error);
}
}
/**
* Opens image viewer dialog
*
@ -1639,7 +1615,6 @@ export default class HomeView extends Vue {
* @param imageUrl URL of image to display
*/
async openImageViewer(imageUrl: string) {
this.selectedImageData = this.imageCache.get(imageUrl) ?? null;
this.selectedImage = imageUrl;
this.isImageViewerOpen = true;
}

Loading…
Cancel
Save