src/Schedule/Schedule.jsx

@@ -48,11 +48,11 @@ export default function Schedule({
         {isComplete && <div className="schedule">
             <hr/>
             <table>
-                {header.length > 0 && <thead>
+                <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>
-                {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,12 +6,10 @@ 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,
@@ -29,5 +27,4 @@ export default function useScheduleTable({
         header,
         rows,
     };
-    }, [eventTypeId, events, halls, slots]);
 }

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),
                 ];
             })),
         })