folio-org · elsenhans · Jan 7, 2025 · Dec 16, 2024 · Dec 19, 2024 · Dec 20, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 * Update permissions ([UIFC-395](https://folio-org.atlassian.net/browse/UIFC-395))
 * Restructure localStorage, simplify urls for ShowCollections ([UIFC-370](https://folio-org.atlassian.net/browse/UIFC-370))
 * Restructure tests, add tests for SASQ ([UIFC-399](https://folio-org.atlassian.net/browse/UIFC-399))
+* Refactor FileUploaderField ([UIFC-372](https://folio-org.atlassian.net/browse/UIFC-372))
 
 ## [6.1.0](https://github.com/folio-org/ui-finc-select/tree/v6.1.0) (2024-03-20)
 * Remove deprecated pane properties ([UIFC-339](https://issues.folio.org/browse/UIFC-339))

diff --git a/src/components/Filters/FilterFile/FilterFileView.js b/src/components/Filters/FilterFile/FilterFileView.js
@@ -26,13 +26,12 @@ const FilterFileView = ({
   };
 
   const formatter = {
-    label: (item) => <span data-test-doc-label>{item.label}</span>,
-    criteria: (item) => <span data-test-doc-criteria>{item.criteria}</span>,
+    label: (item) => <span>{item.label}</span>,
+    criteria: (item) => <span>{item.criteria}</span>,
     fileId: (item) => (
       <div>
         <Button
           buttonStyle="danger"
-          data-test-filter-button-download-file
           id={`download-file ${item.label}`}
           onClick={(e) => {
             handleDownloadFile(item);

diff --git a/src/components/Filters/FilterFile/UploadFile/DocumentsFieldArray.js b/src/components/Filters/FilterFile/UploadFile/DocumentsFieldArray.js
@@ -33,8 +33,6 @@ const DocumentsFieldArray = ({
                 <Col xs={12}>
                   <Field
                     component={FileUploaderField}
-                    data-test-filter-file-card-fileid
-                    fileLabel={doc.label}
                     id={`filter-file-card-fileId-${i}`}
                     name={`${name}[${i}].fileId`}
                     onUploadFile={onUploadFile}
@@ -61,14 +59,10 @@ const DocumentsFieldArray = ({
   const renderDocs = () => {
     return fields.map((doc, i) => (
       <EditCard
-        data-test-filter-file
         deletebuttonarialabel={`delete filter file ${name}`}
-        deleteBtnProps={{
-          'id': `${name}-delete-${i}`,
-          'data-test-delete-filter-file-button': true
-        }}
+        deleteBtnProps={{ 'id': `${name}-delete-${i}` }}
         header={<FormattedMessage id="ui-finc-select.filter.file.label" values={{ number: i + 1 }} />}
-        key={i}
+        key={doc}
         onDelete={() => fields.remove(i)}
       >
         <Row>
@@ -78,7 +72,6 @@ const DocumentsFieldArray = ({
                 <Field
                   autoFocus
                   component={TextField}
-                  data-test-filter-file-label
                   id={`filter-file-label-${i}`}
                   label={<FormattedMessage id="ui-finc-select.filter.file.label" />}
                   name={`${name}[${i}].label`}
@@ -92,7 +85,6 @@ const DocumentsFieldArray = ({
               <Col xs={12}>
                 <Field
                   component={TextField}
-                  data-test-filter-file-criteria
                   id={`filter-file-criteria-${i}`}
                   label={<FormattedMessage id="ui-finc-select.filter.file.criteria" />}
                   name={`${name}[${i}].criteria`}
@@ -107,21 +99,17 @@ const DocumentsFieldArray = ({
   };
 
   const renderEmpty = () => (
-    <Layout
-      data-test-filter-file-card-empty-message
-      className="padding-bottom-gutter"
-    >
+    <Layout className="padding-bottom-gutter">
       <FormattedMessage id="ui-finc-select.filter.file.empty" />
     </Layout>
   );
 
   return (
-    <div data-test-filter-file-card>
+    <div>
       <div>
         { fields.length ? renderDocs() : renderEmpty() }
       </div>
       <Button
-        data-test-filter-file-card-add-button
         id="add-filter-file-btn"
         onClick={() => fields.push({})}
       >

diff --git a/src/components/Filters/FilterFile/UploadFile/FileUploader.js b/src/components/Filters/FilterFile/UploadFile/FileUploader.js
@@ -1,63 +1,65 @@
 import PropTypes from 'prop-types';
-import ReactDropzone from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
 
 import { Button, Icon } from '@folio/stripes/components';
 
 import css from './FileUploader.css';
 
 const FileUploader = ({
-  accept,
-  acceptClassName,
-  activeClassName,
-  className = '',
-  disabledClassName,
   errorMessage,
-  footer,
   isDropZoneActive,
-  maxSize,
   onDragEnter,
   onDragLeave,
   onDrop,
-  rejectClassName,
-  style,
   title,
-  uploadButtonAriaLabel,
   uploadButtonText,
   uploadInProgress,
   uploadInProgressText,
 }) => {
+  const {
+    getRootProps,
+    getInputProps,
+  } = useDropzone({
+    onDrop,
+    onDragEnter,
+    onDragLeave,
+    maxFiles: 1,
+  });
+
   const renderErrorMessage = () => {
-    return errorMessage &&
-    (
-      <span
-        className={css.errorMessage}
-        hidden={isDropZoneActive}
-      >
-        <Icon icon="exclamation-circle">
-          <span data-test-filter-file-error-msg>{errorMessage}</span>
-        </Icon>
-      </span>
+    return (
+      errorMessage && (
+        <span
+          className={css.errorMessage}
+          hidden={isDropZoneActive}
+        >
+          <Icon icon="exclamation-circle">
+            <span>{errorMessage}</span>
+          </Icon>
+        </span>
+      )
     );
   };
 
   const renderUploadFields = () => {
     return (
       <>
         <span
-          className={`${css.uploadTitle} ${isDropZoneActive ? css.activeUploadTitle : ''}`}
-          data-test-filter-file-upload-title
+          className={`${css.uploadTitle} ${
+            isDropZoneActive ? css.activeUploadTitle : ''
+          }`}
         >
           {uploadInProgress ? (
             <div>
               {uploadInProgressText}
               <Icon icon="spinner-ellipsis" width="10px" />
             </div>
-          ) : title}
+          ) : (
+            title
+          )}
         </span>
         <Button
-          aria-label={uploadButtonAriaLabel}
           buttonStyle="primary"
-          data-test-filter-file-upload-button
           hidden={isDropZoneActive}
           id="filter-file-upload-button"
         >
@@ -67,69 +69,25 @@ const FileUploader = ({
     );
   };
 
-  const renderFooter = () => {
-    return footer &&
-    (
-      <div
-        className={css.footer}
-        data-test-filter-file-footer
-        hidden={isDropZoneActive}
-      >
-        {footer}
-      </div>
-    );
-  };
-
   return (
-    <ReactDropzone
-      accept={accept}
-      acceptClassName={acceptClassName}
-      activeClassName={activeClassName}
-      disabledClassName={disabledClassName}
-      disableClick
-      maxSize={maxSize}
-      onDragEnter={onDragEnter}
-      onDragLeave={onDragLeave}
-      onDrop={onDrop}
-      rejectClassName={rejectClassName}
-      style={style}
+    <div
+      className={`${css.upload}`}
+      {...getRootProps()}
     >
-      {({ getInputProps, getRootProps }) => (
-        <div
-          className={`${css.upload} ${className}`}
-          data-test-filter-file-drop-zone
-          {...getRootProps()}
-        >
-          <input id="filter-file-input" {...getInputProps()} />
-          {renderErrorMessage()}
-          {renderUploadFields()}
-          {renderFooter()}
-        </div>
-      )}
-    </ReactDropzone>
+      <input id="filter-file-input" {...getInputProps()} />
+      {renderErrorMessage()}
+      {renderUploadFields()}
+    </div>
   );
 };
 
 FileUploader.propTypes = {
-  accept: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-  acceptClassName: PropTypes.string,
-  activeClassName: PropTypes.string,
-  className: PropTypes.string,
-  disabledClassName: PropTypes.string,
   errorMessage: PropTypes.node,
-  footer: PropTypes.node,
   isDropZoneActive: PropTypes.bool.isRequired,
-  maxSize: PropTypes.number,
   onDragEnter: PropTypes.func,
   onDragLeave: PropTypes.func,
   onDrop: PropTypes.func.isRequired,
-  rejectClassName: PropTypes.string,
-  style: PropTypes.object,
   title: PropTypes.node.isRequired,
-  uploadButtonAriaLabel: PropTypes.string,
   uploadButtonText: PropTypes.node.isRequired,
   uploadInProgress: PropTypes.bool,
   uploadInProgressText: PropTypes.node,

diff --git a/src/components/Filters/FilterFile/UploadFile/FileUploaderField.js b/src/components/Filters/FilterFile/UploadFile/FileUploaderField.js
@@ -1,15 +1,9 @@
 import PropTypes from 'prop-types';
 import { useState, useEffect } from 'react';
 
-import {
-  withStripes,
-  IntlConsumer,
-} from '@folio/stripes/core';
-
 import FileUploaderFieldView from './FileUploaderFieldView';
 
 const FileUploaderField = ({
-  fileLabel,
   input: { onChange, value },
   meta,
   onUploadFile,
@@ -20,7 +14,7 @@ const FileUploaderField = ({
   const [uploadInProgress, setUploadInProgress] = useState(false);
 
   useEffect(() => {
-    if (value && value.fileId) {
+    if (value?.fileId) {
       // We've been passed an initial value for the field that is an object
       // with an ID. This means we're currently showing a previously-saved file.
       // So if this is different from the file we've saved to our internal state,
@@ -31,17 +25,17 @@ const FileUploaderField = ({
     }
   }, [value, file]);
 
-  const processError = (resp, intl) => {
+  const processError = (resp) => {
     const contentType = resp.headers ? resp.headers.get('Content-Type') : '';
 
     if (contentType.startsWith('application/json')) {
       throw new Error(`${resp.message} (${resp.error})`);
     } else {
-      throw new Error(intl.formatMessage({ id: 'errors.uploadError' }));
+      throw new Error('uploadError');
     }
   };
 
-  const handleDrop = (acceptedFiles, intl) => {
+  const handleDrop = (acceptedFiles) => {
     if (acceptedFiles.length !== 1) return;
 
     let mounted = true;
@@ -62,7 +56,7 @@ const FileUploaderField = ({
             }
           });
         } else {
-          processError(response, intl);
+          processError(response);
         }
       })
       .catch(err => {
@@ -74,33 +68,19 @@ const FileUploaderField = ({
     mounted = false;
   };
 
-  const handleDelete = () => {
-    onChange(null);
-    setFile({});
-  };
-
   return (
-    /* TODO: Refactor this component to use `injectIntl` when Folio starts using react-intl 3.0 */
-    <IntlConsumer>
-      {intl => (
-        <FileUploaderFieldView
-          error={meta.error || error}
-          file={value ? file : {}}
-          fileLabel={fileLabel}
-          isDropZoneActive={isDropZoneActive}
-          onDelete={handleDelete}
-          onDragEnter={() => setIsDropZoneActive(true)}
-          onDragLeave={() => setIsDropZoneActive(false)}
-          onDrop={(data) => handleDrop(data, intl)}
-          uploadInProgress={uploadInProgress}
-        />
-      )}
-    </IntlConsumer>
+    <FileUploaderFieldView
+      error={meta.error || error}
+      isDropZoneActive={isDropZoneActive}
+      onDragEnter={() => setIsDropZoneActive(true)}
+      onDragLeave={() => setIsDropZoneActive(false)}
+      onDrop={(data) => handleDrop(data)}
+      uploadInProgress={uploadInProgress}
+    />
   );
 };
 
 FileUploaderField.propTypes = {
-  fileLabel: PropTypes.string,
   input: PropTypes.shape({
     onChange: PropTypes.func.isRequired,
     value: PropTypes.string,
@@ -109,4 +89,4 @@ FileUploaderField.propTypes = {
   onUploadFile: PropTypes.func.isRequired,
 };
 
-export default withStripes(FileUploaderField);
+export default FileUploaderField;