blob: 4720b2ab58942e67b7909b711568bb91d336ca03 (
plain)
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
|
import type { Poast } from "@/types/trill";
import Modal from "../modals/Modal";
import { useState } from "react";
import Post from "./Post";
import RP from "./RP";
import Avatar from "../Avatar";
import { stringToReact } from "./Reactions";
function StatsModal({ poast, close }: { close: any; poast: Poast }) {
const [tab, setTab] = useState("replies");
const replies = poast.children || [];
const quotes = poast.engagement.quoted;
const reposts = poast.engagement.shared;
const reacts = poast.engagement.reacts;
function set(e: React.MouseEvent, s: string) {
e.stopPropagation();
setTab(s);
}
// TODO revise the global thingy here
return (
<Modal close={close}>
<div id="stats-modal">
<Post poast={poast} refetch={() => {}} />
<div id="tabs">
<div
role="link"
className={"tab" + (tab === "replies" ? " active-tab" : "")}
onClick={(e) => set(e, "replies")}
>
<h4>Replies</h4>
</div>
<div
role="link"
className={"tab" + (tab === "quotes" ? " active-tab" : "")}
onClick={(e) => set(e, "quotes")}
>
<h4>Quotes</h4>
</div>
<div
role="link"
className={"tab" + (tab === "reposts" ? " active-tab" : "")}
onClick={(e) => set(e, "reposts")}
>
<h4>Reposts</h4>
</div>
<div
role="link"
className={"tab" + (tab === "reacts" ? " active-tab" : "")}
onClick={(e) => set(e, "reacts")}
>
<h4>Reacts</h4>
</div>
</div>
<div id="engagement">
{tab === "replies" ? (
<div id="replies">
{replies.map((p) => (
<div key={p} className="reply-stat">
<RP
host={poast.host}
id={p}
rter={undefined}
rtat={undefined}
rtid={undefined}
/>
</div>
))}
</div>
) : tab === "quotes" ? (
<div id="quotes">
{quotes.map((p) => (
<div key={p.pid.id} className="quote-stat">
<RP
host={p.pid.ship}
id={p.pid.id}
rter={undefined}
rtat={undefined}
rtid={undefined}
/>
</div>
))}
</div>
) : tab === "reposts" ? (
<div id="reposts">
{reposts.map((p) => (
<div key={p.pid.id} className="repost-stat">
<Avatar p={p.pid.ship} size={40} />
</div>
))}
</div>
) : tab === "reacts" ? (
<div id="reacts">
{Object.keys(reacts).map((p) => (
<div key={p} className="react-stat btw">
<Avatar p={p} size={32} />
{stringToReact(reacts[p])}
</div>
))}
</div>
) : null}
</div>
</div>
</Modal>
);
}
export default StatsModal;
|
