68 lines
2.3 KiB
JavaScript
68 lines
2.3 KiB
JavaScript
import React, { memo, useMemo, useState } from "react";
|
||
|
||
function EventsTab({ accountEvents, formatTimestamp, onClearEvents }) {
|
||
const [typeFilter, setTypeFilter] = useState("all");
|
||
const [query, setQuery] = useState("");
|
||
|
||
const eventTypes = useMemo(() => {
|
||
const types = new Set(accountEvents.map((event) => event.eventType));
|
||
return ["all", ...Array.from(types)];
|
||
}, [accountEvents]);
|
||
|
||
const filtered = useMemo(() => {
|
||
const q = query.trim().toLowerCase();
|
||
return accountEvents.filter((event) => {
|
||
if (typeFilter !== "all" && event.eventType !== typeFilter) return false;
|
||
if (!q) return true;
|
||
const text = [event.eventType, event.message, event.phone, event.accountId]
|
||
.join(" ")
|
||
.toLowerCase();
|
||
return text.includes(q);
|
||
});
|
||
}, [accountEvents, typeFilter, query]);
|
||
|
||
return (
|
||
<section className="card logs">
|
||
<div className="row-header">
|
||
<h2>События аккаунтов</h2>
|
||
<button type="button" className="danger" onClick={onClearEvents}>Сбросить</button>
|
||
</div>
|
||
<div className="row-inline column">
|
||
<input
|
||
type="text"
|
||
value={query}
|
||
onChange={(event) => setQuery(event.target.value)}
|
||
placeholder="Поиск по событиям"
|
||
/>
|
||
<div className="task-filters">
|
||
{eventTypes.map((type) => (
|
||
<button
|
||
key={type}
|
||
type="button"
|
||
className={`chip ${typeFilter === type ? "active" : ""}`}
|
||
onClick={() => setTypeFilter(type)}
|
||
>
|
||
{type === "all" ? "Все" : type}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{filtered.length === 0 && <div className="empty">Событий нет.</div>}
|
||
{filtered.map((event) => (
|
||
<div key={event.id} className="log-row">
|
||
<div className="log-time">
|
||
<div>{formatTimestamp(event.createdAt)}</div>
|
||
<div>{event.eventType}</div>
|
||
</div>
|
||
<div className="log-details">
|
||
<div>Аккаунт: {event.phone || event.accountId}</div>
|
||
<div className="log-errors">{event.message}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default memo(EventsTab);
|