{ return masto.v1.polls - .fetch(poll.id) + .$select(poll.id) + .fetch() .then((pollResponse) => { states.statuses[sKey].poll = pollResponse; }) @@ -1220,7 +1273,8 @@ function Status({ }} votePoll={(choices) => { return masto.v1.polls - .vote(poll.id, { + .$select(poll.id) + .votes.create({ choices, }) .then((pollResponse) => { @@ -1279,27 +1333,7 @@ function Status({ { - return displayedMediaAttachments.map( - (media, i) => - !!media.description && ( - { - e.preventDefault(); - e.stopPropagation(); - states.showMediaAlt = { - alt: media.description, - lang: language, - }; - }} - title={media.description} - > - {i + 1} {media.description} - - ), - ); - }} + captionChildren={captionChildren} > { - return masto.v1.statuses.listHistory(showEdited); + return masto.v1.statuses.$select(showEdited).history.list(); }} onClose={() => { setShowEdited(false); @@ -1534,7 +1568,7 @@ function MultipleMediaFigure(props) { {children} - {captionChildren?.()} + {captionChildren} ); @@ -1585,7 +1619,7 @@ function Card({ card, instance }) { // NOTE: This is for quote post // (async () => { // const { masto } = api({ instance }); - // const status = await masto.v1.statuses.fetch(id); + // const status = await masto.v1.statuses.$select(id).fetch(); // saveStatus(status, instance); // setCardStatusID(id); // })(); @@ -1805,15 +1839,16 @@ function ReactionsModal({ statusID, instance, onClose }) { (async () => { try { if (firstLoad) { - reblogIterator.current = masto.v1.statuses.listRebloggedBy(statusID, { - limit: REACTIONS_LIMIT, - }); - favouriteIterator.current = masto.v1.statuses.listFavouritedBy( - statusID, - { + reblogIterator.current = masto.v1.statuses + .$select(statusID) + .rebloggedBy.list({ limit: REACTIONS_LIMIT, - }, - ); + }); + favouriteIterator.current = masto.v1.statuses + .$select(statusID) + .favouritedBy.list({ + limit: REACTIONS_LIMIT, + }); } const [{ value: reblogResults }, { value: favouriteResults }] = await Promise.allSettled([ @@ -2043,21 +2078,24 @@ function _unfurlMastodonLink(instance, url) { if (statusMatch) { const id = statusMatch[3]; const { masto } = api({ instance: domain }); - remoteInstanceFetch = masto.v1.statuses.fetch(id).then((status) => { - if (status?.id) { - return { - status, - instance: domain, - }; - } else { - throw new Error('No results'); - } - }); + remoteInstanceFetch = masto.v1.statuses + .$select(id) + .fetch() + .then((status) => { + if (status?.id) { + return { + status, + instance: domain, + }; + } else { + throw new Error('No results'); + } + }); } const { masto } = api({ instance }); - const mastoSearchFetch = masto.v2 - .search({ + const mastoSearchFetch = masto.v2.search + .fetch({ q: url, type: 'statuses', resolve: true, @@ -2127,11 +2165,7 @@ function nicePostURL(url) { ); } -const unfurlMastodonLink = throttle( - mem(_unfurlMastodonLink, { - cacheKey: (instance, url) => `${instance}:${url}`, - }), -); +const unfurlMastodonLink = throttle(_unfurlMastodonLink); function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) { const { diff --git a/src/components/translation-block.jsx b/src/components/translation-block.jsx index 1d71f968..06ce52de 100644 --- a/src/components/translation-block.jsx +++ b/src/components/translation-block.jsx @@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'; import sourceLanguages from '../data/lingva-source-languages'; import getTranslateTargetLanguage from '../utils/get-translate-target-language'; import localeCode2Text from '../utils/localeCode2Text'; +import pmem from '../utils/pmem'; import Icon from './icon'; import Loader from './loader'; @@ -25,7 +26,7 @@ const LINGVA_INSTANCES = [ ]; let currentLingvaInstance = 0; -function lingvaTranslate(text, source, target) { +function _lingvaTranslate(text, source, target) { console.log('TRANSLATE', text, source, target); const fetchCall = () => { let instance = LINGVA_INSTANCES[currentLingvaInstance]; @@ -55,11 +56,18 @@ function lingvaTranslate(text, source, target) { ); }, }); - // return masto.v1.statuses.translate(id, { + // return masto.v1.statuses.$select(id).translate({ // lang: DEFAULT_LANG, // }); } -const throttledLingvaTranslate = throttle(lingvaTranslate); +const TRANSLATED_MAX_AGE = 1000 * 60 * 60; // 1 hour +const lingvaTranslate = pmem(_lingvaTranslate, { + maxAge: TRANSLATED_MAX_AGE, +}); +const throttledLingvaTranslate = pmem(throttle(lingvaTranslate), { + // I know, this is double-layered memoization + maxAge: TRANSLATED_MAX_AGE, +}); function TranslationBlock({ forceTranslate, diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx index b8212948..0126a399 100644 --- a/src/pages/account-statuses.jsx +++ b/src/pages/account-statuses.jsx @@ -31,7 +31,8 @@ function AccountStatuses() { const results = []; if (firstLoad) { const { value: pinnedStatuses } = await masto.v1.accounts - .listStatuses(id, { + .$select(id) + .statuses.list({ pinned: true, }) .next(); @@ -53,13 +54,15 @@ function AccountStatuses() { } } if (firstLoad || !accountStatusesIterator.current) { - accountStatusesIterator.current = masto.v1.accounts.listStatuses(id, { - limit: LIMIT, - exclude_replies: excludeReplies, - exclude_reblogs: excludeBoosts, - only_media: media, - tagged, - }); + accountStatusesIterator.current = masto.v1.accounts + .$select(id) + .statuses.list({ + limit: LIMIT, + exclude_replies: excludeReplies, + exclude_reblogs: excludeBoosts, + only_media: media, + tagged, + }); } const { value, done } = await accountStatusesIterator.current.next(); if (value?.length) { @@ -86,14 +89,16 @@ function AccountStatuses() { useEffect(() => { (async () => { try { - const acc = await masto.v1.accounts.fetch(id); + const acc = await masto.v1.accounts.$select(id).fetch(); console.log(acc); setAccount(acc); } catch (e) { console.error(e); } try { - const featuredTags = await masto.v1.accounts.listFeaturedTags(id); + const featuredTags = await masto.v1.accounts + .$select(id) + .featuredTags.list(id); console.log({ featuredTags }); setFeaturedTags(featuredTags); } catch (e) { @@ -113,7 +118,7 @@ function AccountStatuses() { masto.v1.accounts.fetch(id)} + fetchAccount={() => masto.v1.accounts.$select(id).fetch()} authenticated={authenticated} standalone /> diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx index 47d90b01..d43a33fb 100644 --- a/src/pages/accounts.jsx +++ b/src/pages/accounts.jsx @@ -52,9 +52,9 @@ function Accounts({ onClose }) { onDblClick={async () => { if (isCurrent) { try { - const info = await masto.v1.accounts.fetch( - account.info.id, - ); + const info = await masto.v1.accounts + .$select(account.info.id) + .fetch(); console.log('fetched account info', info); account.info = info; store.local.setJSON('accounts', accounts); diff --git a/src/pages/following.jsx b/src/pages/following.jsx index 627a74e4..3d081f32 100644 --- a/src/pages/following.jsx +++ b/src/pages/following.jsx @@ -13,7 +13,7 @@ const LIMIT = 20; function Following({ title, path, id, ...props }) { useTitle(title || 'Following', path || '/following'); - const { masto, instance } = api(); + const { masto, streaming, instance } = api(); const snapStates = useSnapshot(states); const homeIterator = useRef(); const latestItem = useRef(); @@ -22,7 +22,7 @@ function Following({ title, path, id, ...props }) { async function fetchHome(firstLoad) { if (firstLoad || !homeIterator.current) { - homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT }); + homeIterator.current = masto.v1.timelines.home.list({ limit: LIMIT }); } const results = await homeIterator.current.next(); let { value } = results; @@ -53,8 +53,8 @@ function Following({ title, path, id, ...props }) { async function checkForUpdates() { try { - const results = await masto.v1.timelines - .listHome({ + const results = await masto.v1.timelines.home + .list({ limit: 5, since_id: latestItem.current, }) @@ -75,52 +75,33 @@ function Following({ title, path, id, ...props }) { } } - const ws = useRef(); - const streamUser = async () => { - console.log('π Start streaming user', ws.current); - if ( - ws.current && - (ws.current.readyState === WebSocket.CONNECTING || - ws.current.readyState === WebSocket.OPEN) - ) { - console.log('π Streaming user already open'); - return; - } - const stream = await masto.v1.stream.streamUser(); - ws.current = stream.ws; - ws.current.__id = Math.random(); - console.log('π Streaming user', ws.current); - - stream.on('status.update', (status) => { - console.log(`π Status ${status.id} updated`); - saveStatus(status, instance); - }); - - stream.on('delete', (statusID) => { - console.log(`β Status ${statusID} deleted`); - // delete states.statuses[statusID]; - const s = getStatus(statusID, instance); - if (s) s._deleted = true; - }); - - stream.ws.onclose = () => { - console.log('π Streaming user closed'); - }; - - return stream; - }; useEffect(() => { - let stream; + let sub; (async () => { - stream = await streamUser(); + if (streaming) { + sub = streaming.user.subscribe(); + console.log('π Streaming user', sub); + for await (const entry of sub) { + if (!sub) break; + if (entry.event === 'status.update') { + const status = entry.payload; + console.log(`π Status ${status.id} updated`); + saveStatus(status, instance); + } else if (entry.event === 'delete') { + const statusID = entry.payload; + console.log(`β Status ${statusID} deleted`); + // delete states.statuses[statusID]; + const s = getStatus(statusID, instance); + if (s) s._deleted = true; + } + } + } })(); return () => { - if (stream) { - stream.ws.close(); - ws.current = null; - } + sub?.unsubscribe?.(); + sub = null; }; - }, []); + }, [streaming]); return ( { (async () => { try { - const info = await masto.v1.tags.fetch(hashtag); + const info = await masto.v1.tags.$select(hashtag).fetch(); console.log(info); setInfo(info); } catch (e) { @@ -163,7 +165,8 @@ function Hashtags({ columnMode, ...props }) { // return; // } masto.v1.tags - .unfollow(hashtag) + .$select(hashtag) + .unfollow() .then(() => { setInfo({ ...info, following: false }); showToast(`Unfollowed #${hashtag}`); @@ -177,7 +180,8 @@ function Hashtags({ columnMode, ...props }) { }); } else { masto.v1.tags - .follow(hashtag) + .$select(hashtag) + .follow() .then(() => { setInfo({ ...info, following: true }); showToast(`Followed #${hashtag}`); diff --git a/src/pages/list.jsx b/src/pages/list.jsx index dcfa71e4..d6f9a93c 100644 --- a/src/pages/list.jsx +++ b/src/pages/list.jsx @@ -32,7 +32,7 @@ function List(props) { const listIterator = useRef(); async function fetchList(firstLoad) { if (firstLoad || !listIterator.current) { - listIterator.current = masto.v1.timelines.listList(id, { + listIterator.current = masto.v1.timelines.list.$select(id).list({ limit: LIMIT, }); } @@ -56,7 +56,7 @@ function List(props) { async function checkForUpdates() { try { - const results = await masto.v1.timelines.listList(id, { + const results = await masto.v1.timelines.list.$select(id).list({ limit: 1, since_id: latestItem.current, }); @@ -77,7 +77,7 @@ function List(props) { useEffect(() => { (async () => { try { - const list = await masto.v1.lists.fetch(id); + const list = await masto.v1.lists.$select(id).fetch(); setList(list); // setTitle(list.title); } catch (e) { @@ -200,9 +200,11 @@ function ListManageMembers({ listID, onClose }) { (async () => { try { if (firstLoad || !membersIterator.current) { - membersIterator.current = masto.v1.lists.listAccounts(listID, { - limit: MEMBERS_LIMIT, - }); + membersIterator.current = masto.v1.lists + .$select(listID) + .accounts.list({ + limit: MEMBERS_LIMIT, + }); } const results = await membersIterator.current.next(); let { done, value } = results; @@ -274,7 +276,7 @@ function RemoveAddButton({ account, listID }) { setUIState('loading'); (async () => { try { - await masto.v1.lists.addAccount(listID, { + await masto.v1.lists.$select(listID).accounts.create({ accountIds: [account.id], }); setUIState('default'); @@ -290,7 +292,7 @@ function RemoveAddButton({ account, listID }) { (async () => { try { - await masto.v1.lists.removeAccount(listID, { + await masto.v1.lists.$select(listID).accounts.remove({ accountIds: [account.id], }); setUIState('default'); diff --git a/src/pages/public.jsx b/src/pages/public.jsx index b634f236..2fac5b3f 100644 --- a/src/pages/public.jsx +++ b/src/pages/public.jsx @@ -29,7 +29,7 @@ function Public({ local, columnMode, ...props }) { const publicIterator = useRef(); async function fetchPublic(firstLoad) { if (firstLoad || !publicIterator.current) { - publicIterator.current = masto.v1.timelines.listPublic({ + publicIterator.current = masto.v1.timelines.public.list({ limit: LIMIT, local: isLocal, }); @@ -54,8 +54,8 @@ function Public({ local, columnMode, ...props }) { async function checkForUpdates() { try { - const results = await masto.v1.timelines - .listPublic({ + const results = await masto.v1.timelines.public + .list({ limit: 1, local: isLocal, since_id: latestItem.current, diff --git a/src/pages/search.jsx b/src/pages/search.jsx index 4e6a0be1..13016111 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -90,7 +90,7 @@ function Search(props) { if (authenticated) params.offset = offsetRef.current; } try { - const results = await masto.v2.search(params); + const results = await masto.v2.search.fetch(params); console.log(results); if (type) { if (firstLoad) { diff --git a/src/pages/status.jsx b/src/pages/status.jsx index c4165c7c..0a12ee67 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -100,7 +100,7 @@ function StatusPage(params) { if (!heroStatus && showMedia) { (async () => { try { - const status = await masto.v1.statuses.fetch(id); + const status = await masto.v1.statuses.$select(id).fetch(); saveStatus(status, instance); setHeroStatus(status); } catch (err) { @@ -235,12 +235,15 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { (async () => { const heroFetch = () => - pRetry(() => masto.v1.statuses.fetch(id), { + pRetry(() => masto.v1.statuses.$select(id).fetch(), { retries: 4, }); - const contextFetch = pRetry(() => masto.v1.statuses.fetchContext(id), { - retries: 8, - }); + const contextFetch = pRetry( + () => masto.v1.statuses.$select(id).context.fetch(), + { + retries: 8, + }, + ); const hasStatus = !!snapStates.statuses[sKey]; let heroStatus = snapStates.statuses[sKey]; @@ -647,6 +650,189 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { resetScrollPosition(status.id); }, []); + const renderStatus = (status) => { + const { + id: statusID, + ancestor, + isThread, + descendant, + thread, + replies, + repliesCount, + weight, + } = status; + const isHero = statusID === id; + // const StatusParent = useCallback( + // (props) => + // isThread || thread || ancestor ? ( + // { + // resetScrollPosition(statusID); + // }} + // {...props} + // /> + // ) : ( + // + // ), + // [isThread, thread], + // ); + return ( + + {isHero ? ( + <> + + + + {uiState !== 'loading' && !authenticated ? ( + + + You're not logged in. Interactions (reply, boost, etc) are not + possible. + + + Log in + + + ) : ( + !sameInstance && ( + + + This post is from another instance ({instance}). + Interactions (reply, boost, etc) are not possible. + + { + setUIState('loading'); + (async () => { + try { + const results = await currentMasto.v2.search.fetch({ + q: heroStatus.url, + type: 'statuses', + resolve: true, + limit: 1, + }); + if (results.statuses.length) { + const status = results.statuses[0]; + location.hash = currentInstance + ? `/${currentInstance}/s/${status.id}` + : `/s/${status.id}`; + } else { + throw new Error('No results'); + } + } catch (e) { + setUIState('default'); + alert('Error: ' + e); + console.error(e); + } + })(); + }} + > + Switch to my instance to enable + interactions + + + ) + )} + + ) : ( + // + { + resetScrollPosition(statusID); + }} + > + + {ancestor && isThread && repliesCount > 1 && ( + + {' '} + {shortenNumber(repliesCount)} + + )}{' '} + {/* {replies?.length > LIMIT && ( + + {' '} + + {shortenNumber(replies.length)} + + + )} */} + {/* */} + + )} + {descendant && replies?.length > 0 && ( + + )} + {uiState === 'loading' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( + + + + )} + {uiState === 'error' && + isHero && + !!heroStatus?.repliesCount && + !hasDescendants && ( + + Unable to load replies. + + { + states.reloadStatusPage++; + }} + > + Try again + + + )} + + ); + }; + return ( - {statuses.slice(0, limit).map((status) => { - const { - id: statusID, - ancestor, - isThread, - descendant, - thread, - replies, - repliesCount, - weight, - } = status; - const isHero = statusID === id; - // const StatusParent = useCallback( - // (props) => - // isThread || thread || ancestor ? ( - // { - // resetScrollPosition(statusID); - // }} - // {...props} - // /> - // ) : ( - // - // ), - // [isThread, thread], - // ); - return ( - - {isHero ? ( - <> - - - - {uiState !== 'loading' && !authenticated ? ( - - - You're not logged in. Interactions (reply, boost, etc) - are not possible. - - - Log in - - - ) : ( - !sameInstance && ( - - - This post is from another instance ( - {instance}). Interactions (reply, boost, etc) - are not possible. - - { - setUIState('loading'); - (async () => { - try { - const results = await currentMasto.v2.search({ - q: heroStatus.url, - type: 'statuses', - resolve: true, - limit: 1, - }); - if (results.statuses.length) { - const status = results.statuses[0]; - location.hash = currentInstance - ? `/${currentInstance}/s/${status.id}` - : `/s/${status.id}`; - } else { - throw new Error('No results'); - } - } catch (e) { - setUIState('default'); - alert('Error: ' + e); - console.error(e); - } - })(); - }} - > - Switch to my instance to - enable interactions - - - ) - )} - - ) : ( - // - { - resetScrollPosition(statusID); - }} - > - - {ancestor && isThread && repliesCount > 1 && ( - - {' '} - - {shortenNumber(repliesCount)} - - - )}{' '} - {/* {replies?.length > LIMIT && ( - - {' '} - - {shortenNumber(replies.length)} - - - )} */} - {/* */} - - )} - {descendant && replies?.length > 0 && ( - - )} - {uiState === 'loading' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( - - - - )} - {uiState === 'error' && - isHero && - !!heroStatus?.repliesCount && - !hasDescendants && ( - - Unable to load replies. - - { - states.reloadStatusPage++; - }} - > - Try again - - - )} - - ); - })} + {statuses.slice(0, limit).map(renderStatus)} {showMore > 0 && ( {} } = opts; let enhancedContent = content; const dom = document.createElement('div'); @@ -250,6 +251,7 @@ function enhanceContent(content, opts = {}) { return enhancedContent; } +const enhanceContent = mem(_enhanceContent); const defaultRejectFilter = [ // Document metadata diff --git a/src/utils/locale-match.jsx b/src/utils/locale-match.jsx index e901e9f2..73768829 100644 --- a/src/utils/locale-match.jsx +++ b/src/utils/locale-match.jsx @@ -1,5 +1,6 @@ import { match } from '@formatjs/intl-localematcher'; -import mem from 'mem'; + +import mem from './mem'; function _localeMatch(...args) { // Wrap in try/catch because localeMatcher throws on invalid locales @@ -10,8 +11,6 @@ function _localeMatch(...args) { return defaultLocale || false; } } -const localeMatch = mem(_localeMatch, { - cacheKey: (args) => args.join(), -}); +const localeMatch = mem(_localeMatch); export default localeMatch; diff --git a/src/utils/mem.js b/src/utils/mem.js new file mode 100644 index 00000000..773a4929 --- /dev/null +++ b/src/utils/mem.js @@ -0,0 +1,5 @@ +import moize from 'moize'; + +export default function mem(fn, opts = {}) { + return moize(fn, { ...opts, maxSize: 100 }); +} diff --git a/src/utils/pmem.js b/src/utils/pmem.js new file mode 100644 index 00000000..e8041c3c --- /dev/null +++ b/src/utils/pmem.js @@ -0,0 +1,5 @@ +import mem from './mem'; + +export default function pmem(fn, opts = {}) { + return mem(fn, { isPromise: true, ...opts }); +} diff --git a/src/utils/push-notifications.js b/src/utils/push-notifications.js index 013dd5b3..e186547c 100644 --- a/src/utils/push-notifications.js +++ b/src/utils/push-notifications.js @@ -34,22 +34,22 @@ import { getCurrentAccount } from './store-utils'; function createBackendPushSubscription(subscription) { const { masto } = api(); - return masto.v1.webPushSubscriptions.create(subscription); + return masto.v1.push.subscription.create(subscription); } function fetchBackendPushSubscription() { const { masto } = api(); - return masto.v1.webPushSubscriptions.fetch(); + return masto.v1.push.subscription.fetch(); } function updateBackendPushSubscription(subscription) { const { masto } = api(); - return masto.v1.webPushSubscriptions.update(subscription); + return masto.v1.push.subscription.update(subscription); } function removeBackendPushSubscription() { const { masto } = api(); - return masto.v1.webPushSubscriptions.remove(); + return masto.v1.push.subscription.remove(); } // Front-end diff --git a/src/utils/states.js b/src/utils/states.js index b2424f00..580d02aa 100644 --- a/src/utils/states.js +++ b/src/utils/states.js @@ -1,8 +1,8 @@ -import mem from 'mem'; import { proxy, subscribe } from 'valtio'; import { subscribeKey } from 'valtio/utils'; import { api } from './api'; +import pmem from './pmem'; import store from './store'; const states = proxy({ @@ -207,7 +207,7 @@ export function threadifyStatus(status, propInstance) { if (!prevStatus) { if (fetchIndex++ > 3) throw 'Too many fetches for thread'; // Some people revive old threads await new Promise((r) => setTimeout(r, 500 * fetchIndex)); // Be nice to rate limits - // prevStatus = await masto.v1.statuses.fetch(inReplyToId); + // prevStatus = await masto.v1.statuses.$.select(inReplyToId).fetch(); prevStatus = await fetchStatus(inReplyToId, masto); saveStatus(prevStatus, instance, { skipThreading: true }); } @@ -229,6 +229,6 @@ export function threadifyStatus(status, propInstance) { }); } -const fetchStatus = mem((statusID, masto) => { - return masto.v1.statuses.fetch(statusID); +const fetchStatus = pmem((statusID, masto) => { + return masto.v1.statuses.$select(statusID).fetch(); });