1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-04-11 14:22:00 +02:00

fix items pane and logout/login btn

This commit is contained in:
Kushagra Gour 2019-07-17 11:30:39 +05:30
parent 455babbf19
commit 6ffb623ece
3 changed files with 61 additions and 51 deletions

@ -95,30 +95,33 @@ export function MainHeader(props) {
</svg>
<Trans>Open</Trans>
</button>
<Button
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
class="hide-on-login 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"
>
<img
id="headerAvatarImg"
width="20"
src={
props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''
}
class="main-header__avatar-img"
/>
</Button>
{!props.user ? (
<Button
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
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="btn--dark hint--rounded hint--bottom-left"
>
<img
id="headerAvatarImg"
width="20"
src={
props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''
}
class="main-header__avatar-img"
/>
</Button>
)}
</div>
</div>
)}

@ -303,11 +303,14 @@ export default class App extends Component {
}
updateProfileUi() {
if (this.state.user) {
document.body.classList.add('is-logged-in');
} else {
document.body.classList.remove('is-logged-in');
}
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({
savedItems: { ...this.state.savedItems }
});
// this.setState({
// 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({
isSavedItemPaneOpen:
shouldOpen === undefined ? !this.state.isSavedItemPaneOpen : shouldOpen
});
this.setState(prevState => {
const isSavedItemPaneOpen =
shouldOpen === undefined ? !prevState.isSavedItemPaneOpen : shouldOpen;
document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
'overlay-visible'
);
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
// savedItems object and hence, no match happens for `existingItemIds`.
if (savedItems[item.id]) {
// When we are merging to cloud, savedItems contains the local items. And if we start matching,
// all items will match with themselves and nothing would import :P
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();
});

@ -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([]);