tutu/src/timelines/TrendTimelinePanel.tsx

86 lines
2.1 KiB
TypeScript
Raw Normal View History

import {
Component,
For,
createSignal,
Match,
Switch as JsSwitch,
ErrorBoundary,
createSelector,
} from "solid-js";
import { type mastodon } from "masto";
import { Button } from "@suid/material";
import { createTimelineSnapshot } from "../masto/timelines.js";
import { vibrate } from "../platform/hardware.js";
import PullDownToRefresh from "./PullDownToRefresh.jsx";
import Thread from "./Thread.jsx";
2024-10-29 15:22:25 +08:00
import TootList from "./TootList.jsx";
const TrendTimelinePanel: Component<{
client: mastodon.rest.Client;
openFullScreenToot: (
toot: mastodon.v1.Status,
srcElement?: HTMLElement,
reply?: boolean,
) => void;
}> = (props) => {
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
2024-10-29 15:22:25 +08:00
const [timeline, snapshot, { refetch: refetchTimeline }] =
createTimelineSnapshot(
() => props.client.v1.trends.statuses,
() => 120,
);
return (
<ErrorBoundary
fallback={(err, reset) => {
return <p>Oops: {String(err)}</p>;
}}
>
<PullDownToRefresh
linkedElement={scrollLinked()}
loading={snapshot.loading}
onRefresh={() => refetchTimeline({ direction: "new" })}
/>
<div
ref={(e) =>
setTimeout(() => {
setScrollLinked(e.parentElement!);
}, 0)
}
>
2024-10-29 15:22:25 +08:00
<TootList
threads={timeline.list}
onUnknownThread={timeline.getPath}
onChangeToot={timeline.set}
/>
</div>
<div
style={{
display: "flex",
padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
"align-items": "center",
"justify-content": "center",
"flex-flow": "column",
2024-10-27 00:29:14 +08:00
gap: "20px",
}}
>
<JsSwitch>
<Match when={snapshot.error}>
<p>{`Oops: ${snapshot.error}`}</p>
<Button
variant="contained"
onClick={[refetchTimeline, undefined]}
disabled={snapshot.loading}
>
Retry
</Button>
</Match>
</JsSwitch>
</div>
</ErrorBoundary>
);
};
export default TrendTimelinePanel;