merge master

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web-maker",
-	"version": "3.6.0",
+	"version": "3.6.1",
 	"description": "A blazing fast & offline web playground",
 	"scripts": {
 		"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",

src/components/Notifications.jsx

@@ -106,6 +106,12 @@ export function Notifications(props) {
 		<div>
 			<h1>Whats new?</h1>
 
+			<Notification version="3.6.1" {...props} isLatest={true}>
+				<NotificationItem type="bug">
+					Failing to import local creations when logging in.
+				</NotificationItem>
+			</Notification>
+
 			<Notification version="3.6.0" {...props}>
 				<li>
 					<strong>New Setting</strong>: Configure if you want to auto-close the
@@ -135,7 +141,7 @@ export function Notifications(props) {
 				</li>
 			</Notification>
 
-			<Notification version="3.5.1" isLatest={true} {...props}>
+			<Notification version="3.5.1" {...props}>
 				<li>
 					<strong>Hidden Prettier</strong>: Selecting code and pressing
 					Shift+Tab now uses Prettier to auto-format. This will improve UX wise

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

@@ -77,7 +77,7 @@ const LocalStorageKeys = {
 	ASKED_TO_IMPORT_CREATIONS: 'askedToImportCreations'
 };
 const UNSAVED_WARNING_COUNT = 15;
-const version = '3.6.0';
+const version = '3.6.1';
 
 export default class App extends Component {
 	constructor() {
@@ -443,7 +443,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();
@@ -462,6 +465,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) {
@@ -1129,6 +1135,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
 	 */
@@ -1524,6 +1579,7 @@ export default class App extends Component {
 						)}
 						itemForkBtnClickHandler={this.itemForkBtnClickHandler.bind(this)}
 						exportBtnClickHandler={this.exportBtnClickHandler.bind(this)}
+						mergeImportedItems={this.mergeImportedItems.bind(this)}
 					/>
 
 					<Alerts />

src/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Web Maker",
-	"version": "3.6.0",
+	"version": "3.6.1",
 	"manifest_version": 2,
 	"description": "Blazing fast & offline playground for your web experiments",
 	"homepage_url": "https://webmakerapp.com",

src/options.html

@@ -37,7 +37,7 @@
 <body>
 	<h3>Settings
 		<span style="opacity: 0.6;font-size:0.7em;">
-			v3.6.0</span>
+			v3.6.1</span>
 	</h3>
 	<form name="optionsForm">
 		<label>

src/utils.js

@@ -16,7 +16,12 @@ window.chrome.i18n = {
 
 window.$all = selector => [...document.querySelectorAll(selector)];
 window.IS_EXTENSION = !!window.chrome.extension;
-export const BASE_PATH = window.chrome.extension || window.DEBUG ? '/' : '/app';
+export const BASE_PATH =
+	window.chrome.extension ||
+	window.DEBUG ||
+	process.env.NODE_ENV === 'development'
+		? '/'
+		: '/app';
 
 var alphaNum = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';