Add function for random emojis

ajuvonen · Sep 19, 2024 · 0bac627 · 0bac627
1 parent 7599d14
commit 0bac627
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 39 deletions.
diff --git a/src/components/ToastMessage.vue b/src/components/ToastMessage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {getRandomEmojis} from '@/utils/helpers';
 import {useElementHover, useTimeout} from '@vueuse/core';
 import {ref, watchEffect} from 'vue';
 
@@ -25,43 +26,7 @@ watchEffect(() => {
   }
 });
 
-const veggieEmojis = [
-  '🥝',
-  '🥥',
-  '🍇',
-  '🍈',
-  '🍉',
-  '🍊',
-  '🍋',
-  '🍌',
-  '🍍',
-  '🥭',
-  '🍎',
-  '🍏',
-  '🍐',
-  '🍑',
-  '🍒',
-  '🍓',
-  '🫐',
-  '🍅',
-  '🍆',
-  '🌽',
-  '🌶️',
-  '🫑',
-  '🥑',
-  '🥒',
-  '🥬',
-  '🥦',
-  '🥔',
-  '🧄',
-  '🧅',
-  '🥕',
-  '🫛',
-  '🥜',
-  '🫘',
-  '🌿',
-];
-const emoji = veggieEmojis[Math.floor(Math.random() * veggieEmojis.length)];
+const emoji = getRandomEmojis();
 </script>
 <template>
   <div
@@ -72,7 +37,7 @@ const emoji = veggieEmojis[Math.floor(Math.random() * veggieEmojis.length)];
   >
     <div class="toast-message__content">
       <span class="text-2xl" aria-hidden="true">
-        {{ emoji }}
+        {{ emoji[0] }}
       </span>
       <span>{{ text }}</span>
     </div>

diff --git a/src/components/__tests__/helpers.spec.ts b/src/components/__tests__/helpers.spec.ts
@@ -1,8 +1,9 @@
 import {describe, it, expect} from 'vitest';
 import {DateTime} from 'luxon';
 import {ALL_VEGGIES} from '@/utils/constants';
-import {dateParser, getCategoryForVeggie, getRandomVeggie} from '@/utils/helpers';
+import {dateParser, getCategoryForVeggie, getRandomEmojis, getRandomVeggie} from '@/utils/helpers';
 import {Category, type Challenge} from '@/utils/types';
+import {unique} from 'remeda';
 
 describe('helpers', () => {
   it('returns correct veggie categories', () => {
@@ -35,4 +36,9 @@ describe('helpers', () => {
     const parsed: {foo: number; bar: number} = JSON.parse('{"foo": 1, "bar": 2}', dateParser);
     expect(parsed).toEqual({foo: 1, bar: 2});
   });
+
+  it('gives unique emojis', () => {
+    const emojis = getRandomEmojis(15);
+    expect(unique(emojis)).toHaveLength(15);
+  });
 });
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -112,3 +112,47 @@ export const dateParser = (key: string, value: any) => {
   }
   return value;
 };
+
+const veggieEmojis = [
+  '🥝',
+  '🥥',
+  '🍇',
+  '🍈',
+  '🍉',
+  '🍊',
+  '🍋',
+  '🍌',
+  '🍍',
+  '🥭',
+  '🍎',
+  '🍏',
+  '🍐',
+  '🍑',
+  '🍒',
+  '🍓',
+  '🫐',
+  '🍅',
+  '🍆',
+  '🌽',
+  '🌶️',
+  '🫑',
+  '🥑',
+  '🥒',
+  '🥬',
+  '🥦',
+  '🥔',
+  '🧄',
+  '🧅',
+  '🥕',
+  '🫛',
+  '🥜',
+  '🫘',
+  '🌿',
+];
+export const getRandomEmojis = (amount: number = 1) => {
+  const emojis = new Set<string>();
+  while (emojis.size < amount) {
+    emojis.add(veggieEmojis[Math.floor(Math.random() * veggieEmojis.length)]);
+  }
+  return Array.from(emojis);
+};