From cabed6098d75ac2d0a8b7845f958b15d88f8750c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 24 Mar 2023 16:58:57 +0900
Subject: [PATCH] perf(frontend): cache user lists

---
 packages/frontend/src/cache.ts                 | 1 +
 packages/frontend/src/pages/my-lists/index.vue | 2 ++
 packages/frontend/src/pages/my-lists/list.vue  | 7 +++++--
 packages/frontend/src/scripts/get-user-menu.ts | 4 ++--
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/cache.ts b/packages/frontend/src/cache.ts
index 1a8df7fcf6..c95da64bba 100644
--- a/packages/frontend/src/cache.ts
+++ b/packages/frontend/src/cache.ts
@@ -3,3 +3,4 @@ import { Cache } from '@/scripts/cache';
 
 export const clipsCache = new Cache<misskey.entities.Clip[]>(Infinity);
 export const rolesCache = new Cache(Infinity);
+export const userListsCache = new Cache<misskey.entities.UserList[]>(Infinity);
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 8a96b54881..11a2aca8c5 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -24,6 +24,7 @@ import MkAvatars from '@/components/MkAvatars.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { userListsCache } from '@/cache';
 
 const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
 
@@ -38,6 +39,7 @@ async function create() {
 	});
 	if (canceled) return;
 	await os.apiWithDialog('users/lists/create', { name: name });
+	userListsCache.delete();
 	pagingComponent.reload();
 }
 
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 205434971d..768a48746c 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -37,6 +37,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { userPage } from '@/filters/user';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { userListsCache } from '@/cache';
 
 const props = defineProps<{
 	listId: string;
@@ -97,6 +98,8 @@ async function renameList() {
 		name: name,
 	});
 
+	userListsCache.delete();
+
 	list.name = name;
 }
 
@@ -107,10 +110,10 @@ async function deleteList() {
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete', {
+	await os.apiWithDialog('users/lists/delete', {
 		listId: list.id,
 	});
-	os.success();
+	userListsCache.delete();
 	mainRouter.push('/my/lists');
 }
 
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
index dab1bff199..fe941c77b2 100644
--- a/packages/frontend/src/scripts/get-user-menu.ts
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -8,7 +8,7 @@ import { userActions } from '@/store';
 import { $i, iAmModerator } from '@/account';
 import { mainRouter } from '@/router';
 import { Router } from '@/nirax';
-import { rolesCache } from '@/cache';
+import { rolesCache, userListsCache } from '@/cache';
 
 export function getUserMenu(user: misskey.entities.UserDetailed, router: Router = mainRouter) {
 	const meId = $i ? $i.id : null;
@@ -127,7 +127,7 @@ export function getUserMenu(user: misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-list',
 		text: i18n.ts.addToList,
 		children: async () => {
-			const lists = await os.api('users/lists/list');
+			const lists = await userListsCache.fetch(() => os.api('users/lists/list'));
 
 			return lists.map(list => ({
 				text: list.name,