#865 Write projects overview in react/javascript

* clean up
* install react-dropzone
* create component FileUploadButton

package.json

@@ -28,6 +28,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^10.0.0",
     "react-redux": "^7.2.4",
     "react-select": "^5.7.0",
     "redux": "^4.1.1",

rdmo/core/assets/js/components/FileUploadButton.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDropzone } from 'react-dropzone'
+
+const FileUploadButton = ({ acceptedTypes, buttonText, onFileDrop }) => {
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: acceptedTypes,
+    onDrop: (acceptedFiles) => {
+      if (onFileDrop) {
+        onFileDrop(acceptedFiles)
+      }
+    },
+  })
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      <button className="btn btn-link">
+        <i className="fa fa-download" aria-hidden="true"></i> {buttonText}
+      </button>
+    </div>
+  )
+}
+
+FileUploadButton.propTypes = {
+  acceptedTypes: PropTypes.string.isRequired,
+  buttonText: PropTypes.string.isRequired,
+  onFileDrop: PropTypes.func,
+}
+
+export default FileUploadButton

rdmo/core/assets/js/utils/api.js

@@ -12,27 +12,4 @@ const encodeParams = params => {
   }).join('&')
 }
 
-const getFileName = response => {
-  const disposition = response.headers.get('Content-Disposition')
-
-  if (disposition && disposition.indexOf('attachment') !== -1) {
-    let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
-    let matches = filenameRegex.exec(disposition)
-    if (matches != null && matches[1]) {
-      return matches[1].replace(/['"]/g, '')
-    }
-  } else {
-    return response.url.split('/').pop()
-  }
-}
-
-const downloadBlob = (blob, fileName) => {
-  const url = window.URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = fileName
-  a.click()
-  a.remove()
-}
-
-export { encodeParams, getFileName, downloadBlob }
+export { encodeParams }

rdmo/projects/assets/js/components/main/Projects.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Table from '../helper/Table'
 import Link from 'rdmo/core/assets/js/components/Link'
 import { SearchField } from 'rdmo/core/assets/js/components/SearchAndFilter'
+import FileUploadButton from 'rdmo/core/assets/js/components/FileUploadButton'
 import language from 'rdmo/core/assets/js/utils/language'
 import userIsManager from '../helper/userIsManager'
 import { get, isNil } from 'lodash'
@@ -165,9 +166,14 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
           <button className="btn btn-link mr-10" onClick={handleNewClick}>
             <i className="fa fa-plus" aria-hidden="true"></i> {gettext('New project')}
           </button>
-          <button className="btn btn-link" onClick={handleImportClick}>
-          <i className="fa fa-download" aria-hidden="true"></i> {gettext('Import project')}
-          </button>
+          <FileUploadButton
+           acceptedTypes="application/xml"
+           buttonText={gettext('Import project')}
+           onFileDrop={handleImportClick}
+          />
+          {/* <button className="btn btn-link" onClick={handleImportClick}>
+           <i className="fa fa-download" aria-hidden="true"></i> {gettext('Import project')}
+          </button> */}
         </div>
       </div>
       <span>{displayedRows>projects.length ? projects.length : displayedRows} {gettext('of')} {projects.length} {gettext('projects are displayed')}</span>