From 6dd60657119c4f12eff3133112d052241934ba3a Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 26 Dec 2024 20:09:03 +0800 Subject: [PATCH] TootBottomSheet: use new cache semantic --- src/masto/clients.ts | 4 +-- src/timelines/TootBottomSheet.tsx | 51 +++++++------------------------ src/timelines/TootComposer.tsx | 14 ++++----- src/timelines/TootList.tsx | 3 +- 4 files changed, 22 insertions(+), 50 deletions(-) diff --git a/src/masto/clients.ts b/src/masto/clients.ts index fc26ee5..35789ef 100644 --- a/src/masto/clients.ts +++ b/src/masto/clients.ts @@ -115,7 +115,7 @@ export function useDefaultSession() { * - If the username is not present, any session on the site is returned; or, * - If no available session available for the pattern, an unauthorised session is returned. * - * In an unauthorised session, the `.account` is `undefined` and the `client` is an + * In an unauthorised session, the `.account` is {@link RemoteServer} and the `client` is an * unauthorised client for the site. This client may not available for some operations. */ export function useSessionForAcctStr(acct: Accessor) { @@ -131,7 +131,7 @@ export function useSessionForAcctStr(acct: Accessor) { return ( authedSession ?? { client: createUnauthorizedClient(inputSite), - account: undefined, + account: { site: inputSite }, // TODO: we need some security checks here? } ); }); diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index eecc8fc..08301de 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -1,16 +1,13 @@ -import { useLocation, useParams } from "@solidjs/router"; +import { useParams } from "@solidjs/router"; import { catchError, - createEffect, - createRenderEffect, createResource, Show, type Component, } from "solid-js"; import Scaffold from "~material/Scaffold"; -import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material"; +import { CircularProgress } from "@suid/material"; import { Title } from "~material/typography"; -import { Close as CloseIcon } from "@suid/icons-material"; import { useSessionForAcctStr } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot, { @@ -33,18 +30,8 @@ import ItemSelectionProvider, { createSingluarItemSelection, } from "./toots/ItemSelectionProvider"; import AppTopBar from "~material/AppTopBar"; - -let cachedEntry: [string, mastodon.v1.Status] | undefined; - -export function setCache(acct: string, status: mastodon.v1.Status) { - cachedEntry = [acct, status]; -} - -function getCache(acct: string, id: string) { - if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) { - return cachedEntry[1]; - } -} +import { fetchStatus } from "../masto/statuses"; +import { type Account } from "../accounts/stores"; const TootBottomSheet: Component = (props) => { const params = useParams<{ acct: string; id: string }>(); @@ -54,25 +41,15 @@ const TootBottomSheet: Component = (props) => { const session = useSessionForAcctStr(acctText); const [, selectionState] = createSingluarItemSelection(); - const [remoteToot, { mutate: setRemoteToot }] = createResource( - () => [session().client, params.id] as const, - async ([client, id]) => { - return await client.v1.statuses.$select(id).fetch(); - }, - ); + const [remoteToot, { mutate: setRemoteToot }] = + fetchStatus.cachedAndRevalidate( + () => [session().account, params.id] as const, + ); const toot = () => catchError(remoteToot, (error) => { console.error(error); - }) ?? getCache(acctText(), params.id); - - createEffect((lastTootId?: string) => { - const tootId = toot()?.id; - if (!tootId || lastTootId === tootId) return tootId; - const elementId = `toot-${tootId}`; - document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" }); - return tootId; - }); + }); const [tootContextErrorUncaught, { refetch: refetchContext }] = createResource( @@ -94,12 +71,6 @@ const TootBottomSheet: Component = (props) => { () => tootContext()?.descendants, ); - createEffect(() => { - if (ancestors.list.length > 0) { - document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView(); - } - }); - useDocumentTitle(() => { const t = toot()?.reblog ?? toot(); const name = t?.account.displayName ?? "Someone"; @@ -300,10 +271,10 @@ const TootBottomSheet: Component = (props) => { - + refetchContext()} diff --git a/src/timelines/TootComposer.tsx b/src/timelines/TootComposer.tsx index 450f9ad..a78c9e8 100644 --- a/src/timelines/TootComposer.tsx +++ b/src/timelines/TootComposer.tsx @@ -216,7 +216,7 @@ function cancelEvent(event: Event) { const TootComposer: Component<{ ref?: Ref; style?: JSX.CSSProperties; - profile?: Account; + profile?: mastodon.v1.Account; replyToDisplayName?: string; mentions?: readonly string[]; client?: mastodon.rest.Client; @@ -248,15 +248,15 @@ const TootComposer: Component<{ createEffect(() => { if (active()) { - setTimeout(() => inputRef.focus(), 0); + setTimeout(() => inputRef!.focus(), 0); } }); createEffect(() => { - if (inputRef.value !== "") return; + if (inputRef!.value !== "") return; if (props.mentions) { const prepText = props.mentions.join(" ") + " "; - inputRef.value = prepText; + inputRef!.value = prepText; } }); @@ -294,7 +294,7 @@ const TootComposer: Component<{ try { const status = await client.v1.statuses.create( { - status: inputRef.value, + status: inputRef!.value, language: language(), visibility: visibility(), inReplyToId: props.inReplyToId, @@ -309,7 +309,7 @@ const TootComposer: Component<{ ); props.onSent?.(status); - inputRef.value = ""; + inputRef!.value = ""; } finally { setSending(false); } @@ -363,7 +363,7 @@ const TootComposer: Component<{
diff --git a/src/timelines/TootList.tsx b/src/timelines/TootList.tsx index 35986a5..3c2f7ba 100644 --- a/src/timelines/TootList.tsx +++ b/src/timelines/TootList.tsx @@ -23,6 +23,7 @@ import type { ThreadNode } from "../masto/timelines"; import { useNavigator } from "~platform/StackedRouter"; import { ANIM_CURVE_STD } from "~material/theme"; import { useItemSelection } from "./toots/ItemSelectionProvider"; +import { fetchStatus } from "../masto/statuses"; function durationOf(rect0: DOMRect, rect1: DOMRect) { const distancelt = Math.sqrt( @@ -130,7 +131,7 @@ const TootList: Component<{ } const acct = `${inf.username}@${p.site}`; - setTootBottomSheetCache(acct, toot); + await fetchStatus.setJson([p, toot.id], toot) push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, { animateOpen(element) {