Fix import of items when logging in. fixes #316

src/components/SavedItemPane.jsx

@@ -88,54 +88,6 @@ export default class SavedItemPane extends Component {
 		}
 	}
 
-	mergeImportedItems(items) {
-		var existingItemIds = [];
-		var toMergeItems = {};
-		const d = deferred();
-		const savedItems = {};
-		this.items.forEach(item => (savedItems[item.id] = item));
-		items.forEach(item => {
-			// We can access `savedItems` here because this gets set when user
-			// opens the saved creations panel. And import option is available
-			// inside the saved items panel.
-			if (savedItems[item.id]) {
-				// Item already exists
-				existingItemIds.push(item.id);
-			} else {
-				log('merging', item.id);
-				toMergeItems[item.id] = item;
-			}
-		});
-		var mergedItemCount = items.length - existingItemIds.length;
-		if (existingItemIds.length) {
-			var shouldReplace = confirm(
-				existingItemIds.length +
-					' creations already exist. Do you want to replace them?'
-			);
-			if (shouldReplace) {
-				log('shouldreplace', shouldReplace);
-				items.forEach(item => {
-					toMergeItems[item.id] = item;
-				});
-				mergedItemCount = items.length;
-			}
-		}
-		if (mergedItemCount) {
-			itemService.saveItems(toMergeItems).then(() => {
-				d.resolve();
-				alertsService.add(
-					mergedItemCount + ' creations imported successfully.'
-				);
-				trackEvent('fn', 'itemsImported', mergedItemCount);
-			});
-		} else {
-			d.resolve();
-		}
-		this.props.closeHandler();
-
-		return d.promise;
-	}
-
 	importFileChangeHandler(e) {
 		var file = e.target.files[0];
 
@@ -145,7 +97,7 @@ export default class SavedItemPane extends Component {
 			try {
 				items = JSON.parse(progressEvent.target.result);
 				log(items);
-				this.mergeImportedItems(items);
+				this.props.mergeImportedItems(items);
 			} catch (exception) {
 				log(exception);
 				alert(

src/components/app.jsx

@@ -352,7 +352,10 @@ export default class App extends Component {
 		// setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
 	}
 	toggleSavedItemsPane(shouldOpen) {
-		this.setState({ isSavedItemPaneOpen: !this.state.isSavedItemPaneOpen });
+		this.setState({
+			isSavedItemPaneOpen:
+				shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
+		});
 
 		if (this.state.isSavedItemPaneOpen) {
 			window.searchInput.focus();
@@ -371,6 +374,9 @@ export default class App extends Component {
 	 */
 	async fetchItems(shouldSaveGlobally, shouldFetchLocally) {
 		var d = deferred();
+		// HACK: This empty assignment is being used when importing locally saved items
+		// to cloud, `fetchItems` runs once on account login which clears the
+		// savedItems object and hence, while merging no saved item matches with itself.
 		this.state.savedItems = {};
 		var items = [];
 		if (window.user && !shouldFetchLocally) {
@@ -973,6 +979,55 @@ export default class App extends Component {
 		}
 	}
 
+	mergeImportedItems(items) {
+		var existingItemIds = [];
+		var toMergeItems = {};
+		const d = deferred();
+		const { savedItems } = this.state;
+		items.forEach(item => {
+			// We can access `savedItems` here because this gets set when user
+			// opens the saved creations panel. And import option is available
+			// inside the saved items panel.
+			// HACK: Also when this fn is called for importing locally saved items
+			// to cloud, `fetchItems` runs once on account login which clears the
+			// savedItems object and hence, no match happens for `existingItemIds`.
+			if (savedItems[item.id]) {
+				// Item already exists
+				existingItemIds.push(item.id);
+			} else {
+				log('merging', item.id);
+				toMergeItems[item.id] = item;
+			}
+		});
+		var mergedItemCount = items.length - existingItemIds.length;
+		if (existingItemIds.length) {
+			var shouldReplace = confirm(
+				existingItemIds.length +
+					' creations already exist. Do you want to replace them?'
+			);
+			if (shouldReplace) {
+				log('shouldreplace', shouldReplace);
+				items.forEach(item => {
+					toMergeItems[item.id] = item;
+				});
+				mergedItemCount = items.length;
+			}
+		}
+		if (mergedItemCount) {
+			itemService.saveItems(toMergeItems).then(() => {
+				d.resolve();
+				alertsService.add(
+					mergedItemCount + ' creations imported successfully.'
+				);
+				trackEvent('fn', 'itemsImported', mergedItemCount);
+			});
+		} else {
+			d.resolve();
+		}
+		this.closeSavedItemsPane();
+		return d.promise;
+	}
+
 	/**
 	 * Called from inside ask-to-import-modal
 	 */
@@ -1229,6 +1284,7 @@ export default class App extends Component {
 					itemRemoveBtnClickHandler={this.itemRemoveBtnClickHandler.bind(this)}
 					itemForkBtnClickHandler={this.itemForkBtnClickHandler.bind(this)}
 					exportBtnClickHandler={this.exportBtnClickHandler.bind(this)}
+					mergeImportedItems={this.mergeImportedItems.bind(this)}
 				/>
 
 				<Alerts />