Fixing logic to post metadata on file upload (#1054)

* Fixing logic to post metadata on file upload

* removing location.reload

Author: ddey2

frontend/src/components/datasets/Dataset.tsx

@@ -138,6 +138,7 @@ export const Dataset = (): JSX.Element => {
 	);
 	const adminMode = useSelector((state: RootState) => state.user.adminMode);
 	const license = useSelector((state: RootState) => state.dataset.license);
+	const newFiles = useSelector((state: RootState) => state.dataset.newFiles);
 	const deletedFile = useSelector(
 		(state: RootState) => state.dataset.deletedFile
 	);
@@ -170,7 +171,7 @@ export const Dataset = (): JSX.Element => {
 			listDatasetLicense(about.license_id);
 		getFolderPath(folderId);
 		getMetadatDefinitions(null, 0, 100);
-	}, [searchParams, adminMode, about.license_id]);
+	}, [searchParams, adminMode, about.license_id, newFiles]);
 
 	useEffect(() => {
 		fetchFoldersFilesInDataset(

frontend/src/components/datasets/NewMenu.tsx

@@ -12,8 +12,6 @@ import { CreateFolder } from "../folders/CreateFolder";
 import React from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../types/data";
-import { UploadFile } from "../files/UploadFile";
-import { UploadFileMultiple } from "../files/UploadFileMultiple";
 import { UploadFileDragAndDrop } from "../files/UploadFileDragAndDrop";
 import UploadIcon from "@mui/icons-material/Upload";
 import { Folder } from "@material-ui/icons";
@@ -57,6 +55,7 @@ export const NewMenu = (props: ActionsMenuProps): JSX.Element => {
 				<UploadFileDragAndDrop
 					selectedDatasetId={datasetId}
 					folderId={folderId}
+					setDragDropFiles={setDragDropFiles}
 				/>
 			</Dialog>
 

frontend/src/components/files/UploadFile.tsx

@@ -30,12 +30,13 @@ import FileUploadDrop from "./FileUploadDrop";
 type UploadFileDragAndDropProps = {
 	selectedDatasetId: string | undefined;
 	folderId: string | undefined;
+	setDragDropFiles: any;
 };
 
 export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 	props: UploadFileDragAndDropProps
 ) => {
-	const { selectedDatasetId, folderId } = props;
+	const { selectedDatasetId, folderId, setDragDropFiles } = props;
 	const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
 	const [metadataRequestForms, setMetadataRequestForms] = useState({});
 	const [allFilled, setAllFilled] = React.useState<boolean>(false);
@@ -53,7 +54,9 @@ export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 	const createFileMetadata = (
 		fileId: string | undefined,
 		metadata: MetadataIn
-	) => dispatch(postFileMetadata(fileId, metadata));
+	) => {
+		dispatch(postFileMetadata(fileId, metadata));
+	};
 
 	const uploadFiles = (
 		selectedDatasetId: string | undefined,
@@ -157,9 +160,9 @@ export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 
 	useEffect(() => {
 		if (newFiles.length > 0) {
-			newFiles.map((file) => {
+			newFiles.forEach((file) => {
 				// post new metadata
-				Object.keys(metadataRequestForms).map((key) => {
+				Object.keys(metadataRequestForms).forEach((key) => {
 					createFileMetadata(file.id, metadataRequestForms[key]);
 				});
 			});
@@ -171,8 +174,7 @@ export const UploadFileDragAndDrop: React.FC<UploadFileDragAndDropProps> = (
 			// Stop spinner
 			setLoading(false);
 
-			// go back to the dataset
-			location.reload();
+			setDragDropFiles(false);
 		}
 	}, [newFiles]);