Normalize API responses before parsing/rendering

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>
+            {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}>
@@ -61,9 +69,7 @@ export default function Schedule({
             <div className="separator"/>
             <table>
                 <tbody>
-                    {Object.values(tracks).filter(track =>
-                        !isTrackHidden(track)
-                    ).map(track => <tr key={track.id}>
+                    {tracks.filter(track => !isTrackHidden(track)).map(track => <tr key={track.id}>
                         <td className={track.css_class}>{track.name[lang]}</td>
                     </tr>)}
                     {Object.entries(langs).map(([langId, langName]) => <tr key={langId}>
@@ -72,7 +78,7 @@ export default function Schedule({
                 </tbody>
             </table>
             <div className="separator" />
-            {Object.values(events).map(event => <section key={event.id} id={'event-'.concat(event.id)}>
+            {events.map(event => <section key={event.id} id={'event-'.concat(event.id)}>
                 <p>
                     <strong>{event.title}</strong>
                     {event.participant_users && !isTrackHidden(event.track) && <>
@@ -91,13 +97,13 @@ export default function Schedule({
             </section>)}
             {<>
                 <div className="grid members">
-                    {Object.values(speakers).map(speaker => <div key={speaker.id} className="col4 wmember">
+                    {speakers.map(speaker => <div key={speaker.id} className="col4 wmember">
                         <a href={'#'.concat(speaker.id)}>
                             <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
                         </a>
                     </div>)}
                 </div>
-                {Object.values(speakers).map(speaker => <Fragment key={speaker.id}>
+                {speakers.map(speaker => <Fragment key={speaker.id}>
                     <div className="speaker" id={'speaker-'.concat(speaker.id)}>
                         <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
                         <h3>{getSpeakerName(speaker)}</h3>

src/hooks/useSchedule.js

@@ -4,7 +4,7 @@ import useTracks from './useTracks.js';
 import useEventTypes from './useEventTypes.js';
 import useHalls from './useHalls.js';
 import useSlots from './useSlots.js';
-import { addIdAndRelations, calculateProgress } from '../utils.js';
+import { calculateProgress, normalizeResponse } from '../utils.js';
 import { useMemo } from 'react';
 
 export default function useSchedule(conferenceId) {
@@ -14,7 +14,7 @@ export default function useSchedule(conferenceId) {
         isValidating: speakersValidating,
     } = useSpeakers(conferenceId);
 
-    const speakers = useMemo(() => addIdAndRelations(speakersResponse || []), [speakersResponse]);
+    const speakers = useMemo(() => normalizeResponse(speakersResponse), [speakersResponse]);
 
     const {
         data: tracksResponse,
@@ -22,7 +22,7 @@ export default function useSchedule(conferenceId) {
         isValidating: tracksValidating,
     } = useTracks(conferenceId);
 
-    const tracks = useMemo(() => addIdAndRelations(tracksResponse || []), [tracksResponse]);
+    const tracks = useMemo(() => normalizeResponse(tracksResponse), [tracksResponse]);
 
     const {
         data: eventTypesResponse,
@@ -30,7 +30,7 @@ export default function useSchedule(conferenceId) {
         isValidating: eventTypesValidating,
     } = useEventTypes(conferenceId);
 
-    const eventTypes = useMemo(() => addIdAndRelations(eventTypesResponse || []), [eventTypesResponse]);
+    const eventTypes = useMemo(() => normalizeResponse(eventTypesResponse), [eventTypesResponse]);
 
     const {
         data: hallsResponse,
@@ -38,7 +38,7 @@ export default function useSchedule(conferenceId) {
         isValidating: hallsValidating,
     } = useHalls(conferenceId);
 
-    const halls = useMemo(() => addIdAndRelations(hallsResponse || []), [hallsResponse]);
+    const halls = useMemo(() => normalizeResponse(hallsResponse), [hallsResponse]);
 
     const {
         data: eventsResponse,
@@ -46,7 +46,7 @@ export default function useSchedule(conferenceId) {
         isValidating: eventsValidating,
     } = useEvents(conferenceId);
 
-    const events = useMemo(() => addIdAndRelations(eventsResponse || [], [
+    const events = useMemo(() => normalizeResponse(eventsResponse, [
         ['event_type', eventTypes, 'event_type_id'],
         ['track', tracks, 'track_id'],
         ['participant_users', speakers, 'participant_user_ids'],
@@ -58,7 +58,7 @@ export default function useSchedule(conferenceId) {
         isValidating: slotsValidating,
     } = useSlots(conferenceId);
 
-    const slots = useMemo(() => addIdAndRelations(slotsResponse || [], [
+    const slots = useMemo(() => normalizeResponse(slotsResponse, [
         ['hall', halls, 'hall_id'],
         ['event', events, 'event_id'],
     ]), [slotsResponse, halls, events]);

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(() => events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
+    const filteredEventIds = useMemo(() => filteredEvents.map(event => event.id), [filteredEvents]);
+    const filteredHallIds = useMemo(() => new Set(slots.filter(slot => filteredEventIds.includes(slot.event_id)).map(slot => slot.hall_id)), [filteredEventIds, slots]);
+    const header = useMemo(() => halls.filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
+
+    const rows = filteredEvents.map(event => ({
         id: event.id,
         cells: [{
             id: 1,

src/utils.js

@@ -42,14 +42,19 @@ export function calculateProgress(...elements) {
     };
 }
 
-export const addIdAndRelations = (items, relations = []) =>
-    Object.fromEntries(Object.entries(items).map(([id, item]) =>
-        ([id, {
+export const normalizeResponse = (items = [], relations = []) =>
+    Object.entries(items).map(([id, item]) =>
+        ({
             id: parseInt(id, 10),
             ...item,
-            ...Object.fromEntries(relations.map(([field, collection, idField]) => ([
-                field,
-                Array.isArray(item[idField]) ? item[idField].map(id => collection[id]) : collection[item[idField]],
-            ]))),
-        }])
-    ));
+            ...Object.fromEntries(relations.map(([field, collection, idField]) => {
+                const key = item[idField];
+                const fn = Array.isArray(key) ? 'filter' : 'find';
+
+                return [
+                    field,
+                    collection[fn](item => item.id === key),
+                ];
+            })),
+        })
+    );