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({ {rows.map(row => {row.cells.map(cell => - {cell.day && } + {cell.dateHeader && } + {cell.slotTime && } {cell.event && } )} )} 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, }] : [], ]; });