From 6de6958f91df1c503707ac39bb2c40dd08bda2ef Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Fri, 20 Sep 2024 23:11:27 +0300
Subject: [PATCH] Prepare for event table rendering

---
 src/Event.jsx                 |  3 +++
 src/Schedule.jsx              | 27 ++++++++++++++++++++++++++-
 src/hooks/useScheduleTable.js | 17 +++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/Event.jsx
 create mode 100644 src/hooks/useScheduleTable.js

diff --git a/src/Event.jsx b/src/Event.jsx
new file mode 100644
index 0000000..25a7dbd
--- /dev/null
+++ b/src/Event.jsx
@@ -0,0 +1,3 @@
+export default function Event() {
+
+}
diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index 20951be..0593029 100644
--- a/src/Schedule.jsx
+++ b/src/Schedule.jsx
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import useSchedule from './hooks/useSchedule.js';
 import { getSpeakerName, isTrackHidden } from './utils.js';
 import { Fragment } from 'react';
+import useScheduleTable from './hooks/useScheduleTable.js';
+import Event from './Event.jsx';
 
 export default function Schedule({
     conferenceId,
@@ -12,18 +14,41 @@ export default function Schedule({
         speakers,
         tracks,
         halls,
+        slots,
         isLoading,
         loadingProgress,
     } = useSchedule(conferenceId);
 
+    const {
+        header,
+        rows,
+    } = useScheduleTable({
+        events,
+        halls,
+        slots,
+        lang,
+    });
+
     return (<>
         {isLoading && <>Loading... <progress value={loadingProgress} /></>}
         {halls && <table border="1">
             <thead>
                 <tr>
-                    {Object.entries(halls).map(([hallId, hall]) => <th key={hallId}>{hall.name[lang]}</th>)}
+                    {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
                 </tr>
             </thead>
+            <tbody>
+                {rows.map(row => <tr key={row.id}>
+                    {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
+                        <Event {...cell.event} />
+                    </td>)}
+                </tr>)}
+            </tbody>
+            <tfoot>
+                <tr>
+                    {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
+                </tr>
+            </tfoot>
         </table>}
         {tracks && Object.entries(tracks).filter(([, track]) =>
             !isTrackHidden(track)
diff --git a/src/hooks/useScheduleTable.js b/src/hooks/useScheduleTable.js
new file mode 100644
index 0000000..536af2f
--- /dev/null
+++ b/src/hooks/useScheduleTable.js
@@ -0,0 +1,17 @@
+export default function useScheduleTable({
+    halls = {},
+    lang,
+}) {
+    const hallIds = new Set(Object.keys(halls));
+    const header = Object.entries(halls).filter(([id]) => hallIds.has(id)).map(([id, hall]) => ({
+        id,
+        name: hall.name[lang],
+    }));
+
+    const rows = [];
+
+    return {
+        header,
+        rows,
+    };
+}