From e52f045775e8314e3e738cf6dc92b6c4d4a47817 Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Sat, 28 Sep 2024 20:08:45 +0300
Subject: [PATCH] Implement slot time, move table cell components to a
 directory

---
 src/Schedule/{Day.jsx => Cell/DateHeader.jsx} |  4 ++--
 src/Schedule/{ => Cell}/Event.jsx             |  6 +++---
 src/Schedule/Cell/SlotTime.jsx                |  8 ++++++++
 src/Schedule/Schedule.jsx                     |  8 +++++---
 src/hooks/useScheduleTable.js                 | 20 +++++++++++--------
 5 files changed, 30 insertions(+), 16 deletions(-)
 rename src/Schedule/{Day.jsx => Cell/DateHeader.jsx} (80%)
 rename src/Schedule/{ => Cell}/Event.jsx (76%)
 create mode 100644 src/Schedule/Cell/SlotTime.jsx

diff --git a/src/Schedule/Day.jsx b/src/Schedule/Cell/DateHeader.jsx
similarity index 80%
rename from src/Schedule/Day.jsx
rename to src/Schedule/Cell/DateHeader.jsx
index 83e061e..12ab0d6 100644
--- a/src/Schedule/Day.jsx
+++ b/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,
 };
diff --git a/src/Schedule/Event.jsx b/src/Schedule/Cell/Event.jsx
similarity index 76%
rename from src/Schedule/Event.jsx
rename to src/Schedule/Cell/Event.jsx
index eef8413..59a71e0 100644
--- a/src/Schedule/Event.jsx
+++ b/src/Schedule/Cell/Event.jsx
@@ -1,6 +1,6 @@
-import { isTrackHidden } from './utils.js';
-import Speaker from './Speaker.jsx';
-import FeedbackLink from './FeedbackLink.jsx';
+import { isTrackHidden } from '../utils.js';
+import Speaker from '../Speaker.jsx';
+import FeedbackLink from '../FeedbackLink.jsx';
 
 export default function Event(event) {
     return (<>
diff --git a/src/Schedule/Cell/SlotTime.jsx b/src/Schedule/Cell/SlotTime.jsx
new file mode 100644
index 0000000..7bfcb04
--- /dev/null
+++ b/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());
+}
diff --git a/src/Schedule/Schedule.jsx b/src/Schedule/Schedule.jsx
index afdd10e..3ebcdb8 100644
--- a/src/Schedule/Schedule.jsx
+++ b/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>)}
diff --git a/src/hooks/useScheduleTable.js b/src/hooks/useScheduleTable.js
index 6a99809..070b616 100644
--- a/src/hooks/useScheduleTable.js
+++ b/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,
                     }],
-                    // attributes: {
-                    //     className: 'schedule-'.concat(slot.event.language).concat(' ').concat(slot.event.track?.css_class),
-                    //     colSpan: 2,
-                    // },
-                    // event: slot.event,
                 }] : [],
             ];
         });