TootBottomSheet: use new cache semantic
This commit is contained in:
parent
5ab0d4d0a2
commit
6dd6065711
4 changed files with 22 additions and 50 deletions
|
@ -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<string>) {
|
||||
|
@ -131,7 +131,7 @@ export function useSessionForAcctStr(acct: Accessor<string>) {
|
|||
return (
|
||||
authedSession ?? {
|
||||
client: createUnauthorizedClient(inputSite),
|
||||
account: undefined,
|
||||
account: { site: inputSite }, // TODO: we need some security checks here?
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
|
@ -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) => {
|
|||
</Show>
|
||||
</article>
|
||||
|
||||
<Show when={session()!.account}>
|
||||
<Show when={(session().account as Account).inf}>
|
||||
<TootComposer
|
||||
mentions={defaultMentions()}
|
||||
profile={session().account!}
|
||||
profile={(session().account! as Account).inf}
|
||||
replyToDisplayName={toot()?.account?.displayName || ""}
|
||||
client={session().client}
|
||||
onSent={() => refetchContext()}
|
||||
|
|
|
@ -216,7 +216,7 @@ function cancelEvent(event: Event) {
|
|||
const TootComposer: Component<{
|
||||
ref?: Ref<HTMLDivElement>;
|
||||
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<{
|
|||
<div class="reply-input">
|
||||
<Show when={props.profile}>
|
||||
<Avatar
|
||||
src={props.profile!.inf?.avatar}
|
||||
src={props.profile!.avatar}
|
||||
sx={{ marginLeft: "-0.25em" }}
|
||||
/>
|
||||
</Show>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Add table
Reference in a new issue