Implement slot time, move table cell components to a directory

src/Schedule/Cell/DateHeader.jsx

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

src/Schedule/Cell/Event.jsx

@@ -1,6 +1,6 @@
-import { isTrackHidden } from './utils.js';
+import { isTrackHidden } from '../utils.js';
-import Speaker from './Speaker.jsx';
+import Speaker from '../Speaker.jsx';
-import FeedbackLink from './FeedbackLink.jsx';
+import FeedbackLink from '../FeedbackLink.jsx';
 
 export default function Event(event) {
     return (<>

src/Schedule/Cell/SlotTime.jsx

@@ -0,0 +1,8 @@
+export default function SlotTime({
+    start,
+    end,
+}) {
+    // TODO: format with date-fns
+    return start.getHours().toString().concat(':').concat(start.getMinutes()).concat(' - ').concat(end.getHours())
+        .concat(':').concat(end.getMinutes());
+}

src/Schedule/Schedule.jsx

@@ -3,12 +3,13 @@ import useSchedule from '../hooks/useSchedule.js';
 import { isTrackHidden } from './utils.js';
 import { Fragment, useState } from 'react';
 import useScheduleTable from '../hooks/useScheduleTable.js';
-import Event from './Event.jsx';
+import Event from './Cell/Event.jsx';
 import './Schedule.scss';
 import { langs } from './constants.js';
 import Speaker from './Speaker.jsx';
 import FeedbackLink from './FeedbackLink.jsx';
-import Day from './Day.jsx';
+import DateHeader from './Cell/DateHeader.jsx';
+import SlotTime from './Cell/SlotTime.jsx';
 
 export default function Schedule({
     conferenceId,
@@ -56,7 +57,8 @@ export default function Schedule({
                 <tbody>
                     {rows.map(row => <tr key={row.id}>
                         {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
-                            {cell.day && <Day date={cell.day} />}
+                            {cell.dateHeader && <DateHeader date={cell.dateHeader} />}
+                            {cell.slotTime && <SlotTime {...cell.slotTime} />}
                             {cell.event && <Event {...cell.event} />}
                         </td>)}
                     </tr>)}

src/hooks/useScheduleTable.js

@@ -39,6 +39,7 @@ export default function useScheduleTable({
         const rows = microslots.flatMap((date, index, array) => {
             const isFirst = index === 0;
             const isLast = index === array.length - 1;
+            const nextDate = !isLast ? array[index + 1] : null;
             const isFirstForTheDay = index > 0 && !isSameDay(date, array[index - 1]);
             const isLastForTheDay = array?.[index + 1] && !isSameDay(date, array[index + 1]);
 
@@ -53,22 +54,25 @@ export default function useScheduleTable({
                         attributes: {
                             colSpan: header.length,
                         },
-                        day: date,
+                        dateHeader: date,
-                    }]
+                    }],
                 }] : [],
                 ...showSlot ? [{
                     id: 'slot-'.concat(date.getTime().toString()),
                     cells: [{
                         id: 1,
-                        day: date, // TODO replace with slot time
+                        slotTime: {
+                            start: date,
+                            end: nextDate,
+                        }
                     }, {
                         id: 2,
-                    }],
                         // attributes: {
                         //     className: 'schedule-'.concat(slot.event.language).concat(' ').concat(slot.event.track?.css_class),
                         //     colSpan: 2,
                         // },
                         // event: slot.event,
+                    }],
                 }] : [],
             ];
         });