fix items pane and logout/login btn

src/components/MainHeader.jsx

@@ -95,20 +95,22 @@ export function MainHeader(props) {
 							</svg>
 							<Trans>Open</Trans>
 						</button>
+						{!props.user ? (
 							<Button
 								onClick={props.loginBtnHandler}
 								data-event-category="ui"
 								data-event-action="loginButtonClick"
-							class="hide-on-login btn btn--dark hint--rounded  hint--bottom-left"
+								class="btn btn--dark hint--rounded  hint--bottom-left"
 							>
 								<Trans>Login/Signup</Trans>
 							</Button>
+						) : (
 							<Button
 								onClick={props.profileBtnHandler}
 								data-event-category="ui"
 								data-event-action="headerAvatarClick"
 								aria-label={i18n._(t`See profile or Logout`)}
-							class="hide-on-logout btn--dark hint--rounded  hint--bottom-left"
+								class="btn--dark hint--rounded  hint--bottom-left"
 							>
 								<img
 									id="headerAvatarImg"
@@ -119,6 +121,7 @@ export function MainHeader(props) {
 									class="main-header__avatar-img"
 								/>
 							</Button>
+						)}
 					</div>
 				</div>
 			)}

src/components/app.jsx

@@ -303,11 +303,14 @@ export default class App extends Component {
 	}
 
 	updateProfileUi() {
-		if (this.state.user) {
+		this.setState(prevState => {
+			if (prevState.user) {
 				document.body.classList.add('is-logged-in');
 			} else {
 				document.body.classList.remove('is-logged-in');
 			}
+			return null;
+		});
 	}
 
 	refreshEditor() {
@@ -464,23 +467,27 @@ export default class App extends Component {
 
 	populateItemsInSavedPane(items) {
 		// TODO: sort desc. by updation date
-		this.setState({
+		// this.setState({
-			savedItems: { ...this.state.savedItems }
+		// 	savedItems: { ...this.state.savedItems }
-		});
+		// });
 
 		this.toggleSavedItemsPane();
 		// HACK: Set overflow after sometime so that the items can animate without getting cropped.
 		// setTimeout(() => $('#js-saved-items-wrap').style.overflowY = 'auto', 1000);
 	}
 	toggleSavedItemsPane(shouldOpen) {
-		this.setState({
+		this.setState(prevState => {
-			isSavedItemPaneOpen:
+			const isSavedItemPaneOpen =
-				shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
+				shouldOpen === undefined ? !prevState.isSavedItemPaneOpen : shouldOpen;
-		});
 
-		document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
+			document.body.classList[isSavedItemPaneOpen ? 'add' : 'remove'](
 				'overlay-visible'
 			);
+
+			return {
+				isSavedItemPaneOpen
+			};
+		});
 	}
 
 	/**
@@ -490,17 +497,17 @@ export default class App extends Component {
 	 * @return {promise}                    Promise.
 	 */
 	async fetchItems(shouldSaveGlobally, shouldFetchLocally) {
-		// 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 = [];
+		const savedItems = {};
 
 		items = await itemService.getAllItems(shouldFetchLocally);
 		trackEvent('fn', 'fetchItems', items.length);
 		if (shouldSaveGlobally) {
 			items.forEach(item => {
-				this.state.savedItems[item.id] = item;
+				savedItems[item.id] = item;
+			});
+			this.setState({
+				savedItems
 			});
 		}
 		return items;
@@ -1178,7 +1185,7 @@ export default class App extends Component {
 		}
 	}
 
-	mergeImportedItems(items) {
+	mergeImportedItems(items, isMergingToCloud = false) {
 		var existingItemIds = [];
 		var toMergeItems = {};
 		const d = deferred();
@@ -1187,10 +1194,10 @@ export default class App extends Component {
 			// 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
+			// When we are merging to cloud, savedItems contains the local items. And if we start matching,
-			// savedItems object and hence, no match happens for `existingItemIds`.
+			// all items will match with themselves and nothing would import :P
-			if (savedItems[item.id]) {
+			if (!isMergingToCloud && savedItems[item.id]) {
 				// Item already exists
 				existingItemIds.push(item.id);
 			} else {
@@ -1231,7 +1238,7 @@ export default class App extends Component {
 	 * Called from inside ask-to-import-modal
 	 */
 	importCreationsAndSettingsIntoApp() {
-		this.mergeImportedItems(this.oldSavedItems).then(() => {
+		this.mergeImportedItems(this.oldSavedItems, true).then(() => {
 			trackEvent('fn', 'oldItemsImported');
 			this.dontAskToImportAnymore();
 		});

src/itemService.js

@@ -39,7 +39,7 @@ export const itemService = {
 		var d = deferred();
 		let itemIds = await this.getUserItemIds(shouldFetchLocally);
 		itemIds = Object.getOwnPropertyNames(itemIds || {});
-		log('itemids', itemIds);
+		// log('itemids', itemIds);
 
 		if (!itemIds.length) {
 			d.resolve([]);