From 39c3995c74380a5b9b473583594966c26c008777 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 9 Jan 2023 16:45:05 +0900
Subject: [PATCH] refactor

---
 .../src/components/MkAutocomplete.vue         |  4 +---
 .../frontend/src/components/MkEmojiPicker.vue | 14 +++----------
 packages/frontend/src/custom-emojis.ts        | 21 +++++++++----------
 packages/frontend/src/pages/about.emojis.vue  |  7 +++----
 .../src/pages/admin/emoji-edit-dialog.vue     |  2 +-
 .../src/pages/admin/overview.stats.vue        |  4 +---
 .../frontend/src/pages/mfm-cheat-sheet.vue    |  4 +---
 7 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 0d0c5edbae..b184e4489e 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -47,9 +47,7 @@ import { emojilist } from '@/scripts/emojilist';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 import { miLocalStorage } from '@/local-storage';
-import { getCustomEmojis } from '@/custom-emojis';
-
-const customEmojis = await getCustomEmojis();
+import { customEmojis } from '@/custom-emojis';
 
 type EmojiDef = {
 	emoji: string;
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 18950b18d3..a34326822f 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer, asWindow }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
 	<input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()">
-	<div v-if="customEmojis != null && customEmojiCategories != null" ref="emojisEl" class="emojis">
+	<div ref="emojisEl" class="emojis">
 		<section class="result">
 			<div v-if="searchResultCustom.length > 0" class="body">
 				<button
@@ -88,7 +88,7 @@ import { deviceKind } from '@/scripts/device-kind';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
-import { getCustomEmojiCategories, getCustomEmojis } from '@/custom-emojis';
+import { getCustomEmojiCategories, customEmojis } from '@/custom-emojis';
 
 const props = withDefaults(defineProps<{
 	showPinned?: boolean;
@@ -104,15 +104,7 @@ const emit = defineEmits<{
 	(ev: 'chosen', v: string): void;
 }>();
 
-let customEmojis = $ref(null);
-getCustomEmojis().then((x) => {
-	customEmojis = x;
-});
-let customEmojiCategories = $ref(null);
-getCustomEmojiCategories().then((x) => {
-	customEmojiCategories = x;
-});
-
+const customEmojiCategories = getCustomEmojiCategories();
 const search = shallowRef<HTMLInputElement>();
 const emojisEl = shallowRef<HTMLDivElement>();
 
diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 2a52753f84..19469999b6 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -2,25 +2,26 @@ import { api } from './os';
 import { miLocalStorage } from './local-storage';
 
 const storageCache = miLocalStorage.getItem('emojis');
-let cached = storageCache ? JSON.parse(storageCache) : null;
-export async function getCustomEmojis() {
+export let customEmojis = storageCache ? JSON.parse(storageCache) : [];
+
+fetchCustomEmojis();
+
+export async function fetchCustomEmojis() {
 	const now = Date.now();
 	const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-	if (cached && lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return cached;
+	if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
 
 	const res = await api('emojis', {});
 
-	cached = res.emojis;
-	miLocalStorage.setItem('emojis', JSON.stringify(cached));
+	customEmojis = res.emojis;
+	miLocalStorage.setItem('emojis', JSON.stringify(customEmojis));
 	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
 }
 
 let cachedCategories;
-export async function getCustomEmojiCategories() {
+export function getCustomEmojiCategories() {
 	if (cachedCategories) return cachedCategories;
 
-	const customEmojis = await getCustomEmojis();
-
 	const categories = new Set();
 	for (const emoji of customEmojis) {
 		categories.add(emoji.category);
@@ -31,11 +32,9 @@ export async function getCustomEmojiCategories() {
 }
 
 let cachedTags;
-export async function getCustomEmojiTags() {
+export function getCustomEmojiTags() {
 	if (cachedTags) return cachedTags;
 
-	const customEmojis = await getCustomEmojis();
-
 	const tags = new Set();
 	for (const emoji of customEmojis) {
 		for (const tag of emoji.aliases) {
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
index acf6237c87..2c56b111c6 100644
--- a/packages/frontend/src/pages/about.emojis.vue
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -37,11 +37,10 @@ import MkSelect from '@/components/MkSelect.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
-import { getCustomEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
+import { customEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
 
-const customEmojis = await getCustomEmojis();
-const customEmojiCategories = await getCustomEmojiCategories();
-const customEmojiTags = await getCustomEmojiTags();
+const customEmojiCategories = getCustomEmojiCategories();
+const customEmojiTags = getCustomEmojiTags();
 let q = $ref('');
 let searchEmojis = $ref(null);
 let selectedTags = $ref(new Set());
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
index 0b6a5e1557..b2880b60b1 100644
--- a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
@@ -46,7 +46,7 @@ let dialog = $ref(null);
 let name: string = $ref(props.emoji.name);
 let category: string = $ref(props.emoji.category);
 let aliases: string = $ref(props.emoji.aliases.join(' '));
-const categories = await getCustomEmojiCategories();
+const categories = getCustomEmojiCategories();
 
 const emit = defineEmits<{
 	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
index 08f31676f3..ce68222fbb 100644
--- a/packages/frontend/src/pages/admin/overview.stats.vue
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -63,9 +63,7 @@ import number from '@/filters/number';
 import MkNumberDiff from '@/components/MkNumberDiff.vue';
 import MkNumber from '@/components/MkNumber.vue';
 import { i18n } from '@/i18n';
-import { getCustomEmojis } from '@/custom-emojis';
-
-const customEmojis = await getCustomEmojis();
+import { customEmojis } from '@/custom-emojis';
 
 let stats: any = $ref(null);
 let usersComparedToThePrevDay = $ref<number>();
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
index f49b6959c8..4dde3f2666 100644
--- a/packages/frontend/src/pages/mfm-cheat-sheet.vue
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -317,9 +317,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
-import { getCustomEmojis } from '@/custom-emojis';
-
-const customEmojis = await getCustomEmojis();
+import { customEmojis } from '@/custom-emojis';
 
 let preview_mention = $ref('@example');
 let preview_hashtag = $ref('#test');