fix: update the logic for maxFiles count in upload docs step

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## unreleased
+
+### Bugfix
+
+- updated the logic for maxFiles count in upload docs step [#234](https://github.com/eclipse-tractusx/portal-frontend-registration/pull/234)
+
 ## 2.0.1
 
 ### Change

src/components/dragdrop.tsx

@@ -22,7 +22,7 @@ import Dropzone, { type IFileWithMeta } from 'react-dropzone-uploader'
 import 'react-dropzone-uploader/dist/styles.css'
 import { useTranslation } from 'react-i18next'
 import { FooterButton } from './footerButton'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { DragdropFiles } from './dragdropFiles'
 import DragdropLayout from './dragdropLayout'
@@ -79,7 +79,7 @@ export const DragDrop = () => {
   const { data: status } = useFetchApplicationsQuery()
   const obj = status?.[status.length - 1]
   const applicationId = obj?.applicationId
-
+  const MAX_FILES = 3
   const [fileError, setFileError] = useState('')
   const [deleteDocResponse, setDeleteDocResponse] = useState({
     severity: SeverityType.ERROR,
@@ -93,6 +93,20 @@ export const DragDrop = () => {
   const [updateStatus] = useUpdateStatusMutation()
   const [updateDocument] = useUpdateDocumentMutation()
   const [removeDocument] = useRemoveDocumentMutation()
+  const [maxFiles, setMaxFiles] = useState(MAX_FILES)
+
+  useEffect(() => {
+    if (documents?.length >= 0) {
+      const currentMaxFiles =
+        documents?.length > 0 ? MAX_FILES - documents?.length : MAX_FILES
+      setMaxFiles(currentMaxFiles)
+
+      documents?.length === MAX_FILES &&
+        setFileError(
+          t('documentUpload.dragDropExceedFilesCountErrorMsg', { MAX_FILES })
+        )
+    }
+  }, [documents])
 
   const manageFileStatus = async (fileDetails: FileStatus) => {
     switch (fileDetails.stats) {
@@ -102,6 +116,7 @@ export const DragDrop = () => {
           applicationId,
           body: { file: fileDetails.file },
         }).unwrap()
+        setMaxFiles((prev) => prev - 1)
         break
       case 'rejected_file_type':
         setFileError(t('documentUpload.dragDropDocumentTypeErrorMsg'))
@@ -147,6 +162,8 @@ export const DragDrop = () => {
           severity: SeverityType.SUCCESS,
           message: t('documentUpload.deleteSuccess'),
         })
+        setMaxFiles((prev) => prev + 1)
+        setFileError('')
       })
       .catch((errors: any) => {
         console.log('errors', errors)
@@ -205,11 +222,12 @@ export const DragDrop = () => {
             inputContent={<DragdropContent />}
             inputWithFilesContent={t('documentUpload.title')}
             submitButtonContent={t('documentUpload.upload')}
-            maxFiles={3}
+            maxFiles={maxFiles}
             accept=".pdf"
             maxSizeBytes={1000000}
             InputComponent={DragdropInput}
             PreviewComponent={(props) => <DragdropFiles props={props} />}
+            disabled={maxFiles === 0}
           />
         </div>
         <div className="documentsData mx-auto col-9 mt-4">

src/locales/de/translations.json

@@ -129,6 +129,7 @@
     "dragDropSpanCaption": "Dateien durchsuchen",
     "dragDropExceedSizeErrorMsg": "Please select another document. The maximum upload size is limited to 1MB",
     "dragDropDocumentTypeErrorMsg": "The selected document type is not supported. Please upload a document with the type .pdf",
+    "dragDropExceedFilesCountErrorMsg": "Sie können maximal {{MAX_FILES}} Dokumente hochladen.",
     "or": "oder",
     "upload": "Hochladen",
     "uploadStatusDone": "Done",

src/locales/en/translations.json

@@ -129,6 +129,7 @@
     "dragDropSpanCaption": "browse files",
     "dragDropExceedSizeErrorMsg": "Please select another document. The maximum upload size is limited to 1MB",
     "dragDropDocumentTypeErrorMsg": "The selected document type is not supported. Please upload a document with the type .pdf",
+    "dragDropExceedFilesCountErrorMsg": "You can only upload up to {{MAX_FILES}} documents.",
     "or": "or",
     "upload": "Upload",
     "uploadStatusDone": "Done",