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>
+                {header.length > 0 && <thead>
                     <tr>
                         {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                     </tr>
-                </thead>
+                </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,10 +6,12 @@ export default function useScheduleTable({
     events = {},
     slots = {},
 }) {
-    const filteredEvents = useMemo(() => events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true), [eventTypeId, events]);
+    return useMemo(() => {
-    const filteredEventIds = useMemo(() => filteredEvents.map(event => event.id), [filteredEvents]);
+        const filteredEvents = events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true);
-    const filteredHallIds = useMemo(() => new Set(slots.filter(slot => filteredEventIds.includes(slot.event_id)).map(slot => slot.hall_id)), [filteredEventIds, slots]);
+        const filteredEventIds = filteredEvents.map(event => event.id);
-    const header = useMemo(() => halls.filter(hall => filteredHallIds.has(hall.id)), [filteredHallIds, halls]);
+        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,
@@ -27,4 +29,5 @@ export default function useScheduleTable({
             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),
                 ];
             })),
         })