68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import React, { useMemo, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import type { SessionSnapshot } from "../../../shared/types";
|
|
import ChatList from "./ChatList";
|
|
import { buildThreads } from "./utils";
|
|
import { useI18n } from "../i18n";
|
|
|
|
export default function ChatListScreen({
|
|
session,
|
|
meId,
|
|
isBanker,
|
|
sessionId,
|
|
backHref,
|
|
unreadIds,
|
|
}: {
|
|
session: SessionSnapshot;
|
|
meId: string;
|
|
isBanker: boolean;
|
|
sessionId: string;
|
|
backHref: string;
|
|
unreadIds: Set<string>;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const [query, setQuery] = useState("");
|
|
const threads = useMemo(() => buildThreads(session, meId, isBanker), [session, meId, isBanker]);
|
|
const filtered = threads.filter((thread) =>
|
|
thread.name.toLowerCase().includes(query.trim().toLowerCase()),
|
|
);
|
|
const list = query.trim() ? filtered : threads;
|
|
const conversationLabel =
|
|
threads.length === 1
|
|
? t("chat.conversationCountOne")
|
|
: t("chat.conversationCount", { count: threads.length });
|
|
|
|
return (
|
|
<div className="chat-shell">
|
|
<div className="chat-screen">
|
|
<header className="chat-screen-header">
|
|
<Link className="chat-back" to={backHref}>
|
|
← {t("chat.back")}
|
|
</Link>
|
|
<div className="chat-screen-title">
|
|
<h1>{t("chat.title")}</h1>
|
|
<span>{conversationLabel}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="chat-search">
|
|
<input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder={t("chat.searchPlaceholder")}
|
|
/>
|
|
</div>
|
|
|
|
<ChatList threads={list} basePath={`/play/${sessionId}/chat`} unreadIds={unreadIds} />
|
|
|
|
<Link
|
|
className="chat-fab"
|
|
to={`/play/${sessionId}/chat/new`}
|
|
aria-label={t("chat.newTitle")}
|
|
>
|
|
+
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|