102 lines
4.4 KiB
TypeScript
102 lines
4.4 KiB
TypeScript
import { ArrowLeft } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { api, errorMessage } from "../api";
|
|
import { Alert, Badge, EmptyRow, JsonBlock, LoadingSurface, PageFrame, SectionHead, Summary } from "../components/ui";
|
|
import { useI18n } from "../i18n";
|
|
import { formatUnix } from "../lib/format";
|
|
import type { Navigate } from "../routing";
|
|
import type { GroupMessageDetail } from "../types";
|
|
|
|
export function GroupMessageDetailPage({ channelID, msgID, navigate }: { channelID: number; msgID: number; navigate: Navigate }) {
|
|
const { t } = useI18n();
|
|
const [detail, setDetail] = useState<GroupMessageDetail | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
async function load() {
|
|
setError("");
|
|
try {
|
|
setDetail(await api.groupMessage(channelID, msgID));
|
|
} catch (err) {
|
|
setError(errorMessage(err));
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [channelID, msgID]);
|
|
|
|
if (error) {
|
|
return <Alert>{error}</Alert>;
|
|
}
|
|
if (!detail) {
|
|
return <LoadingSurface label={t("common.loading")} />;
|
|
}
|
|
|
|
const msg = detail.Message;
|
|
return (
|
|
<PageFrame
|
|
title={t("messages.groupDetailTitle", { id: msg.ID })}
|
|
eyebrow={t("messages.detailEyebrow")}
|
|
actions={<button className="btn icon-text" onClick={() => navigate("/messages/groups")}><ArrowLeft size={15} /> {t("messages.backGroup")}</button>}
|
|
>
|
|
<div className="stacked-sections">
|
|
<section className="entity-head">
|
|
<div>
|
|
<div className="entity-title">{t("messages.channelGroupTitle", { id: msg.ChannelID })}</div>
|
|
<div className="entity-subtitle">{t("messages.senderSubtitle", { sender: msg.SenderUserID, date: formatUnix(msg.Date) })}</div>
|
|
</div>
|
|
<div className="entity-badges">
|
|
{msg.Deleted ? <Badge tone="danger">{t("common.deleted")}</Badge> : <Badge>{t("common.survived")}</Badge>}
|
|
{msg.Pinned && <Badge tone="warn">{t("messages.pinned")}</Badge>}
|
|
{msg.Post && <Badge>{t("messages.channelPost")}</Badge>}
|
|
<Badge>pts {msg.PTS}</Badge>
|
|
</div>
|
|
</section>
|
|
<div className="summary-grid">
|
|
<Summary label={t("common.messageId")} value={String(msg.ID)} mono />
|
|
<Summary label={t("messages.channelGroup")} value={String(msg.ChannelID)} mono />
|
|
<Summary label="From Peer" value={`${msg.FromPeerType}:${msg.FromPeerID}`} mono />
|
|
<Summary label={t("common.views")} value={String(msg.ViewsCount)} />
|
|
</div>
|
|
<section className="section-block">
|
|
<SectionHead title={t("messages.channelMessageRow")} text={t("messages.channelMessagesSnapshot")} />
|
|
<JsonBlock value={detail.MessageJSON} />
|
|
</section>
|
|
<section className="section-block">
|
|
<SectionHead title={t("messages.channelRow")} text={t("messages.channelSnapshot")} />
|
|
<JsonBlock value={detail.ChannelJSON} />
|
|
</section>
|
|
<section className="section-block">
|
|
<SectionHead title={t("messages.channelUpdateEvents")} text={t("messages.channelEventsSource")} />
|
|
<div className="table-wrap">
|
|
<table className="data-table">
|
|
<thead><tr><th>PTS</th><th>{t("common.count")}</th><th>{t("common.type")}</th><th>{t("common.messageId")}</th><th>{t("common.sender")}</th><th>{t("common.time")}</th></tr></thead>
|
|
<tbody>
|
|
{detail.UpdateEvents.map((row) => (
|
|
<tr key={`${row.PTS}-${row.Type}-${row.MessageID}`}>
|
|
<td>{row.PTS}</td>
|
|
<td>{row.PTSCount}</td>
|
|
<td>{row.Type}</td>
|
|
<td>{row.MessageID}</td>
|
|
<td>{row.SenderUserID}</td>
|
|
<td>{formatUnix(row.Date)}</td>
|
|
</tr>
|
|
))}
|
|
{detail.UpdateEvents.length === 0 && <EmptyRow colSpan={6} />}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<section className="section-block">
|
|
<SectionHead title={t("messages.eventJson")} />
|
|
<div className="raw-grid">
|
|
{detail.UpdateEvents.map((row) => (
|
|
<JsonBlock key={`${row.PTS}-${row.Type}-json`} value={row.JSON} />
|
|
))}
|
|
{detail.UpdateEvents.length === 0 && <div className="empty-panel">{t("common.noResults")}</div>}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</PageFrame>
|
|
);
|
|
}
|