fix: small vm fixes (MN-411) (#614)

monkvision · Nov 27, 2023 · 0cc9dcc · 0cc9dcc
1 parent 3522460
commit 0cc9dcc
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/packages/inspection-report/src/components/DamageReport/UpdateDamageModal.js b/packages/inspection-report/src/components/DamageReport/UpdateDamageModal.js
@@ -15,6 +15,7 @@ import {
 import { MaterialIcons } from '@expo/vector-icons';
 import { useTranslation } from 'react-i18next';
 import { CommonPropTypes, DamageMode } from '../../resources';
+import { useDamageVisibility } from '../../hooks';
 
 import DamageManipulator from './DamageManipulator';
 
@@ -115,9 +116,9 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
   const { width, height } = useWindowDimensions();
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
   const [gestureState, setGestureState] = useState({});
-  const [seeDamages, setSeeDamages] = useState(true);
   const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
   const [fullScreenPhoto, setFullScreenPhoto] = useState(null);
+  const { visibleDamages, updateVisibility } = useDamageVisibility();
 
   const panResponder = useRef(
     PanResponder.create({
@@ -131,7 +132,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
   ).current;
 
   const handleClosePreview = useCallback(() => setFullScreenPhoto(null), []);
-  const handleVisibilityOfDamages = useCallback(() => setSeeDamages(!seeDamages), [seeDamages]);
+  const handleVisibilityOfDamages = useCallback(() => updateVisibility(!visibleDamages), [visibleDamages]);
 
   useEffect(() => {
     if (
@@ -190,7 +191,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
               source={{
                 width: '100%',
                 height: '100%',
-                uri: seeDamages ? fullScreenPhoto?.rendered_outputs?.url : fullScreenPhoto?.url,
+                uri: visibleDamages ? fullScreenPhoto?.rendered_outputs?.url : fullScreenPhoto?.url,
               }}
               style={{ resizeMode: 'contain' }}
             />
@@ -212,8 +213,8 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
             </Pressable>
             <Text style={styles.header}>{t(`damageReport.parts.${part}`)}</Text>
             <Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
-              <MaterialIcons name={seeDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
-              <Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
+              <MaterialIcons name={visibleDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
+              <Text style={styles.damageLabel}>{visibleDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
             </Pressable>
           </View>
           <View
@@ -228,7 +229,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
                     source={{
                       width: '100%',
                       height: '100%',
-                      uri: seeDamages ? image?.rendered_outputs?.url : image?.url,
+                      uri: visibleDamages ? image?.rendered_outputs?.url : image?.url,
                     }}
                     style={{ resizeMode: 'cover' }}
                   />

diff --git a/packages/inspection-report/src/components/Gallery/index.js b/packages/inspection-report/src/components/Gallery/index.js
@@ -16,7 +16,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { useTranslation } from 'react-i18next';
 
 import Thumbnail from './Thumbnail';
-import { useDesktopMode } from '../../hooks';
+import { useDesktopMode, useDamageVisibility } from '../../hooks';
 
 const styles = StyleSheet.create({
   container: {
@@ -91,13 +91,13 @@ function Gallery({ pictures }) {
   const isDesktopMode = useDesktopMode();
   const [focusedPhoto, setFocusedPhoto] = useState(null);
   const [isZoomed, setIsZoomed] = useState(false);
-  const [seeDamages, setSeeDamages] = useState(false);
   const { width, height } = useWindowDimensions();
   const [gestureState, setGestureState] = useState({});
   const scale = useRef(new Animated.Value(1)).current;
   const transform = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const { visibleDamages, updateVisibility } = useDamageVisibility();
 
-  const handleVisibilityOfDamages = useCallback(() => setSeeDamages(!seeDamages), [seeDamages]);
+  const handleVisibilityOfDamages = useCallback(() => updateVisibility(!visibleDamages), [visibleDamages]);
   const handleOnImageClick = useCallback((focusedImage) => {
     if (focusedImage.url) {
       setFocusedPhoto(focusedImage);
@@ -211,7 +211,7 @@ function Gallery({ pictures }) {
         window.removeEventListener('keydown', handleKeyboardChange);
       };
     }
-    return () => {};
+    return () => { };
   }, [pictures, focusedPhoto]);
 
   return (
@@ -263,14 +263,14 @@ function Gallery({ pictures }) {
           {
             !isDesktopMode && (
               <Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
-                <MaterialIcons name={seeDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
-                <Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
+                <MaterialIcons name={visibleDamages ? 'visibility-off' : 'visibility'} size={20} color="#fff" />
+                <Text style={styles.damageLabel}>{visibleDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
               </Pressable>
             )
           }
 
           <Animated.Image
-            source={{ uri: seeDamages ? focusedPhoto?.rendered_outputs?.url : focusedPhoto?.url }}
+            source={{ uri: visibleDamages ? focusedPhoto?.rendered_outputs?.url : focusedPhoto?.url }}
             style={{
               flex: 1,
               cursor: !isDesktopMode ? 'auto' : isZoomed ? 'zoom-out' : 'zoom-in',

diff --git a/packages/inspection-report/src/hooks/index.js b/packages/inspection-report/src/hooks/index.js
@@ -1,4 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
+export { default as useDamageVisibility } from './useDamageVisibility';
 export { default as useDesktopMode } from './useDesktopMode';
 export { default as useOrientation, ORIENTATION_MODE } from './useOrientation';
 export * from './useCurrency';
diff --git a/packages/inspection-report/src/hooks/useDamageVisibility.js b/packages/inspection-report/src/hooks/useDamageVisibility.js
@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export default function useDamageVisibility() {
+  const [visibleDamages, setVisibleDamages] = useState(true);
+
+  const updateVisibility = useCallback((visible) => {
+    setVisibleDamages(visible);
+  }, []);
+
+  return {
+    visibleDamages,
+    updateVisibility,
+  };
+}