nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Prevent keep calling Lists :id API for the title

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/shortcuts-settings.jsx
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(
const list = await api().masto.v1.lists.fetch(id); async ({ id }) => {
return list.title; const list = await api().masto.v1.lists.fetch(id);
}, 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(
const account = await api().masto.v1.accounts.fetch(id); async ({ id }) => {
return account.username || account.acct || account.displayName; const account = await api().masto.v1.accounts.fetch(id);
}, return account.username || account.acct || account.displayName;
},
{
cacheKey: ([{ id }]) => id,
},
),
path: ({ id }) => `/a/${id}`, path: ({ id }) => `/a/${id}`,
icon: 'user', icon: 'user',
}, },

48
src/components/shortcuts.jsx
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,29 +23,33 @@ function Shortcuts() {
const menuRef = useRef(); const menuRef = useRef();
const formattedShortcuts = shortcuts const formattedShortcuts = useMemo(
.map((pin, i) => { () =>
const { type, ...data } = pin; shortcuts
if (!SHORTCUTS_META[type]) return null; .map((pin, i) => {
let { path, title, icon } = SHORTCUTS_META[type]; const { type, ...data } = pin;
if (!SHORTCUTS_META[type]) return null;
let { path, title, icon } = SHORTCUTS_META[type];
if (typeof path === 'function') { if (typeof path === 'function') {
path = path(data, i); path = path(data, i);
} }
if (typeof title === 'function') { if (typeof title === 'function') {
title = title(data); title = title(data);
} }
if (typeof icon === 'function') { if (typeof icon === 'function') {
icon = icon(data); icon = icon(data);
} }
return { return {
path, path,
title, title,
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) => {