Merge pull request #217 from monkvision/feature/capture-enhancements

Feature capture enhancements

Author: natsukiai

packages/camera/src/components/Capture/hooks.js

@@ -165,7 +165,7 @@ export function useStartUploadAsync({ inspectionId, sights, uploads, task, onFin
       });
 
       // call onFinish callback when capturing the last picture
-      if (ids[ids.length - 1] === id) { onFinish(); }
+      if (ids[ids.length - 1] === id) { onFinish(); log([`Capture tour has been finished`]); }
 
       const fileType = Platform.OS === 'web' ? 'webp' : 'jpg';
       const filename = `${id}-${inspectionId}.${fileType}`;
@@ -204,13 +204,19 @@ export function useStartUploadAsync({ inspectionId, sights, uploads, task, onFin
 
       const result = await monkApi.images.addOne({ inspectionId, data });
 
+      // call onFinish callback when capturing the last picture
+      if (ids[ids.length - 1] === id) { onFinish(); log([`Capture tour has been finished`]); }
+
       dispatch({
         type: Actions.uploads.UPDATE_UPLOAD,
         payload: { id, status: 'fulfilled', error: null },
       });
 
       return result;
     } catch (err) {
+      // call onFinish callback when capturing the last picture
+      if (ids[ids.length - 1] === id) { onFinish(); log([`Capture tour has been finished`]); }
+
       dispatch({
         type: Actions.uploads.UPDATE_UPLOAD,
         increment: true,

packages/camera/src/components/Capture/index.js

@@ -13,7 +13,9 @@ import Controls from '../Controls';
 import Layout from '../Layout';
 import Overlay from '../Overlay';
 import Sights from '../Sights';
+import UploadCenter from '../UploadCenter';
 
+import Constants from '../../const';
 import log from '../../utils/log';
 
 import {
@@ -42,23 +44,32 @@ const styles = StyleSheet.create({
 /**
  * @param controls
  * @param controlsContainerStyle
+ * @param enableComplianceCheck
  * @param footer
  * @param fullscreen
  * @param initialState
  * @param inspectionId
+ * @param isSubmitting
  * @param loading
  * @param navigationOptions
  * @param offline
  * @param onChange
  * @param onReady
+ * @param onCaptureTourFinish
+ * @param onCaptureTourStart
+ * @param onComplianceCheckFinish
+ * @param onComplianceCheckStart
+ * @param onStartUploadPicture
+ * @param onFinishUploadPicture
+ * @param onRetakeAll
  * @param onFinish
  * @param primaryColor
  * @param sightIds
  * @param sightsContainerStyle
  * @param style
+ * @param submitButtonLabel
  * @param thumbnailStyle
  * @param uploads
- * @param RenderOnFinish
  * @param submitButtonProps
  * @param task
  * @return {JSX.Element}
@@ -67,23 +78,30 @@ const styles = StyleSheet.create({
 export default function Capture({
   controls,
   controlsContainerStyle,
+  enableComplianceCheck,
   footer,
   fullscreen,
   initialState,
   inspectionId,
+  isSubmitting,
   loading,
   navigationOptions,
   offline,
   onChange,
+  onCaptureTourFinish,
+  onCaptureTourStart,
+  onComplianceCheckFinish,
+  onComplianceCheckStart,
   onReady,
-  onFinish,
+  onRetakeAll,
+  onStartUploadPicture,
+  onFinishUploadPicture,
   orientationBlockerProps,
   primaryColor,
-  renderOnFinish: RenderOnFinish,
   sightIds,
   sightsContainerStyle,
   style,
-  submitButtonProps,
+  submitButtonLabel,
   task,
   thumbnailStyle,
   uploads,
@@ -156,7 +174,13 @@ export default function Capture({
   const createDamageDetectionAsync = useCreateDamageDetectionAsync();
   const takePictureAsync = useTakePictureAsync({ camera });
   const setPictureAsync = useSetPictureAsync({ current, sights, uploads });
-  const startUploadAsync = useStartUploadAsync({ inspectionId, sights, uploads, task, onFinish });
+  const startUploadAsync = useStartUploadAsync({
+    inspectionId,
+    sights,
+    uploads,
+    task,
+    onFinish: onCaptureTourFinish,
+  });
   const checkComplianceAsync = useCheckComplianceAsync({
     compliance,
     inspectionId,
@@ -222,10 +246,13 @@ export default function Capture({
   }, [tour, sightIds]);
 
   useEffect(() => {
-    if (tourHasFinished) {
-      log([`Capture tour has been finished`]);
-    }
-  }, [camera, tourHasFinished, onFinish]);
+    if (enableComplianceCheck) { log([`Compliance check is enabled`]); }
+  }, [enableComplianceCheck]);
+
+  useEffect(() => {
+    log([`Capture tour has been started`]);
+    onCaptureTourStart();
+  }, [onCaptureTourStart]);
 
   // END EFFECTS //
   // RENDERING //
@@ -252,8 +279,12 @@ export default function Capture({
       containerStyle={controlsContainerStyle}
       elements={controls}
       state={states}
+      enableComplianceCheck={enableComplianceCheck}
+      onStartUploadPicture={onStartUploadPicture}
+      onFinishUploadPicture={onFinishUploadPicture}
     />
-  ), [api, controls, controlsContainerStyle, states]);
+  ), [api, controlsContainerStyle, controls, states, enableComplianceCheck,
+    onStartUploadPicture, onFinishUploadPicture]);
 
   const children = useMemo(() => (
     <>
@@ -274,14 +305,19 @@ export default function Capture({
     </>
   ), [isReady, loading, overlay, primaryColor]);
 
-  if (tourHasFinished && RenderOnFinish) {
+  if (enableComplianceCheck && tourHasFinished) {
     return (
-      <RenderOnFinish
+      <UploadCenter
         {...states}
-        submitButtonProps={submitButtonProps}
+        isSubmitting={isSubmitting}
+        onComplianceCheckFinish={onComplianceCheckFinish}
+        onComplianceCheckStart={onComplianceCheckStart}
+        onRetakeAll={onRetakeAll}
+        submitButtonLabel={submitButtonLabel}
         task={task}
         inspectionId={inspectionId}
         checkComplianceAsync={checkComplianceAsync}
+        navigationOptions={navigationOptions}
       />
     );
   }
@@ -313,26 +349,7 @@ export default function Capture({
   // END RENDERING //
 }
 
-Capture.defaultSightIds = [
-  'xsuH1g5T', // Beauty Shot
-  'xfbBpq3Q', // Front Bumper Side Left
-  'LE9h1xh0', // Front Fender Left
-  'IVcF1dOP', // Doors Left
-  'm1rhrZ88', // Front Roof Left
-  'GvCtVnoD', // Rear Lateral Left
-  '3vKXafwc', // Rear Fender Left
-  'XyeyZlaU', // Rear
-  'Cce1KCd3', // Rear Fender Right
-  'AoO-nOoM', // Rear Lateral Right
-  'Pzgw0WGe', // Doors Right
-  'jqJOb6Ov', // Front Fender Right
-  'CELBsvYD', // Front Bumper Side Right
-  'vLcBGkeh', // Front
-  'IqwSM3', // Front seats
-  'rSvk2C', // Dashboard
-  'rj5mhm', // Back seats
-  'qhKA2z', // Trunk
-];
+Capture.defaultSightIds = Constants.defaultSightIds;
 
 Capture.propTypes = {
   controls: PropTypes.arrayOf(PropTypes.shape({
@@ -341,6 +358,7 @@ Capture.propTypes = {
     onPress: PropTypes.func,
   })),
   controlsContainerStyle: PropTypes.objectOf(PropTypes.any),
+  enableComplianceCheck: PropTypes.bool,
   footer: PropTypes.element,
   fullscreen: PropTypes.objectOf(PropTypes.any),
   initialState: PropTypes.shape({
@@ -350,6 +368,7 @@ Capture.propTypes = {
     uploads: PropTypes.objectOf(PropTypes.any),
   }),
   inspectionId: PropTypes.string,
+  isSubmitting: PropTypes.bool,
   loading: PropTypes.bool,
   navigationOptions: PropTypes.shape({
     allowNavigate: PropTypes.bool,
@@ -359,15 +378,22 @@ Capture.propTypes = {
     retakeMinTry: PropTypes.number,
   }),
   offline: PropTypes.objectOf(PropTypes.any),
+  onCaptureTourFinish: PropTypes.func,
+  onCaptureTourStart: PropTypes.func,
   onChange: PropTypes.func,
+  onComplianceCheckFinish: PropTypes.func,
+  onComplianceCheckStart: PropTypes.func,
   onFinish: PropTypes.func,
+  onFinishUploadPicture: PropTypes.func,
   onReady: PropTypes.func,
+  onRetakeAll: PropTypes.func,
+  onStartUploadPicture: PropTypes.func,
   orientationBlockerProps: PropTypes.shape({ title: PropTypes.string }),
   primaryColor: PropTypes.string,
   renderOnFinish: PropTypes.func,
   sightIds: PropTypes.arrayOf(PropTypes.string),
   sightsContainerStyle: PropTypes.objectOf(PropTypes.any),
-  submitButtonProps: PropTypes.shape({ onPress: PropTypes.func.isRequired }),
+  submitButtonLabel: PropTypes.string,
   task: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   thumbnailStyle: PropTypes.objectOf(PropTypes.any),
   uploads: PropTypes.shape({
@@ -404,15 +430,24 @@ Capture.defaultProps = {
     retakeMinTry: 1,
   },
   offline: null,
+  onCaptureTourFinish: () => {},
+  onCaptureTourStart: () => {},
   onChange: () => {},
+  onComplianceCheckFinish: () => {},
+  onComplianceCheckStart: () => {},
   onFinish: () => {},
+  onFinishUploadPicture: () => {},
   onReady: () => {},
+  onStartUploadPicture: () => {},
+  onRetakeAll: () => {},
   orientationBlockerProps: null,
   primaryColor: '#FFF',
   renderOnFinish: null,
   sightIds: Capture.defaultSightIds,
   sightsContainerStyle: {},
-  submitButtonProps: {},
+  enableComplianceCheck: false,
+  isSubmitting: false,
+  submitButtonLabel: 'Skip retaking',
   task: 'damage_detection',
   thumbnailStyle: {},
   uploads: {

packages/camera/src/components/Controls/hooks.js

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+import Actions from '../../actions';
+
+const useHandlers = ({ onStartUploadPicture, onFinishUploadPicture, enableComplianceCheck }) => {
+  const capture = useCallback(async (state, api, event) => {
+    event.preventDefault();
+    onStartUploadPicture(state, api);
+
+    const {
+      takePictureAsync,
+      startUploadAsync,
+      setPictureAsync,
+      goNextSight,
+      checkComplianceAsync,
+    } = api;
+
+    const picture = await takePictureAsync();
+    setPictureAsync(picture);
+
+    const { sights } = state;
+    const { current, ids } = sights.state;
+
+    /**
+        * Note(Ilyass): We removed the recursive function solution, because it takes too much time,
+        * instead we re-run the compliance one more time after 1sec of getting the first response
+        * */
+    const verifyComplianceStatus = (pictureId, compliances) => {
+      const hasTodo = Object.values(compliances).some((c) => c.status === 'TODO' || c.is_compliant === null);
+
+      if (hasTodo) {
+        setTimeout(async () => {
+          await checkComplianceAsync(pictureId, current.metadata.id);
+        }, 500);
+      }
+    };
+
+    if (current.index === ids.length - 1) {
+      const upload = await startUploadAsync(picture);
+      if (enableComplianceCheck && upload.data?.id) {
+        const result = await checkComplianceAsync(upload.data.id);
+        verifyComplianceStatus(upload.data.id, result.data.compliances);
+      }
+
+      onFinishUploadPicture(state, api);
+    } else {
+      onFinishUploadPicture(state, api);
+      goNextSight();
+
+      const upload = await startUploadAsync(picture);
+      if (enableComplianceCheck && upload.data?.id) {
+        const result = await checkComplianceAsync(upload.data.id);
+        verifyComplianceStatus(upload.data.id, result.data.compliances);
+      }
+    }
+  }, [enableComplianceCheck, onFinishUploadPicture, onStartUploadPicture]);
+
+  const retakeAll = useCallback((sightsIdsToRetake, states, setSightsIds) => {
+    // adding an initialState that will hold new compliances with `requestCount = 1`
+    const complianceInitialState = { id: '', status: 'idle', error: null, requestCount: 1, result: null, imageId: null };
+    const complianceState = {};
+    sightsIdsToRetake.forEach((id) => { complianceState[id] = { ...complianceInitialState, id }; });
+
+    // reset uploads state with the new incoming ones
+    states.uploads.dispatch({
+      type: Actions.uploads.RESET_UPLOADS, ids: { sightIds: sightsIdsToRetake } });
+
+    // update sightsIds state
+    setSightsIds({ ids: sightsIdsToRetake, initialState: { compliance: complianceState } });
+  }, []);
+  return { capture, retakeAll };
+};
+export default useHandlers;