fix: resolved arrow keys to show all the images (#594)

Co-authored-by: deepakglobant <[email protected]>

Author: deepakglobant

packages/inspection-report/src/components/DamageReport/DamageReport.js

@@ -172,6 +172,7 @@ export default function DamageReport({
     inspectionId,
     damages,
     setDamages,
+    pictures,
   });
 
   const {

packages/inspection-report/src/components/DamageReport/hooks/useDamageReportStateHandlers.js

@@ -6,6 +6,7 @@ export default function useDamageReportStateHandlers({
   inspectionId,
   damages,
   setDamages,
+  pictures,
 }) {
   const [editedDamage, setEditedDamage] = useState(undefined);
   const [editedDamagePart, setEditedDamagePart] = useState(undefined);
@@ -84,7 +85,14 @@ export default function useDamageReportStateHandlers({
       throw new Error(`Unable to find damage with corresponding pill part "${partName}"`);
     }
     const { images } = damage;
-    const partDamageImages = images.filter(img => img.base_image_type === "beauty_shot");
+    const damagedPartImage = pictures.find(img => img.id === damage?.images[0]?.id)?.rendered_outputs?.map(img => ({
+      id: img.id + '1',
+      url: img.url,
+    })) ?? [];
+    const partDamageImages = images.filter(img => img.base_image_type === "beauty_shot").map((img, index) => ({
+      ...img,
+      rendered_outputs: index === 0 ? pictures.find(pic => pic.id === img?.id)?.rendered_outputs : []
+    }));
     const zoomedDamageImages = images.filter(img => img.base_image_type === "close_up");
     setEditedDamage(damage);
     setEditedDamagePart(partName);

packages/inspection-report/src/components/DamageReport/hooks/useProcessInspection.js

@@ -39,6 +39,7 @@ function getPictures(inspection) {
       .filter((damage) => damage?.additional_data?.description === 'rendering of detected damages')
       .map((damagedImage) => {
         return {
+          id: image.id,
           isRendered: true,
           label: image.additional_data?.label ?? undefined,
           url: damagedImage.path,
@@ -56,6 +57,7 @@ function getDamages(inspection) {
       (inspectionPart) => (inspectionPart.id === severityResult.related_item_id),
     )?.related_images?.map(
       (relatedImage) => ({
+        id: relatedImage.base_image_id,
         base_image_type: relatedImage.base_image_type,
         object_type: relatedImage.object_type,
         url: relatedImage.path,

packages/inspection-report/src/components/Gallery/index.js

@@ -171,13 +171,27 @@ function Gallery({ pictures }) {
         const currentPictureIndex = pictures.findIndex(pic => pic.id === focusedPhoto.id);
         switch (event.key) {
           case "ArrowLeft":
-            if (currentPictureIndex - 1 >= 0) {
-              setFocusedPhoto(pictures[currentPictureIndex - 1]);
+            if ((focusedPhoto?.isRendered && currentPictureIndex >= 0) || currentPictureIndex - 1 >= 0) {
+              if (focusedPhoto.isRendered) {
+                setFocusedPhoto(pictures[currentPictureIndex]);
+              } else {
+                setFocusedPhoto(
+                  pictures[currentPictureIndex - 1]?.rendered_outputs?.length > 0 ?
+                    pictures[currentPictureIndex - 1]?.rendered_outputs[0] : pictures[currentPictureIndex]
+                );
+              }
             }
             break;
           case "ArrowRight":
-            if (currentPictureIndex + 1 < pictures.length) {
-              setFocusedPhoto(pictures[currentPictureIndex + 1]);
+            if ((!focusedPhoto?.isRendered && currentPictureIndex < pictures.length) || currentPictureIndex + 1 < pictures.length) {
+              if (focusedPhoto.isRendered) {
+                setFocusedPhoto(pictures[currentPictureIndex + 1]);
+              } else {
+                setFocusedPhoto(
+                  pictures[currentPictureIndex]?.rendered_outputs?.length > 0 ?
+                    pictures[currentPictureIndex]?.rendered_outputs[0] : pictures[currentPictureIndex + 1]
+                );
+              }
             }
             break;
           default:
@@ -224,7 +238,9 @@ function Gallery({ pictures }) {
       >
         <View style={{ flex: 1, backgroundColor: '#000000', position: 'relative' }}>
           <View style={[styles.header]}>
-            <Text style={[styles.title]}>{(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''}</Text>
+            <Text style={[styles.title]}>
+              {(focusedPhoto?.label) ? focusedPhoto.label[i18n.language] : ''} {focusedPhoto?.isRendered && t('gallery.withDamages')}
+            </Text>
           </View>
           <Pressable
             onPress={handleUnfocusPhoto}