From d995399ba8f7bfe2ab4012baf79990f75278693a Mon Sep 17 00:00:00 2001 From: David Ly Date: Mon, 22 Jul 2024 22:01:52 +0200 Subject: [PATCH] Updated photoCapture and inspectionGallery with thumbnail --- .../CreateInspection/CreateInspection.tsx | 1 + .../InspectionGallery/InspectionGallery.tsx | 4 +--- .../InspectionGalleryItemCard.tsx | 3 +-- .../InspectionGalleryItemCard/hooks.ts | 13 ++----------- .../src/components/InspectionGallery/types.ts | 4 ---- .../VehicleTypeSelection/VehicleTypeSelection.tsx | 1 + .../src/PhotoCapture/PhotoCapture.tsx | 3 --- .../src/PhotoCapture/hooks/useUploadQueue.ts | 4 ++++ .../test/PhotoCapture/PhotoCapture.test.tsx | 8 ++++++-- .../hooks/usePhotoCaptureSightState.test.ts | 6 +++++- .../hooks/useStartTasksOnComplete.test.ts | 6 +++++- .../test/PhotoCapture/hooks/useUploadQueue.test.ts | 10 +++++++++- 12 files changed, 35 insertions(+), 28 deletions(-) diff --git a/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx b/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx index 4209148e8..dd46fdb31 100644 --- a/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx +++ b/packages/common-ui-web/src/components/CreateInspection/CreateInspection.tsx @@ -45,6 +45,7 @@ export const CreateInspection = i18nWrap(({ lang, onInspectionCreated }: CreateI const { createInspection } = useMonkApi({ authToken: authToken ?? '', apiDomain: config.apiDomain, + thumbnailDomain: config.thumbnailDomain, }); const analytics = useAnalytics(); diff --git a/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx b/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx index 90856da6b..073089ec7 100644 --- a/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx +++ b/packages/common-ui-web/src/components/InspectionGallery/InspectionGallery.tsx @@ -1,4 +1,4 @@ -import { i18nWrap, useI18nSync, useThumbnail } from '@monkvision/common'; +import { i18nWrap, useI18nSync } from '@monkvision/common'; import { useMemo, useState } from 'react'; import { Image, ImageType } from '@monkvision/types'; import { InspectionGalleryItem, InspectionGalleryProps, NavigateToCaptureReason } from './types'; @@ -44,7 +44,6 @@ export const InspectionGallery = i18nWrap((props: InspectionGalleryProps) => { captureMode: props.captureMode, isFilterActive: currentFilter !== null, }); - const { getThumbnailUrl } = useThumbnail(props.thumbnailDomain); const handleItemClick = (item: InspectionGalleryItem) => { if (item.isAddDamage && props.captureMode) { @@ -114,7 +113,6 @@ export const InspectionGallery = i18nWrap((props: InspectionGalleryProps) => {
handleItemClick(item)} /> diff --git a/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx b/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx index d6393d8b2..4a163000f 100644 --- a/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx +++ b/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/InspectionGalleryItemCard.tsx @@ -11,7 +11,6 @@ import { SightOverlay } from '../../SightOverlay'; export function InspectionGalleryItemCard({ item, - getThumbnailUrl, captureMode, onClick, }: InspectionGalleryItemCardProps) { @@ -24,7 +23,7 @@ export function InspectionGalleryItemCard({ statusIcon, sightOverlay, addDamageIcon, - } = useInspectionGalleryItemCardStyles({ item, captureMode, status, getThumbnailUrl }); + } = useInspectionGalleryItemCardStyles({ item, captureMode, status }); const statusIconName = useInspectionGalleryItemStatusIconName({ item, captureMode }); const label = useInspectionGalleryItemLabel(item); diff --git a/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts b/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts index c5115bab8..5c13dd9a3 100644 --- a/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts +++ b/packages/common-ui-web/src/components/InspectionGallery/InspectionGalleryItemCard/hooks.ts @@ -10,7 +10,6 @@ import { IconName } from '../../../icons'; export interface InspectionGalleryItemCardProps { item: InspectionGalleryItem; captureMode: boolean; - getThumbnailUrl: (image: Image) => string; onClick?: () => void; } @@ -56,14 +55,12 @@ export function useInspectionGalleryItemStatusIconName({ export interface UseInspectionGalleryItemCardStylesParams { item: InspectionGalleryItem; status: InteractiveStatus; - getThumbnailUrl: (image: Image) => string; captureMode: boolean; } export function useInspectionGalleryItemCardStyles({ item, status, - getThumbnailUrl, captureMode, }: UseInspectionGalleryItemCardStylesParams) { const { palette } = useMonkTheme(); @@ -96,13 +93,6 @@ export function useInspectionGalleryItemCardStyles({ } } - let backgroundImage = 'none'; - if (!item.isAddDamage && item.isTaken) { - backgroundImage = item.image.path.startsWith('blob') - ? `url(${item.image.path})` - : `url(${getThumbnailUrl(item.image)})`; - } - return { cardStyle: { ...styles['card'], @@ -113,7 +103,8 @@ export function useInspectionGalleryItemCardStyles({ previewStyle: { ...styles['preview'], backgroundColor: colors.previewBackground, - backgroundImage, + backgroundImage: + !item.isAddDamage && item.isTaken ? `url(${item.image.thumbnailPath})` : 'none', }, previewOverlayStyle: { ...styles['previewOverlay'], diff --git a/packages/common-ui-web/src/components/InspectionGallery/types.ts b/packages/common-ui-web/src/components/InspectionGallery/types.ts index f8514a6e4..30a605fb0 100644 --- a/packages/common-ui-web/src/components/InspectionGallery/types.ts +++ b/packages/common-ui-web/src/components/InspectionGallery/types.ts @@ -72,10 +72,6 @@ export type InspectionGalleryProps = { * The config used to communicate with the API. */ apiConfig: MonkApiConfig; - /** - * The API domain used to communicate with the resize micro service - */ - thumbnailDomain: string; /** * The language used by the InspectionGallery component. * diff --git a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx index 3a5d8e98b..add1d866a 100644 --- a/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx +++ b/packages/common-ui-web/src/components/VehicleTypeSelection/VehicleTypeSelection.tsx @@ -82,6 +82,7 @@ export const VehicleTypeSelection = i18nWrap((props: VehicleTypeSelectionProps) const { getInspection } = useMonkApi({ authToken: props.authToken ?? '', apiDomain: props.apiDomain ?? '', + thumbnailDomain: props.thumbnailDomain ?? '', }); const loading = useLoadingState(); const { handleError, setTags, setUserId } = useMonitoring(); diff --git a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx index 9b60fdca7..5be0aca1a 100644 --- a/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx +++ b/packages/inspection-capture-web/src/PhotoCapture/PhotoCapture.tsx @@ -60,7 +60,6 @@ export interface PhotoCaptureProps | 'enableAddDamage' | 'sightGuidelines' | 'enableSightGuidelines' - | 'thumbnailDomain' >, Partial, Partial { @@ -132,7 +131,6 @@ export function PhotoCapture({ lang, enforceOrientation, validateButtonLabel, - thumbnailDomain, ...initialCameraConfig }: PhotoCaptureProps) { useI18nSync(lang); @@ -286,7 +284,6 @@ export function PhotoCapture({ { tasks: defaultUploadOptions.tasks, compliance: initialProps.complianceOptions, inspectionId: initialProps.inspectionId, + enableThumbnail: true, }); unmount(); @@ -105,6 +110,7 @@ describe('useUploadQueue hook', () => { uploadType: ImageUploadType.BEAUTY_SHOT, picture: defaultUploadOptions.picture, sightId: defaultUploadOptions.sightId, + enableThumbnail: true, tasks: expect.arrayContaining([ TaskName.DAMAGE_DETECTION, TaskName.IMAGE_EDITING, @@ -142,6 +148,7 @@ describe('useUploadQueue hook', () => { uploadType: ImageUploadType.CLOSE_UP_2_SHOT, picture: upload1.picture, siblingKey: expect.any(String), + enableThumbnail: true, firstShot: true, compliance: initialProps.complianceOptions, inspectionId: initialProps.inspectionId, @@ -165,6 +172,7 @@ describe('useUploadQueue hook', () => { uploadType: ImageUploadType.CLOSE_UP_2_SHOT, picture: upload2.picture, siblingKey, + enableThumbnail: true, firstShot: false, compliance: initialProps.complianceOptions, inspectionId: initialProps.inspectionId,