From c1e69e7a5334084099816d55d6a1c8649782bcee Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 28 Feb 2023 20:10:52 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20emojis=E3=81=AFIndexedDB?=
 =?UTF-8?q?=E3=81=AB=E4=BF=9D=E5=AD=98=E3=81=99=E3=82=8B=20(#10121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(client): emojisはIndexedDBに保存する

* lastEmojisFetchedAt
---
 packages/frontend/src/custom-emojis.ts | 23 ++++++++++++++++-------
 packages/frontend/src/local-storage.ts |  6 +++---
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts
index 9ce370e7e8..a89a420d77 100644
--- a/packages/frontend/src/custom-emojis.ts
+++ b/packages/frontend/src/custom-emojis.ts
@@ -3,9 +3,10 @@ import * as Misskey from 'misskey-js';
 import { api, apiGet } from './os';
 import { miLocalStorage } from './local-storage';
 import { stream } from '@/stream';
+import { get, set } from '@/scripts/idb-proxy';
 
-const storageCache = miLocalStorage.getItem('emojis');
-export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
+const storageCache = await get('emojis');
+export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(Array.isArray(storageCache) ? storageCache : []);
 export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 	const categories = new Set<string>();
 	for (const emoji of customEmojis.value) {
@@ -18,31 +19,39 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
 
 stream.on('emojiAdded', emojiData => {
 	customEmojis.value = [emojiData.emoji, ...customEmojis.value];
+	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiUpdated', emojiData => {
 	customEmojis.value = customEmojis.value.map(item => emojiData.emojis.find(search => search.name === item.name) as Misskey.entities.CustomEmoji ?? item);
+	set('emojis', customEmojis.value);
 });
 
 stream.on('emojiDeleted', emojiData => {
 	customEmojis.value = customEmojis.value.filter(item => !emojiData.emojis.some(search => search.name === item.name));
+	set('emojis', customEmojis.value);
 });
 
 export async function fetchCustomEmojis(force = false) {
 	const now = Date.now();
+	const needsMigration = miLocalStorage.getItem('emojis') != null;
 
 	let res;
-	if (force) {
+	if (force || needsMigration) {
 		res = await api('emojis', {});
 	} else {
-		const lastFetchedAt = miLocalStorage.getItem('lastEmojisFetchedAt');
-		if (lastFetchedAt && (now - parseInt(lastFetchedAt)) < 1000 * 60 * 60) return;
+		const lastFetchedAt = await get('lastEmojisFetchedAt');
+		if (lastFetchedAt && (now - lastFetchedAt) < 1000 * 60 * 60) return;
 		res = await apiGet('emojis', {});
 	}
 
 	customEmojis.value = res.emojis;
-	miLocalStorage.setItem('emojis', JSON.stringify(res.emojis));
-	miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
+	set('emojis', res.emojis);
+	set('lastEmojisFetchedAt', now);
+	if (needsMigration) {
+		miLocalStorage.removeItem('emojis');
+		miLocalStorage.removeItem('lastEmojisFetchedAt');
+	}
 }
 
 let cachedTags;
diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
index e6b828696c..38462c8a65 100644
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -2,8 +2,6 @@ type Keys =
 	'v' |
 	'lastVersion' |
 	'instance' |
-	'emojis' | // TODO: indexed db
-	'lastEmojisFetchedAt' |
 	'account' |
 	'accounts' |
 	'latestDonationInfoShownAt' |
@@ -28,7 +26,9 @@ type Keys =
 	`miux:${string}` |
 	`ui:folder:${string}` |
 	`themes:${string}` |
-	`aiscript:${string}`;
+	`aiscript:${string}` |
+	'lastEmojisFetchedAt' | // DEPRECATED, stored in indexeddb (13.9.0~)
+	'emojis' // DEPRECATED, stored in indexeddb (13.9.0~);
 
 export const miLocalStorage = {
 	getItem: (key: Keys) => window.localStorage.getItem(key),