simplify emoji-picker recent usage logic

This commit is contained in:
Joffrey JAFFEUX 2017-07-19 22:48:46 +02:00
parent 0112b9aa43
commit bb7241ccc2
2 changed files with 15 additions and 23 deletions

View File

@ -34,7 +34,10 @@ export default Ember.Component.extend({
$modal = this.$(".emoji-picker-modal"); $modal = this.$(".emoji-picker-modal");
if (!keyValueStore.getObject(EMOJI_USAGE)) { if (!keyValueStore.getObject(EMOJI_USAGE)) {
keyValueStore.setObject({ key: EMOJI_USAGE, value: {} }); keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
} else if(_.isPlainObject(keyValueStore.getObject(EMOJI_USAGE))) {
// handle legacy format
keyValueStore.setObject({ key: EMOJI_USAGE, value: _.keys(keyValueStore.getObject(EMOJI_USAGE)) });
} }
}, },
@ -80,8 +83,8 @@ export default Ember.Component.extend({
$recentSection.css("height", "auto").show(); $recentSection.css("height", "auto").show();
} }
const recentEmojis = _.map(this.get("recentEmojis"), emoji => { const recentEmojis = _.map(this.get("recentEmojis"), code => {
return { code: emoji.title, src: emojiUrlFor(emoji.title) }; return { code, src: emojiUrlFor(code) };
}); });
const model = { recentEmojis }; const model = { recentEmojis };
const template = recentTemplate(model); const template = recentTemplate(model);
@ -108,7 +111,7 @@ export default Ember.Component.extend({
$list = $picker.find(".list"); $list = $picker.find(".list");
this.set("selectedDiversity", keyValueStore.getObject(EMOJI_SELECTED_DIVERSITY) || 1); this.set("selectedDiversity", keyValueStore.getObject(EMOJI_SELECTED_DIVERSITY) || 1);
this.set("recentEmojis", _.map(keyValueStore.getObject(EMOJI_USAGE) || {}).sort(this._sortByUsage).slice(0, PER_ROW)); this.set("recentEmojis", keyValueStore.getObject(EMOJI_USAGE) || []);
this._bindEvents(); this._bindEvents();
@ -231,8 +234,8 @@ export default Ember.Component.extend({
_bindClearRecentEmojisGroup() { _bindClearRecentEmojisGroup() {
const $recent = $picker.find(".section[data-section='recent'] .clear-recent"); const $recent = $picker.find(".section[data-section='recent'] .clear-recent");
$recent.on("click", () => { $recent.on("click", () => {
keyValueStore.setObject({ key: EMOJI_USAGE, value: {} }); keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
this.set("recentEmojis", {}); this.set("recentEmojis", []);
this._scrollTo(0); this._scrollTo(0);
return false; return false;
}); });
@ -407,23 +410,12 @@ export default Ember.Component.extend({
}, },
_trackEmojiUsage(code) { _trackEmojiUsage(code) {
const recent = keyValueStore.getObject(EMOJI_USAGE) || {}; let recent = keyValueStore.getObject(EMOJI_USAGE) || [];
recent = recent.filter(r => r !== code);
if (!recent[code]) { recent.unshift(code);
// keeping title here for legacy reasons, might migrate later recent.length = Math.min(recent.length, PER_ROW);
recent[code] = { title: code, usage: 0 };
}
recent[code]["usage"]++;
keyValueStore.setObject({ key: EMOJI_USAGE, value: recent }); keyValueStore.setObject({ key: EMOJI_USAGE, value: recent });
this.set("recentEmojis", recent);
this.set("recentEmojis", _.map(recent).sort(this._sortByUsage).slice(0, PER_ROW));
},
_sortByUsage(a, b) {
if (a.usage > b.usage) { return -1; }
if (b.usage > a.usage) { return 1; }
return a.title.localeCompare(b.title);
}, },
_scrollTo(y) { _scrollTo(y) {

View File

@ -10,7 +10,7 @@ import {
acceptance("EmojiPicker", { acceptance("EmojiPicker", {
loggedIn: true, loggedIn: true,
beforeEach() { beforeEach() {
keyValueStore.setObject({ key: EMOJI_USAGE, value: {} }); keyValueStore.setObject({ key: EMOJI_USAGE, value: [] });
keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 }); keyValueStore.setObject({ key: EMOJI_SCROLL_Y, value: 0 });
keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 }); keyValueStore.setObject({ key: EMOJI_SELECTED_DIVERSITY, value: 1 });
} }