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

View file

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