#865 Write projects overview in react/javascript

* get rid of useEffect, useState * pass importFile directly to FileUploadButton
rdmorganiser · Mar 18, 2024 · 7d28f95 · 7d28f95
1 parent 75ee37f
commit 7d28f95
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git a/rdmo/core/assets/js/components/FileUploadButton.js b/rdmo/core/assets/js/components/FileUploadButton.js
@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useDropzone } from 'react-dropzone'
 
-const FileUploadButton = ({ acceptedTypes, buttonProps, buttonText, setUploadFile }) => {
+const FileUploadButton = ({ acceptedTypes, buttonProps, buttonText, importFile }) => {
   const { getRootProps, getInputProps } = useDropzone({
     accept: acceptedTypes,
     onDrop: acceptedFiles => {
       if (acceptedFiles.length > 0) {
-        setUploadFile(acceptedFiles[0])
+        importFile(acceptedFiles[0])
       }
     }
   })
@@ -26,7 +26,7 @@ FileUploadButton.propTypes = {
   acceptedTypes: PropTypes.arrayOf(PropTypes.string),
   buttonProps: PropTypes.object,
   buttonText: PropTypes.string.isRequired,
-  setUploadFile: PropTypes.func.isRequired
+  importFile: PropTypes.func.isRequired,
 }
 
 export default FileUploadButton
diff --git a/rdmo/projects/assets/js/components/main/Projects.js b/rdmo/projects/assets/js/components/main/Projects.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Table from '../helper/Table'
 import Link from 'rdmo/core/assets/js/components/Link'
@@ -13,14 +13,6 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
   const { currentUser } = currentUserObject
   const { myProjects } = config
 
-  const [uploadFile, setUploadFile] = useState(null)
-
-  useEffect(() => {
-    if (uploadFile) {
-      handleImport(uploadFile)
-    }
-  }, [uploadFile])
-
   const displayedRows = get(config, 'table.rows')
 
   const currentUserId = currentUser.id
@@ -56,14 +48,11 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
     projectsActions.fetchAllProjects()()
   }
 
-  const handleNew= () => {
+  const handleNew = () => {
     window.location.href = `${baseUrl}/projects/create`
   }
 
-  const handleImport = (file) => {
-    projectsActions.uploadProject('/projects/import/', file)
-    setUploadFile(null)
-  }
+  const handleImport = (file) => projectsActions.uploadProject('/projects/import/', file)
 
   const getParentPath = (parentId, pathArray = []) => {
     const parent = projects.find((project) => project.id === parentId)
@@ -181,7 +170,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
            acceptedTypes={['application/xml', 'text/xml']}
            buttonProps={buttonProps}
            buttonText={gettext('Import project')}
-           setUploadFile={setUploadFile}
+           importFile={handleImport}
           />
         </div>
       </div>