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 || {}),
   );
 });