diff options
Diffstat (limited to 'app/assets/javascripts/emoji/components/utils.js')
-rw-r--r-- | app/assets/javascripts/emoji/components/utils.js | 69 |
1 files changed, 55 insertions, 14 deletions
diff --git a/app/assets/javascripts/emoji/components/utils.js b/app/assets/javascripts/emoji/components/utils.js index b95b56a1d6f..3465a8ae7e6 100644 --- a/app/assets/javascripts/emoji/components/utils.js +++ b/app/assets/javascripts/emoji/components/utils.js @@ -1,27 +1,68 @@ -import { chunk, memoize } from 'lodash'; +import Cookies from 'js-cookie'; +import { chunk, memoize, uniq } from 'lodash'; import { initEmojiMap, getEmojiCategoryMap } from '~/emoji'; -import { EMOJIS_PER_ROW, EMOJI_ROW_HEIGHT, CATEGORY_ROW_HEIGHT } from '../constants'; +import { + EMOJIS_PER_ROW, + EMOJI_ROW_HEIGHT, + CATEGORY_ROW_HEIGHT, + FREQUENTLY_USED_KEY, + FREQUENTLY_USED_COOKIE_KEY, +} from '../constants'; export const generateCategoryHeight = (emojisLength) => emojisLength * EMOJI_ROW_HEIGHT + CATEGORY_ROW_HEIGHT; +export const getFrequentlyUsedEmojis = () => { + const savedEmojis = Cookies.get(FREQUENTLY_USED_COOKIE_KEY); + + if (!savedEmojis) return null; + + const emojis = chunk(uniq(savedEmojis.split(',')), 9); + + return { + frequently_used: { + emojis, + top: 0, + height: generateCategoryHeight(emojis.length), + }, + }; +}; + +export const addToFrequentlyUsed = (emoji) => { + const frequentlyUsedEmojis = uniq( + (Cookies.get(FREQUENTLY_USED_COOKIE_KEY) || '') + .split(',') + .filter((e) => e) + .concat(emoji), + ); + + Cookies.set(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','), { expires: 365 }); +}; + +export const hasFrequentlyUsedEmojis = () => getFrequentlyUsedEmojis() !== null; + export const getEmojiCategories = memoize(async () => { await initEmojiMap(); const categories = await getEmojiCategoryMap(); - let top = 0; + const frequentlyUsedEmojis = getFrequentlyUsedEmojis(); + let top = frequentlyUsedEmojis + ? frequentlyUsedEmojis.frequently_used.top + frequentlyUsedEmojis.frequently_used.height + : 0; return Object.freeze( - Object.keys(categories).reduce((acc, category) => { - const emojis = chunk(categories[category], EMOJIS_PER_ROW); - const height = generateCategoryHeight(emojis.length); - const newAcc = { - ...acc, - [category]: { emojis, height, top }, - }; - top += height; - - return newAcc; - }, {}), + Object.keys(categories) + .filter((c) => c !== FREQUENTLY_USED_KEY) + .reduce((acc, category) => { + const emojis = chunk(categories[category], EMOJIS_PER_ROW); + const height = generateCategoryHeight(emojis.length); + const newAcc = { + ...acc, + [category]: { emojis, height, top }, + }; + top += height; + + return newAcc; + }, frequentlyUsedEmojis || {}), ); }); |