Prevent keep calling Lists :id API for the title

Memoize all the things!!1!
This commit is contained in:
Lim Chee Aun 2023-02-23 21:42:38 +08:00
parent b7c1078c26
commit b1df96689f
2 changed files with 45 additions and 30 deletions

View file

@ -1,5 +1,6 @@
import './shortcuts-settings.css';
import mem from 'mem';
import { useEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
@ -90,10 +91,15 @@ export const SHORTCUTS_META = {
icon: 'notification',
},
list: {
title: async ({ id }) => {
const list = await api().masto.v1.lists.fetch(id);
return list.title;
},
title: mem(
async ({ id }) => {
const list = await api().masto.v1.lists.fetch(id);
return list.title;
},
{
cacheKey: ([{ id }]) => id,
},
),
path: ({ id }) => `/l/${id}`,
icon: 'list',
},
@ -109,10 +115,15 @@ export const SHORTCUTS_META = {
icon: 'search',
},
'account-statuses': {
title: async ({ id }) => {
const account = await api().masto.v1.accounts.fetch(id);
return account.username || account.acct || account.displayName;
},
title: mem(
async ({ id }) => {
const account = await api().masto.v1.accounts.fetch(id);
return account.username || account.acct || account.displayName;
},
{
cacheKey: ([{ id }]) => id,
},
),
path: ({ id }) => `/a/${id}`,
icon: 'user',
},

View file

@ -1,7 +1,7 @@
import './shortcuts.css';
import { Menu, MenuItem } from '@szhsin/react-menu';
import { useRef } from 'preact/hooks';
import { useMemo, useRef } from 'preact/hooks';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router-dom';
import { useSnapshot } from 'valtio';
@ -23,29 +23,33 @@ function Shortcuts() {
const menuRef = useRef();
const formattedShortcuts = shortcuts
.map((pin, i) => {
const { type, ...data } = pin;
if (!SHORTCUTS_META[type]) return null;
let { path, title, icon } = SHORTCUTS_META[type];
const formattedShortcuts = useMemo(
() =>
shortcuts
.map((pin, i) => {
const { type, ...data } = pin;
if (!SHORTCUTS_META[type]) return null;
let { path, title, icon } = SHORTCUTS_META[type];
if (typeof path === 'function') {
path = path(data, i);
}
if (typeof title === 'function') {
title = title(data);
}
if (typeof icon === 'function') {
icon = icon(data);
}
if (typeof path === 'function') {
path = path(data, i);
}
if (typeof title === 'function') {
title = title(data);
}
if (typeof icon === 'function') {
icon = icon(data);
}
return {
path,
title,
icon,
};
})
.filter(Boolean);
return {
path,
title,
icon,
};
})
.filter(Boolean),
[shortcuts],
);
const navigate = useNavigate();
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {