Skip to content

Commit

Permalink
refactor(mespapiers): Split Scan's components
Browse files Browse the repository at this point in the history
For better maintainability
  • Loading branch information
Merkur39 committed May 19, 2023
1 parent 0b28422 commit a2391aa
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 100 deletions.
111 changes: 19 additions & 92 deletions packages/cozy-mespapiers-lib/src/components/ModelSteps/Scan.jsx
Original file line number Diff line number Diff line change
@@ -1,94 +1,22 @@
import React, { useState, useEffect, memo } from 'react'
import PropTypes from 'prop-types'
import React, { useState } from 'react'

import { useClient, models } from 'cozy-client'
import { isMobile } from 'cozy-device-helper'
import Alerter from 'cozy-ui/transpiled/react/Alerter'
import DialogActions from 'cozy-ui/transpiled/react/DialogActions'
import FilePicker from 'cozy-ui/transpiled/react/FilePicker'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'

import { isFileAlreadySelected } from './helpers'
import ScanActionsWrapper from './ScanActionsWrapper'
import IlluGenericNewPage from '../../assets/icons/IlluGenericNewPage.svg'
import { makeBlobWithCustomAttrs } from '../../helpers/makeBlobWithCustomAttrs'
import { PaperDefinitionsStepPropTypes } from '../../constants/PaperDefinitionsPropTypes'
import CompositeHeader from '../CompositeHeader/CompositeHeader'
import { useFormData } from '../Hooks/useFormData'
import AcquisitionResult from '../ModelSteps/AcquisitionResult'
import ScanDesktopActions from '../ModelSteps/ScanDesktopActions'
import ScanMobileActions from '../ModelSteps/ScanMobileActions'

const { fetchBlobFileById } = models.file

// TODO Waiting for this type of filter to be implemented on the FilePicker side
// https://github.com/cozy/cozy-ui/issues/2026
const validFileType = file => {
const regexValidation = /(image\/*)|(application\/pdf)/
return regexValidation.test(file.type)
}

const Scan = ({ currentStep }) => {
const Scan = ({ currentStep, onChangeFile, onChangeFilePicker }) => {
const { t } = useI18n()
const client = useClient()
const { formData, setFormData } = useFormData()
const { illustration, text, stepIndex, multipage, page } = currentStep
const [currentFile, setCurrentFile] = useState(null)
const { illustration, text } = currentStep

const [isFilePickerModalOpen, setIsFilePickerModalOpen] = useState(false)

const onChangeFile = file => {
if (file) {
setCurrentFile(file)
if (!isFileAlreadySelected(formData, stepIndex, file)) {
setFormData(prev => ({
...prev,
data: [
...prev.data,
{
file: file,
stepIndex,
fileMetadata: {
page: !multipage ? page : '',
multipage
}
}
]
}))
}
}
}

const openFilePickerModal = () => setIsFilePickerModalOpen(true)
const closeFilePickerModal = () => setIsFilePickerModalOpen(false)

const onChangeFilePicker = async cozyFileId => {
const blobFile = await fetchBlobFileById(client, cozyFileId)
if (validFileType(blobFile)) {
const blobFileCustom = makeBlobWithCustomAttrs(blobFile, {
id: cozyFileId
})
onChangeFile(blobFileCustom)
} else {
Alerter.error('Scan.modal.validFileType', {
duration: 3000
})
}
}

useEffect(() => {
const data = formData.data.filter(data => data.stepIndex === stepIndex)
const { file } = data[data.length - 1] || {}

if (file) {
setCurrentFile(file)
}
}, [formData.data, stepIndex])

return currentFile ? (
<AcquisitionResult
currentFile={currentFile}
setCurrentFile={setCurrentFile}
currentStep={currentStep}
/>
) : (
return (
<>
<CompositeHeader
icon={illustration}
Expand All @@ -100,27 +28,26 @@ const Scan = ({ currentStep }) => {
disableSpacing
className="columnLayout u-mh-0 u-mb-1 cozyDialogActions"
>
{isMobile() ? (
<ScanMobileActions
onChangeFile={onChangeFile}
openFilePickerModal={openFilePickerModal}
/>
) : (
<ScanDesktopActions
onChangeFile={onChangeFile}
openFilePickerModal={openFilePickerModal}
/>
)}
<ScanActionsWrapper
onChangeFile={onChangeFile}
openFilePickerModal={() => setIsFilePickerModalOpen(true)}
/>
</DialogActions>

{isFilePickerModalOpen && (
<FilePicker
onChange={onChangeFilePicker}
onClose={closeFilePickerModal}
onClose={() => setIsFilePickerModalOpen(false)}
/>
)}
</>
)
}

export default memo(Scan)
Scan.propTypes = {
currentStep: PaperDefinitionsStepPropTypes,
onChangeFile: PropTypes.func,
onChangeFilePicker: PropTypes.func
}

export default Scan
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import PropTypes from 'prop-types'
import React from 'react'

import { isMobile } from 'cozy-device-helper'

import ScanDesktopActions from './ScanDesktopActions'
import ScanMobileActions from './ScanMobileActions'

const ScanActionsWrapper = props => {
if (isMobile()) {
return <ScanMobileActions {...props} />
}

return <ScanDesktopActions {...props} />
}

ScanActionsWrapper.propTypes = {
onChangeFile: PropTypes.func,
openFilePickerModal: PropTypes.func,
}

export default ScanActionsWrapper
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'

import { isMobile } from 'cozy-device-helper'

import Scan from './Scan'
import ScanWrapper from './ScanWrapper'
import AppLike from '../../../test/components/AppLike'
import { FormDataProvider } from '../Contexts/FormDataProvider'
import { useFormData } from '../Hooks/useFormData'
Expand Down Expand Up @@ -52,7 +52,7 @@ const setup = ({
return render(
<AppLike>
<FormDataProvider>
<Scan currentStep={currentStep} />
<ScanWrapper currentStep={currentStep} />
</FormDataProvider>
</AppLike>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React, { useState, useEffect } from 'react'

import { useClient, models } from 'cozy-client'
import Alerter from 'cozy-ui/transpiled/react/Alerter'

import AcquisitionResult from './AcquisitionResult'
import Scan from './Scan'
import { isFileAlreadySelected } from './helpers'
import { PaperDefinitionsStepPropTypes } from '../../constants/PaperDefinitionsPropTypes'
import { makeBlobWithCustomAttrs } from '../../helpers/makeBlobWithCustomAttrs'
import { useFormData } from '../Hooks/useFormData'

const { fetchBlobFileById } = models.file

// TODO Waiting for this type of filter to be implemented on the FilePicker side
// https://github.com/cozy/cozy-ui/issues/2026
const validFileType = file => {
const regexValidation = /(image\/*)|(application\/pdf)/
return regexValidation.test(file.type)
}

const ScanWrapper = ({ currentStep }) => {
const client = useClient()
const { formData, setFormData } = useFormData()
const { stepIndex, multipage, page } = currentStep
const [currentFile, setCurrentFile] = useState(null)

const onChangeFile = file => {
if (file) {
setCurrentFile(file)
if (!isFileAlreadySelected(formData, stepIndex, file)) {
setFormData(prev => ({
...prev,
data: [
...prev.data,
{
file: file,
stepIndex,
fileMetadata: {
page: !multipage ? page : '',
multipage
}
}
]
}))
}
}
}

const onChangeFilePicker = async cozyFileId => {
const blobFile = await fetchBlobFileById(client, cozyFileId)
if (validFileType(blobFile)) {
const blobFileCustom = makeBlobWithCustomAttrs(blobFile, {
id: cozyFileId
})
onChangeFile(blobFileCustom)
} else {
Alerter.error('Scan.modal.validFileType', {
duration: 3000
})
}
}

useEffect(() => {
const data = formData.data.filter(data => data.stepIndex === stepIndex)
const { file } = data[data.length - 1] || {}

if (file) {
setCurrentFile(file)
}
}, [formData.data, stepIndex])

if (currentFile) {
return (
<AcquisitionResult
currentFile={currentFile}
setCurrentFile={setCurrentFile}
currentStep={currentStep}
/>
)
}

return (
<Scan
currentStep={currentStep}
onChangeFile={onChangeFile}
onChangeFilePicker={onChangeFilePicker}
/>
)
}

ScanWrapper.propTypes = {
currentStep: PaperDefinitionsStepPropTypes
}

export default ScanWrapper
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'
import { useStepperDialog } from '../Hooks/useStepperDialog'
import ContactWrapper from '../ModelSteps/ContactWrapper'
import Information from '../ModelSteps/Information'
import Scan from '../ModelSteps/Scan'
import ScanWrapper from '../ModelSteps/ScanWrapper'

const StepperDialogContent = ({ onClose }) => {
const { allCurrentSteps, currentStepIndex } = useStepperDialog()
Expand All @@ -13,7 +13,12 @@ const StepperDialogContent = ({ onClose }) => {
const modelPage = currentStep.model.toLowerCase()
switch (modelPage) {
case 'scan':
return <Scan key={currentStep.stepIndex} currentStep={currentStep} />
return (
<ScanWrapper
key={currentStep.stepIndex}
currentStep={currentStep}
/>
)
case 'information':
return (
<Information
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import AppLike from '../../../test/components/AppLike'
import { useStepperDialog } from '../Hooks/useStepperDialog'

/* eslint-disable react/display-name */
jest.mock('../ModelSteps/Scan', () => () => <div data-testid="Scan" />)
jest.mock('../ModelSteps/ScanWrapper', () => () => (
<div data-testid="ScanWrapper" />
))
jest.mock('../ModelSteps/Information', () => () => (
<div data-testid="Information" />
))
Expand Down Expand Up @@ -38,7 +40,7 @@ describe('StepperDialogContent', () => {
})
const { queryByTestId } = setup()

expect(queryByTestId('Scan')).toBeTruthy()
expect(queryByTestId('ScanWrapper')).toBeTruthy()
expect(queryByTestId('Information')).toBeNull()
expect(queryByTestId('ContactWrapper')).toBeNull()
})
Expand All @@ -51,7 +53,7 @@ describe('StepperDialogContent', () => {
const { queryByTestId } = setup()

expect(queryByTestId('Information')).toBeTruthy()
expect(queryByTestId('scan')).toBeNull()
expect(queryByTestId('ScanWrapper')).toBeNull()
expect(queryByTestId('ContactWrapper')).toBeNull()
})

Expand All @@ -63,7 +65,7 @@ describe('StepperDialogContent', () => {
const { queryByTestId } = setup()

expect(queryByTestId('ContactWrapper')).toBeTruthy()
expect(queryByTestId('Scan')).toBeNull()
expect(queryByTestId('ScanWrapper')).toBeNull()
expect(queryByTestId('Information')).toBeNull()
})
})

0 comments on commit a2391aa

Please sign in to comment.