1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { useParams } from "wouter";
import { useQuery } from "@tanstack/react-query";
import useLocalState from "@/state/state";
import PostList from "@/components/feed/PostList";
import Composer from "@/components/composer/Composer";
import Icon from "@/components/Icon";
import spinner from "@/assets/triangles.svg";
import { ErrorPage } from "@/Router";
import "@/styles/trill.css";
import "@/styles/feed.css";
import Post from "@/components/post/Post";
import { toFlat } from "@/logic/trill/helpers";
export default function Thread() {
const params = useParams<{ host: string; id: string }>();
const { host, id } = params;
const { api } = useLocalState((s) => ({ api: s.api }));
async function fetchThread() {
return await api!.scryThread(host, id);
}
const { isPending, data, error, refetch } = useQuery({
queryKey: ["thread", params.host, params.id],
queryFn: fetchThread,
enabled: !!api && !!params.host && !!params.id,
});
console.log({ data });
if (!params.host || !params.id) {
return <ErrorPage msg="Invalid thread URL" />;
}
if (isPending) {
return (
<main>
<div className="thread-header">
<h2>Loading Thread...</h2>
</div>
<div className="loading-container">
<img className="x-center" src={spinner} alt="Loading" />
</div>
</main>
);
}
if (error) {
return (
<main>
<div className="thread-header">
<h2>Error Loading Thread</h2>
</div>
<ErrorPage msg={error.message || "Failed to load thread"} />
</main>
);
}
if (!data || "error" in data) {
return (
<main>
<div className="thread-header">
<h2>Thread Not Found</h2>
</div>
<ErrorPage
msg={data?.error || "This thread doesn't exist or isn't accessible"}
/>
</main>
);
}
return (
<main>
<div className="thread-header">
<div className="thread-nav">
<button
className="back-btn"
onClick={() => window.history.back()}
title="Go back"
>
<Icon name="reply" size={16} />
<span>Back to Feed</span>
</button>
</div>
<h2>Thread</h2>
<div className="thread-info">
<span className="thread-host">~{params.host}</span>
<span className="thread-separator">•</span>
<span className="thread-id">#{params.id}</span>
</div>
</div>
<div id="feed-proper">
<Composer />
<div className="thread-content">
<Post poast={toFlat(data.ok)} />
</div>
</div>
</main>
);
}
// function OwnData(props: Props) {
// const { api } = useLocalState((s) => ({
// api: s.api,
// }));
// const { host, id } = props;
// async function fetchThread() {
// return await api!.scryThread(host, id);
// }
// const { isLoading, isError, data, refetch } = useQuery({
// queryKey: ["trill-thread", host, id],
// queryFn: fetchThread,
// });
// return isLoading ? (
// <div className={props.className}>
// <div className="x-center not-found">
// <p className="x-center">Scrying Post, please wait...</p>
// <img src={spinner} className="x-center s-100" alt="" />
// </div>
// </div>
// ) : null;
// }
// function SomeoneElses(props: Props) {
// // const { api, following } = useLocalState((s) => ({
// // api: s.api,
// // following: s.following,
// // }));
// return <div>ho</div>;
// }
|
