mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-22 09:15:33 +03:00
Prevent keep calling Lists :id API for the title
Memoize all the things!!1!
This commit is contained in:
parent
b7c1078c26
commit
b1df96689f
2 changed files with 45 additions and 30 deletions
|
@ -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',
|
||||||
},
|
},
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
Loading…
Reference in a new issue