Moved some re-used values into constants file

app/assets/javascripts/emoji/components/picker.vue

@@ -3,7 +3,7 @@ import { GlIcon, GlDropdown, GlSearchBoxByType } from '@gitlab/ui';
 import { findLastIndex } from 'lodash';
 import VirtualList from 'vue-virtual-scroll-list';
 import { CATEGORY_NAMES } from '~/emoji';
-import { CATEGORY_ICON_MAP } from '../constants';
+import { CATEGORY_ICON_MAP, FREQUENTLY_USED_KEY } from '../constants';
 import Category from './category.vue';
 import EmojiList from './emoji_list.vue';
 import { addToFrequentlyUsed, getEmojiCategories, hasFrequentlyUsedEmojis } from './utils';
@@ -33,7 +33,7 @@ export default {
   computed: {
     categoryNames() {
       return CATEGORY_NAMES.filter((c) => {
-        if (c === 'frequently_used') return hasFrequentlyUsedEmojis();
+        if (c === FREQUENTLY_USED_KEY) return hasFrequentlyUsedEmojis();
         return true;
       }).map((category) => ({
         name: category,

app/assets/javascripts/emoji/components/utils.js

 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_emojis');
+  const savedEmojis = Cookies.get(FREQUENTLY_USED_COOKIE_KEY);
 
   if (!savedEmojis) return null;
 
@@ -24,13 +30,13 @@ export const getFrequentlyUsedEmojis = () => {
 
 export const addToFrequentlyUsed = (emoji) => {
   const frequentlyUsedEmojis = uniq(
-    (Cookies.get('frequently_used_emojis') || '')
+    (Cookies.get(FREQUENTLY_USED_COOKIE_KEY) || '')
       .split(',')
       .filter((e) => e)
       .concat(emoji),
   );
 
-  Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });
+  Cookies.set(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','), { expires: 365 });
 };
 
 export const hasFrequentlyUsedEmojis = () => getFrequentlyUsedEmojis() !== null;
@@ -46,7 +52,7 @@ export const getEmojiCategories = memoize(async () => {
 
   return Object.freeze(
     Object.keys(categories)
-      .filter((c) => c !== 'frequently_used')
+      .filter((c) => c !== FREQUENTLY_USED_KEY)
       .reduce((acc, category) => {
         const emojis = chunk(categories[category], EMOJIS_PER_ROW);
         const height = generateCategoryHeight(emojis.length);

app/assets/javascripts/emoji/constants.js

+export const FREQUENTLY_USED_KEY = 'frequently_used';
+export const FREQUENTLY_USED_COOKIE_KEY = 'frequently_used_emojis';
+
 export const CATEGORY_ICON_MAP = {
-  frequently_used: 'history',
+  [FREQUENTLY_USED_KEY]: 'history',
   activity: 'dumbbell',
   people: 'smiley',
   nature: 'nature',