The one that got away

src/Schedule/Schedule.jsx

@@ -19,7 +19,7 @@ export default function Schedule({
         speakers: allSpeakers,
         tracks: allTracks,
         eventTypes,
-        halls,
+        halls: allHalls,
         events: allEvents,
         slots,
         isLoading,
@@ -30,16 +30,16 @@ export default function Schedule({
     const [eventTypeId, setEventTypeId] = useState(0);
 
     const {
-        header,
         rows,
         speakers,
         tracks,
+        halls,
         events,
     } = useScheduleTable({
         eventTypeId,
         speakers: allSpeakers,
         tracks: allTracks,
-        halls,
+        halls: allHalls,
         events: allEvents,
         slots,
     });
@@ -55,9 +55,10 @@ export default function Schedule({
             <hr/>
             {rows.length > 0 && <>
                 <table>
-                    {header.length > 0 && <thead>
+                    {halls.length > 0 && <thead>
                         <tr>
-                            {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                            <th />
+                            {halls.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                         </tr>
                     </thead>}
                     <tbody>
@@ -69,9 +70,10 @@ export default function Schedule({
                             </td>)}
                         </tr>)}
                     </tbody>
-                    {header.length > 0 && <tfoot>
+                    {halls.length > 0 && <tfoot>
                         <tr>
-                            {header.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
+                            <th />
+                            {halls.map(hall => <th key={hall.id}>{hall.name[lang]}</th>)}
                         </tr>
                     </tfoot>}
                 </table>

src/hooks/useScheduleTable.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { sorter } from '../utils.js';
-import { langs } from '../Schedule/constants.js';
 import { compareAsc, getTime, isSameDay, toDate } from 'date-fns';
 
 export default function useScheduleTable({
@@ -27,13 +26,6 @@ export default function useScheduleTable({
         const halls = allHalls.filter(hall => hallIds.has(hall.id));
         const skipHallSlots = new Map();
 
-        const header = [{
-                id: 0,
-                name: Object.fromEntries(Object.keys(langs).map(lang => [lang, ''])),
-            },
-            ...halls,
-        ];
-
         const rows = microslots.flatMap((date, slotsIndex, slotsArray) => {
             const isFirst = slotsIndex === 0;
             const isLast = slotsIndex === slotsArray.length - 1;
@@ -126,7 +118,7 @@ export default function useScheduleTable({
                     cells: [{
                         id: 'header',
                         attributes: {
-                            colSpan: header.length,
+                            colSpan: halls.length + 1,
                         },
                         dateHeader: date,
                     }],
@@ -148,9 +140,9 @@ export default function useScheduleTable({
         });
 
         return {
-            header,
             rows,
             tracks,
+            halls,
             events,
             speakers,
         };