Add filtering by event type id

src/Schedule/Schedule.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import useSchedule from '../hooks/useSchedule.js';
 import { getSpeakerName, isTrackHidden } from './utils.js';
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import useScheduleTable from '../hooks/useScheduleTable.js';
 import Event from './Event.jsx';
 import defaultSpeaker from '../assets/default-speaker.png';
@@ -17,6 +17,7 @@ export default function Schedule({
     const {
         speakers,
         tracks,
+        eventTypes,
         halls,
         events,
         slots,
@@ -25,25 +26,32 @@ export default function Schedule({
         isComplete,
     } = useSchedule(conferenceId);
 
+    const [eventTypeId, setEventTypeId] = useState(0);
+
     const {
         header,
         rows,
     } = useScheduleTable({
-        tracks,
+        eventTypeId,
         halls,
         events,
         slots,
     });
 
     return (<>
+        {isComplete && <select value={eventTypeId} onChange={e => setEventTypeId(parseInt(e.target.value, 10))}>
+            <option value={0}>All event types</option>
+            {Object.values(eventTypes).map(eventType =>
+                <option key={eventType.id} value={eventType.id}>{eventType.name[lang]}</option>)}
+        </select>}
         {isLoading && <progress value={loadingProgress}/>}
         {isComplete && <div className="schedule">
-            <hr />
+            <hr/>
             <table>
                 <thead>
-                    <tr>
-                        {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
-                    </tr>
+                <tr>
+                    {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                </tr>
                 </thead>
                 <tbody>
                     {rows.map(row => <tr key={row.id}>

src/hooks/useScheduleTable.js

@@ -1,10 +1,17 @@
-export default function useScheduleTable({
-    events = {},
-    halls = {},
-}) {
-    const header = Object.values(halls);
+import { useMemo } from 'react';
 
-    const rows = Object.values(events).map(event => ({
+export default function useScheduleTable({
+    eventTypeId,
+    halls = {},
+    events = {},
+    slots = {},
+}) {
+    const filteredEvents = useMemo(() => Object.values(events).filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
+    const filteredEventIds = useMemo(() => new Set(filteredEvents.map(event => event.id)), [filteredEvents]);
+    const filteredHallIds = useMemo(() => new Set(Object.values(slots).filter(slot => filteredEventIds.has(slot.event_id)).map(slot => slot.hall_id)), [filteredEventIds, slots]);
+    const header = useMemo(() => Object.values(halls).filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
+
+    const rows = filteredEvents.map(event => ({
         id: event.id,
         cells: [{
             id: 1,