Improve UX when performing a long running operation #392

src/js/actions/current.js

@@ -5,7 +5,7 @@ import { exportItems, chunkedToggleTagsOnItems, chunkedAddToCollection, chunkedC
 	chunkedDeleteItems, chunkedMoveItemsToTrash, chunkedRecoverItemsFromTrash,
 	chunkedRemoveFromCollection, chunkedUpdateCollectionsTrash, chunkedDeleteCollections, createItem, createItemOfType, toggleModal, navigate } from '.';
 import columnProperties from '../constants/column-properties';
-import { BIBLIOGRAPHY, COLLECTION_SELECT, EXPORT, NEW_FILE, NEW_ITEM } from '../constants/modals';
+import { BIBLIOGRAPHY, COLLECTION_SELECT, EXPORT, NEW_ITEM } from '../constants/modals';
 import { TOGGLE_ADD, TOGGLE_REMOVE } from '../common/tags';
 
 const currentDuplicateItem = () => {
@@ -34,14 +34,6 @@ const currentNewItemModal = () => {
 	}
 }
 
-const currentNewFileModal = () => {
-	return async (dispatch, getState) => {
-		const state = getState();
-		const { collectionKey } = state.current;
-		return await dispatch(toggleModal(NEW_FILE, true, { collectionKey }));
-	}
-}
-
 const currentCreateItemOfType = (itemType) => {
 	return async (dispatch, getState) => {
 		const state = getState();
@@ -278,7 +270,6 @@ export {
 	currentExportItems,
 	currentExportItemsModal,
 	currentGoToSubscribeUrl,
-	currentNewFileModal,
 	currentNewItemModal,
 	currentRecoverFromTrash,
 	currentRemoveColoredTags,

src/js/actions/items-write.js

@@ -1342,8 +1342,10 @@ const chunkedCopyToLibrary = (itemKeys, sourceLibraryKey, ...args) => {
 		const id = getUniqueId();
 
 		dispatch({
-			count: itemKeys.length,
 			id,
+			data: {
+				count: itemKeys.length,
+			},
 			kind: 'cross-library-copy-items',
 			libraryKey: sourceLibraryKey,
 			type: BEGIN_ONGOING,
@@ -1452,15 +1454,22 @@ const createAttachments = (filesData, { linkMode = 'imported_file', collection =
 		if (libraryKey === null) {
 			libraryKey = state.current.libraryKey;
 		}
+		const data = {
+			count: filesData.length,
+			collectionKey: collection,
+			libraryKey
+		};
 
 		dispatch({
-			count: filesData.length,
 			id,
+			data,
 			kind: 'upload',
 			libraryKey,
 			type: BEGIN_ONGOING,
 		});
 
+		let createdItems;
+
 		try {
 			const attachmentTemplate = await dispatch(
 				fetchItemTemplate('attachment', linkMode)
@@ -1474,7 +1483,7 @@ const createAttachments = (filesData, { linkMode = 'imported_file', collection =
 				title: fd.fileName,
 			}));
 
-			const createdItems = await dispatch(
+			createdItems = await dispatch(
 				createItems(attachmentItems, libraryKey)
 			);
 
@@ -1495,6 +1504,10 @@ const createAttachments = (filesData, { linkMode = 'imported_file', collection =
 		} finally {
 			dispatch({
 				id,
+				data: {
+					...data,
+					createdItemsKeys: createdItems?.length ? createdItems.map(i => i.key) : []
+				},
 				kind: 'upload',
 				libraryKey,
 				type: COMPLETE_ONGOING,

src/js/component/item/actions/upload.jsx

@@ -20,7 +20,9 @@ const UploadAction = () => {
 	}, []);
 
 	const handleFileInputChange = useCallback(async ev => {
+		const target = ev.currentTarget; // persist, or it will be nullified after await
 		const filesData = await getFilesData(Array.from(ev.currentTarget.files));
+		target.value = ''; // clear the invisible input so that onChange is triggered even if the same file is selected again
 		dispatch(createAttachments(filesData, { collection: collectionKey }));
 	}, [collectionKey, dispatch]);
 

src/js/component/modal-manager.jsx

@@ -7,20 +7,19 @@ import AddItemsToCollectionsModal from './modal/add-items-to-collections';
 import AddLinkedUrlTouchModal from './modal/add-linked-url-touch';
 import BibliographyModal from './modal/bibliography';
 import ExportModal from './modal/export';
+import IdentifierPicker from './modal/identifier-picker';
 import ItemsSortModal from './modal/items-sort';
+import ManageTagsModal from './modal/manage-tags';
 import MoveCollectionsModal from './modal/move-collections';
 import NewCollectionModal from './modal/new-collection';
-import NewFileModal from './modal/new-file';
 import NewItemModal from './modal/new-item';
 import RenameCollectionModal from './modal/rename-collection';
 import SettingsModal from './modal/settings';
 import StyleInstallerModal from './modal/style-installer';
-import IdentifierPicker from './modal/identifier-picker';
-import ManageTagsModal from './modal/manage-tags';
 
 import { ADD_LINKED_URL_TOUCH, BIBLIOGRAPHY, COLLECTION_ADD, COLLECTION_RENAME, COLLECTION_SELECT,
 EXPORT, IDENTIFIER_PICKER, MANAGE_TAGS, MOVE_COLLECTION, NEW_ITEM, SETTINGS, SORT_ITEMS,
-STYLE_INSTALLER, ADD_BY_IDENTIFIER, NEW_FILE } from '../constants/modals';
+STYLE_INSTALLER, ADD_BY_IDENTIFIER, } from '../constants/modals';
 
 const lookup = {
 	[ADD_BY_IDENTIFIER]: AddByIdentifierModal,
@@ -33,11 +32,10 @@ const lookup = {
 	[IDENTIFIER_PICKER]: IdentifierPicker,
 	[MANAGE_TAGS]: ManageTagsModal,
 	[MOVE_COLLECTION]: MoveCollectionsModal,
-	[NEW_FILE]: NewFileModal,
 	[NEW_ITEM]: NewItemModal,
+	[SETTINGS]: SettingsModal,
 	[SORT_ITEMS]: ItemsSortModal,
 	[STYLE_INSTALLER]: StyleInstallerModal,
-	[SETTINGS]: SettingsModal,
 };
 
 const UNMOUNT_DELAY = 500; // to allow outro animatons (delay in ms)