83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
|
import React, { useMemo } from "react";
|
||
|
|
import { Link, Navigate } from "react-router-dom";
|
||
|
|
import type { SessionSnapshot } from "../../../shared/types";
|
||
|
|
import ChatThread from "./ChatThread";
|
||
|
|
import { buildThreads, getThreadMessages } from "./utils";
|
||
|
|
import { useI18n } from "../i18n";
|
||
|
|
|
||
|
|
export default function ChatThreadScreen({
|
||
|
|
session,
|
||
|
|
meId,
|
||
|
|
isBanker,
|
||
|
|
sessionId,
|
||
|
|
chatId,
|
||
|
|
onSend,
|
||
|
|
}: {
|
||
|
|
session: SessionSnapshot;
|
||
|
|
meId: string;
|
||
|
|
isBanker: boolean;
|
||
|
|
sessionId: string;
|
||
|
|
chatId: string;
|
||
|
|
onSend: (body: string, groupId: string | null) => void;
|
||
|
|
}) {
|
||
|
|
const { t } = useI18n();
|
||
|
|
const threads = useMemo(() => buildThreads(session, meId, isBanker), [session, meId, isBanker]);
|
||
|
|
const thread = threads.find((item) => item.id === chatId) ?? null;
|
||
|
|
|
||
|
|
if (!thread) {
|
||
|
|
return <Navigate to={`/play/${sessionId}/chat`} replace />;
|
||
|
|
}
|
||
|
|
|
||
|
|
const messages = getThreadMessages(session, thread.id);
|
||
|
|
const memberCount = thread.members.length;
|
||
|
|
const headerSub =
|
||
|
|
thread.kind === "global"
|
||
|
|
? t("chat.everyone")
|
||
|
|
: thread.kind === "direct"
|
||
|
|
? t("chat.directMessage")
|
||
|
|
: memberCount === 1
|
||
|
|
? t("chat.memberCountOne")
|
||
|
|
: t("chat.memberCount", { count: memberCount });
|
||
|
|
|
||
|
|
const nameById = useMemo(() => {
|
||
|
|
const lookup: Record<string, string> = {};
|
||
|
|
session.players.forEach((player) => {
|
||
|
|
lookup[player.id] = player.name;
|
||
|
|
});
|
||
|
|
return lookup;
|
||
|
|
}, [session.players]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="chat-shell">
|
||
|
|
<div className="chat-screen chat-screen--thread">
|
||
|
|
<header className="chat-thread-header">
|
||
|
|
<div className="chat-thread-leading">
|
||
|
|
<Link className="chat-back" to={`/play/${sessionId}/chat`}>
|
||
|
|
← {t("chat.backChats")}
|
||
|
|
</Link>
|
||
|
|
<div>
|
||
|
|
<h1>{thread.name}</h1>
|
||
|
|
<span>{headerSub}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="chat-thread-tag">
|
||
|
|
{thread.kind === "global"
|
||
|
|
? t("chat.global")
|
||
|
|
: thread.kind === "direct"
|
||
|
|
? t("chat.direct")
|
||
|
|
: t("chat.group")}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<ChatThread
|
||
|
|
thread={thread}
|
||
|
|
messages={messages}
|
||
|
|
meId={meId}
|
||
|
|
nameById={nameById}
|
||
|
|
onSend={(body) => onSend(body, thread.id === "global" ? null : thread.id)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|