diff --git a/packages/inspection-report/src/components/DamageReport/hooks/useFetchInspection.js b/packages/inspection-report/src/components/DamageReport/hooks/useFetchInspection.js index 85f6f647b..6ed9e6a50 100644 --- a/packages/inspection-report/src/components/DamageReport/hooks/useFetchInspection.js +++ b/packages/inspection-report/src/components/DamageReport/hooks/useFetchInspection.js @@ -16,6 +16,7 @@ export default function useFetchInspection({ processInspection, resetState, isInspectionReady, + vinNumber, pictures, damages, setDamages, @@ -59,6 +60,7 @@ export default function useFetchInspection({ isError, retry, isInspectionReady, + vinNumber, pictures, damages, setDamages, diff --git a/packages/inspection-report/src/components/Gallery/index.js b/packages/inspection-report/src/components/Gallery/index.js index 70c86c2fb..ac5be28d6 100644 --- a/packages/inspection-report/src/components/Gallery/index.js +++ b/packages/inspection-report/src/components/Gallery/index.js @@ -160,6 +160,40 @@ function Gallery({ pictures }) { } }, [gestureState]); + useEffect(() => { + if (focusedPhoto) { + const handleKeyboardChange = (event) => { + if (event.defaultPrevented) { + return; // Do nothing if the event was already processed + } + + const currentPictureIndex = pictures.findIndex(pic => pic.id === focusedPhoto.id); + switch (event.key) { + case "ArrowLeft": + if (currentPictureIndex - 1 >= 0) { + setFocusedPhoto(pictures[currentPictureIndex - 1]); + } + break; + case "ArrowRight": + if (currentPictureIndex + 1 < pictures.length) { + setFocusedPhoto(pictures[currentPictureIndex + 1]); + } + break; + default: + return; // Quit when this doesn't handle the key event. + } + + // Cancel the default action to avoid it being handled twice + event.preventDefault(); + }; + + window.addEventListener('keydown', handleKeyboardChange); + return () => { + window.removeEventListener('keydown', handleKeyboardChange); + }; + } + }, [pictures, focusedPhoto]); + return (