Hide table header when no items are available

src/Schedule/Schedule.jsx

@@ -48,11 +48,11 @@ export default function Schedule({
         {isComplete && <div className="schedule">
             <hr/>
             <table>
-                <thead>
-                <tr>
-                    {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
-                </tr>
-                </thead>
+                {header.length > 0 && <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>
-                <tfoot>
+                {header.length > 0 && <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,25 +6,28 @@ export default function useScheduleTable({
     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]);
+    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 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,
-    };
+        return {
+            header,
+            rows,
+        };
+    }, [eventTypeId, events, halls, slots]);
 }

src/utils.js

@@ -49,11 +49,12 @@ 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,
-                    collection[fn](item => item.id === key),
+                    Array.isArray(key) ?
+                        collection.filter(item => key.includes(item.id)) :
+                        collection.find(item => item.id === key),
                 ];
             })),
         })