feat(mespapiers): Added replace option to onChangeFile

of ScanWrapper component. During rotations, a new file is created, we must replace and not append to the formData state.
cozy · May 30, 2023 · 6a5da83 · 6a5da83
1 parent 75ded76
commit 6a5da83
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 10 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanWrapper.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan/ScanWrapper.jsx
@@ -28,16 +28,28 @@ const ScanWrapper = ({ currentStep }) => {
   const [isFilePickerModalOpen, setIsFilePickerModalOpen] = useState(false)
   const webviewIntent = useWebviewIntent()
 
-  const onChangeFile = file => {
+  const onChangeFile = (file, { replace = false } = {}) => {
     if (file) {
-      setCurrentFile(file)
+      if (replace) {
+        setFormData(prev => ({
+          ...prev,
+          data: prev.data.map(data => {
+            if (data.stepIndex === stepIndex && data.file.name === file.name) {
+              return { ...data, file }
+            }
+            return data
+          })
+        }))
+        return
+      }
       if (!isFileAlreadySelected(formData, stepIndex, file)) {
+        setCurrentFile(file)
         setFormData(prev => ({
           ...prev,
           data: [
             ...prev.data,
             {
-              file: file,
+              file,
               stepIndex,
               fileMetadata: {
                 page: !multipage ? page : '',
@@ -78,6 +90,7 @@ const ScanWrapper = ({ currentStep }) => {
         currentFile={currentFile}
         setCurrentFile={setCurrentFile}
         currentStep={currentStep}
+        onChangeFile={onChangeFile}
       />
     )
   }

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCard.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCard.jsx
@@ -13,9 +13,17 @@ import { useFormData } from '../Hooks/useFormData'
 const isImageType = file => file.type.match(/image\/.*/)
 
 const ScanResultCard = forwardRef(
-  ({ currentFile, setCurrentFile, currentStep }, ref) => {
+  (
+    {
+      currentFile,
+      setCurrentFile,
+      currentStep,
+      setRotationImage,
+      rotationImage
+    },
+    ref
+  ) => {
     const { setFormData, formData } = useFormData()
-    const [rotationImage, setRotationImage] = useState(0)
     const [imgWrapperMinHeight, setImgWrapperMinHeight] = useState(0)
     const { stepIndex } = currentStep
 

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultWrapper.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultWrapper.jsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useRef, memo } from 'react'
+import React, { useState, useRef, memo } from 'react'
 
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
@@ -10,19 +10,46 @@ import ScanResultActions from './ScanResultActions'
 import ScanResultCard from './ScanResultCard'
 import ScanResultInfo from './ScanResultInfo'
 import ScanResultTitle from './ScanResultTitle'
+import { makeFileFromImageSource } from './helpers'
 import { PaperDefinitionsStepPropTypes } from '../../constants/PaperDefinitionsPropTypes'
 import { KEYS } from '../../constants/const'
 import { useStepperDialog } from '../Hooks/useStepperDialog'
 
-const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
+const ScanResultWrapper = ({
+  currentFile,
+  setCurrentFile,
+  currentStep,
+  onChangeFile
+}) => {
   const imageRef = useRef(null)
+  const [rotationImage, setRotationImage] = useState(0)
   const { page = 'default', illustration } = currentStep
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
   const { nextStep } = useStepperDialog()
 
+  const onValid = async addPage => {
+    if (rotationImage % 360 !== 0) {
+      const newFile = await makeFileFromImageSource({
+        imageSrc: imageRef.current.src,
+        imageName: currentFile.name,
+        imageType: currentFile.type
+      })
+      onChangeFile(newFile, { replace: true })
+    }
+
+    if (addPage) {
+      setCurrentFile(null)
+    } else {
+      nextStep()
+    }
+  }
+
+  const handleNextStep = () => onValid(false)
+  const handleRepeatStep = () => onValid(true)
+
   const handleKeyDown = ({ key }) => {
-    if (key === KEYS.ENTER) nextStep()
+    if (key === KEYS.ENTER) handleNextStep()
   }
 
   useEventListener(window, 'keydown', handleKeyDown)
@@ -47,13 +74,15 @@ const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
           currentStep={currentStep}
+          rotationImage={rotationImage}
+          setRotationImage={setRotationImage}
           ref={imageRef}
         />
       </div>
       <ScanResultActions
         currentStep={currentStep}
-        onNextStep={nextStep}
-        onRepeatStep={() => setCurrentFile(null)}
+        onNextStep={handleNextStep}
+        onRepeatStep={handleRepeatStep}
       />
     </>
   )