Add date functions, add day headers in the schedule

src/Schedule/Day.jsx

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export default function Day({
+    date,
+}) {
+    // TODO: format with date-fns
+    return date.getDate().toString().concat('.').concat((date.getMonth() + 1).toString()).concat(' - ').concat(date.getDay());
+}
+
+Day.propTypes = {
+    date: PropTypes.object.isRequired,
+};

src/Schedule/Schedule.jsx

@@ -8,6 +8,7 @@ import './Schedule.scss';
 import { langs } from './constants.js';
 import Speaker from './Speaker.jsx';
 import FeedbackLink from './FeedbackLink.jsx';
+import Day from './Day.jsx';
 
 export default function Schedule({
     conferenceId,
@@ -55,7 +56,8 @@ export default function Schedule({
                 <tbody>
                     {rows.map(row => <tr key={row.id}>
                         {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
-                            <Event {...cell.event} />
+                            {cell.day && <Day date={cell.day} />}
+                            {cell.event && <Event {...cell.event} />}
                         </td>)}
                     </tr>)}
                 </tbody>

src/hooks/useScheduleTable.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { sorter } from '../utils.js';
+import { getMidnightTimestamp, isSameDay, sorter } from '../utils.js';
 
 export default function useScheduleTable({
     eventTypeId,
@@ -12,7 +12,7 @@ export default function useScheduleTable({
         const filteredEventIds = filteredEvents.map(event => event.id);
         const filteredSlots = slots.sort(sorter('starts_at')).filter(slot => filteredEventIds.includes(slot.event_id));
         const days = Array.from(new Set(filteredSlots.map(slot =>
-            slot.starts_at.setHours(0, 0, 0, 0)
+            getMidnightTimestamp(slot.starts_at)
         ))).map(ts => new Date(ts));
         const filteredHallIds = new Set(filteredSlots.map(slot => slot.hall_id));
         const filteredHalls = halls.filter(hall => filteredHallIds.has(hall.id));
@@ -25,17 +25,28 @@ export default function useScheduleTable({
         void(hallSlots);
 
         const header = filteredHalls;
-        const rows = filteredEvents.map(event => ({
+        const rows = days.flatMap(day => [{
-            id: event.id,
+            id: 'header-'.concat(day.getTime().toString()),
             cells: [{
                 id: 1,
                 attributes: {
-                    className: 'schedule-'.concat(event.language).concat(' ').concat(event.track?.css_class),
+                    colSpan: header.length,
+                },
+                day,
+            }]
+        },
+            ...filteredSlots.filter(slot => isSameDay(slot.starts_at, day)).map(slot => ({
+                id: slot.id,
+                cells: [{
+                    id: 1,
+                    attributes: {
+                        className: 'schedule-'.concat(slot.event.language).concat(' ').concat(slot.event.track?.css_class),
                         colSpan: 2,
                     },
-                event,
+                    event: slot.event,
                 }],
-        }));
+            }))
+        ]);
 
         return {
             header,

src/utils.js

@@ -61,3 +61,9 @@ export const normalizeResponse = (items = [], relations = []) =>
             })),
         })
     );
+
+export const getMidnightTimestamp = date => (new Date(date.getTime())).setHours(0, 0, 0, 0);
+
+export function isSameDay(dateA, dateB) {
+    return getMidnightTimestamp(dateA) === getMidnightTimestamp(dateB);
+}