fix: issue of get icons (#58)

src/utils/emoji.ts

@@ -2,7 +2,27 @@ import { renderColor } from '@/utils/color';
 import { EmojiMartData } from '@emoji-mart/data';
 import axios from 'axios';
 
-export async function randomEmoji (skin = 0) {
+const http = axios.create();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const pendingRequests: Map<string, Promise<any>> = new Map();
+
+async function httpGet(url: string) {
+  if(pendingRequests.has(url)) {
+    return pendingRequests.get(url);
+  }
+
+  const request = http.get(url).then((res) => {
+    pendingRequests.delete(url);
+    return res;
+  });
+
+  pendingRequests.set(url, request);
+
+  return request;
+}
+
+export async function randomEmoji(skin = 0) {
   const emojiData = await loadEmojiData();
   const emojis = (emojiData as EmojiMartData).emojis;
   const keys = Object.keys(emojis);
@@ -11,11 +31,11 @@ export async function randomEmoji (skin = 0) {
   return emojis[randomKey].skins[skin].native;
 }
 
-export async function loadEmojiData () {
+export async function loadEmojiData() {
   return import('@emoji-mart/data/sets/15/native.json');
 }
 
-export function isFlagEmoji (emoji: string) {
+export function isFlagEmoji(emoji: string) {
   return /\uD83C[\uDDE6-\uDDFF]/.test(emoji);
 }
 
@@ -46,7 +66,7 @@ let icons: Record<ICON_CATEGORY,
     keywords: string[];
   }[]> | undefined;
 
-export async function loadIcons (): Promise<
+export async function loadIcons(): Promise<
   Record<
     ICON_CATEGORY,
     {
@@ -57,20 +77,21 @@ export async function loadIcons (): Promise<
     }[]
   >
 > {
-  if (icons) {
+  if(icons) {
     return icons;
   }
 
-  return axios.get('/af_icons/icons.json').then((res) => {
+  return httpGet('/af_icons/icons.json').then((res) => {
     icons = res.data;
     return res.data;
   });
 }
 
-export async function getIconBase64 (id: string, color: string) {
+export async function getIconBase64(id: string, color: string) {
   try {
-    const response = await fetch(`/af_icons/${id}.svg`);
+    const response = await httpGet(`/af_icons/${id}.svg`);
-    let svgText = await response.text();
+
+    let svgText = response.data as string;
 
     svgText = svgText.replace(/fill="[^"]*"/g, ``);
     svgText = svgText.replace('<svg', `<svg fill="${renderColor(color)}"`);
@@ -78,13 +99,13 @@ export async function getIconBase64 (id: string, color: string) {
     const base64String = btoa(svgText);
 
     return `data:image/svg+xml;base64,${base64String}`;
-  } catch (error) {
+  } catch(error) {
     console.error('Error setting favicon:', error);
     return '';
   }
 }
 
-export async function randomIcon () {
+export async function randomIcon() {
   const icons = await loadIcons();
   const categories = Object.keys(icons);
   const randomCategory = categories[Math.floor(Math.random() * categories.length)] as ICON_CATEGORY;
@@ -93,12 +114,12 @@ export async function randomIcon () {
   return randomIcon;
 }
 
-export async function getIcon (id: string) {
+export async function getIcon(id: string) {
   const icons = await loadIcons();
 
-  for (const category of Object.keys(icons)) {
+  for(const category of Object.keys(icons)) {
-    for (const icon of icons[category as ICON_CATEGORY]) {
+    for(const icon of icons[category as ICON_CATEGORY]) {
-      if (icon.id === id) {
+      if(icon.id === id) {
         return icon;
       }
     }