Normalize API responses before parsing/rendering

src/Schedule/Schedule.jsx

@@ -41,7 +41,7 @@ export default function Schedule({
     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 =>
+            {eventTypes.map(eventType =>
                 <option key={eventType.id} value={eventType.id}>{eventType.name[lang]}</option>)}
         </select>}
         {isLoading && <progress value={loadingProgress}/>}
@@ -69,9 +69,7 @@ export default function Schedule({
             <div className="separator"/>
             <table>
                 <tbody>
-                    {Object.values(tracks).filter(track =>
+                    {tracks.filter(track => !isTrackHidden(track)).map(track => <tr key={track.id}>
-                        !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}>
@@ -80,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) && <>
@@ -99,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

@@ -6,10 +6,10 @@ export default function useScheduleTable({
     events = {},
     slots = {},
 }) {
-    const filteredEvents = useMemo(() => Object.values(events).filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
+    const filteredEvents = useMemo(() => 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 filteredEventIds = useMemo(() => 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 filteredHallIds = useMemo(() => new Set(slots.filter(slot => filteredEventIds.includes(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 header = useMemo(() => halls.filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
 
     const rows = filteredEvents.map(event => ({
         id: event.id,

src/utils.js

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