tutu/src/timelines/TootBottomSheet.tsx

96 lines
2.7 KiB
TypeScript
Raw Normal View History

2024-08-12 21:55:26 +08:00
import { useNavigate, useParams } from "@solidjs/router";
2024-08-13 14:17:33 +08:00
import { createEffect, createResource, Show, type Component } from "solid-js";
import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread";
2024-08-12 21:55:26 +08:00
import { AppBar, IconButton, Toolbar } from "@suid/material";
import { Title } from "../material/typography";
2024-08-12 21:55:26 +08:00
import { Close as CloseIcon } from "@suid/icons-material";
import { isiOS } from "../platform/host";
import { createUnauthorizedClient, useSessions } from "../masto/clients";
import { resolveCustomEmoji } from "../masto/toot";
import RegularToot from "./RegularToot";
2024-08-13 14:17:33 +08:00
import type { mastodon } from "masto";
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]
}
}
2024-07-14 20:28:44 +08:00
const TootBottomSheet: Component = (props) => {
2024-08-12 21:55:26 +08:00
const params = useParams<{ acct: string; id: string }>();
const navigate = useNavigate();
const allSession = useSessions();
2024-08-13 14:17:33 +08:00
const acctText = () => decodeURIComponent(params.acct)
2024-08-12 21:55:26 +08:00
const session = () => {
2024-08-13 14:17:33 +08:00
const [inputUsername, inputSite] = acctText().split(
2024-08-12 21:55:26 +08:00
"@",
2,
);
const authedSession = allSession().find(
(x) =>
x.account.site === inputSite &&
x.account.inf?.username === inputUsername,
);
return authedSession ?? { client: createUnauthorizedClient(inputSite) };
};
const [remoteToot] = createResource(
() => [session().client, params.id] as const,
async ([client, id]) => {
return await client.v1.statuses.$select(id).fetch();
},
);
2024-08-13 14:17:33 +08:00
const toot = () => remoteToot() ?? getCache(acctText(), params.id);
2024-08-12 21:55:26 +08:00
const tootTitle = () => {
const t = toot();
if (t) {
const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
return `${name}'s toot`;
}
return "A toot";
};
return (
<Scaffold
topbar={
<AppBar
sx={{
backgroundColor: "var(--tutu-color-surface)",
color: "var(--tutu-color-on-surface)",
}}
elevation={1}
position="static"
>
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
</IconButton>
<Title>{tootTitle}</Title>
</Toolbar>
</AppBar>
}
>
<div>
<Show when={toot()}>
<RegularToot status={toot()!}></RegularToot>
</Show>
</div>
</Scaffold>
);
2024-08-05 15:33:00 +08:00
};
2024-07-14 20:28:44 +08:00
2024-08-05 15:33:00 +08:00
export default TootBottomSheet;