/
EventsTable.tsx
50 lines (41 loc) · 1.35 KB
/
EventsTable.tsx
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
'use client';
import { useEffect, useMemo, useState } from 'react';
import { DataTable } from '~/components/DataTable/data-table';
import ExportButton from '~/components/ExportButton';
import { type Event } from '~/db/getEvents';
import { getColumns } from './Columns';
export type EventType = {
text: string;
isSelected: boolean;
};
export default function EventsTable({ events }: { events: Event[] }) {
const [eventTypes, setEventTypes] = useState<EventType[]>([]);
useEffect(() => {
const eventTypesMap = new Map<string, EventType>();
events.forEach((event) =>
eventTypesMap.set(event.type, { text: event.type, isSelected: true }),
);
setEventTypes([...Array.from(eventTypesMap.values())]);
}, [events]);
const filteredEvents = useMemo(() => {
const filters = eventTypes
.filter((type) => type.isSelected)
.map((type) => type.text);
return events.filter((event) => filters.includes(event.type));
}, [eventTypes, events]);
return (
<div>
<div className="mt-2 flex items-center justify-between">
<h2>Events</h2>
<ExportButton data={events} filename="events.csv" />
</div>
<div className="mt-2">
<DataTable
columns={getColumns(eventTypes, setEventTypes)}
data={filteredEvents}
pagination={true}
/>
</div>
</div>
);
}