src/Schedule/Schedule.jsx

@@ -48,11 +48,11 @@ export default function Schedule({
         {isComplete && <div className="schedule">
             <hr/>
             <table>
-                {header.length > 0 && <thead>
-                    <tr>
-                        {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
-                    </tr>
-                </thead>}
+                <thead>
+                <tr>
+                    {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                </tr>
+                </thead>
                 <tbody>
                     {rows.map(row => <tr key={row.id}>
                         {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
@@ -60,11 +60,11 @@ export default function Schedule({
                         </td>)}
                     </tr>)}
                 </tbody>
-                {header.length > 0 && <tfoot>
+                <tfoot>
                     <tr>
                         {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                     </tr>
-                </tfoot>}
+                </tfoot>
             </table>
             <div className="separator"/>
             <table>

src/hooks/useScheduleTable.js

@@ -6,28 +6,25 @@ export default function useScheduleTable({
     events = {},
     slots = {},
 }) {
-    return useMemo(() => {
-        const filteredEvents = events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true);
-        const filteredEventIds = filteredEvents.map(event => event.id);
-        const filteredSlots = slots.filter(slot => filteredEventIds.includes(slot.event_id));
-        const filteredHallIds = new Set(filteredSlots.map(slot => slot.hall_id));
-        const header = halls.filter(hall => filteredHallIds.has(hall.id));
+    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,
-                attributes: {
-                    className: 'schedule-'.concat(event.language).concat(' ').concat(event.track?.css_class),
-                    colSpan: 2,
-                },
-                event,
-            }],
-        }));
+    const rows = filteredEvents.map(event => ({
+        id: event.id,
+        cells: [{
+            id: 1,
+            attributes: {
+                className: 'schedule-'.concat(event.language).concat(' ').concat(event.track?.css_class),
+                colSpan: 2,
+            },
+            event,
+        }],
+    }));
 
-        return {
-            header,
-            rows,
-        };
-    }, [eventTypeId, events, halls, slots]);
+    return {
+        header,
+        rows,
+    };
 }

src/utils.js

@@ -49,12 +49,11 @@ export const normalizeResponse = (items = [], relations = []) =>
             ...item,
             ...Object.fromEntries(relations.map(([field, collection, idField]) => {
                 const key = item[idField];
+                const fn = Array.isArray(key) ? 'filter' : 'find';
 
                 return [
                     field,
-                    Array.isArray(key) ?
-                        collection.filter(item => key.includes(item.id)) :
-                        collection.find(item => item.id === key),
+                    collection[fn](item => item.id === key),
                 ];
             })),
         })