diff --git a/src/Schedule/Cell/DateHeader.jsx b/src/Schedule/Cell/DateHeader.jsx index 12ab0d6..e16b1ad 100644 --- a/src/Schedule/Cell/DateHeader.jsx +++ b/src/Schedule/Cell/DateHeader.jsx @@ -1,12 +1,19 @@ import PropTypes from 'prop-types'; +import { bg, enGB } from 'date-fns/locale'; +import { format } from 'date-fns'; export default function DateHeader({ date, + lang, }) { - // TODO: format with date-fns - return date.getDate().toString().concat('.').concat((date.getMonth() + 1).toString()).concat(' - ').concat(date.getDay()); + const locale = lang === 'bg' ? bg : enGB; + + return format(date, 'dd MMMM - EEEE', { + locale, + }); } DateHeader.propTypes = { date: PropTypes.object.isRequired, + lang: PropTypes.string, }; diff --git a/src/Schedule/Cell/SlotTime.jsx b/src/Schedule/Cell/SlotTime.jsx index 7bfcb04..d78de11 100644 --- a/src/Schedule/Cell/SlotTime.jsx +++ b/src/Schedule/Cell/SlotTime.jsx @@ -1,8 +1,8 @@ +import { format } from 'date-fns'; + 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()); + return format(start, 'HH:mm').concat(' - ').concat(format(end, 'HH:mm')); } diff --git a/src/Schedule/Schedule.jsx b/src/Schedule/Schedule.jsx index 3ebcdb8..f332e6c 100644 --- a/src/Schedule/Schedule.jsx +++ b/src/Schedule/Schedule.jsx @@ -57,7 +57,7 @@ export default function Schedule({ {rows.map(row => {row.cells.map(cell => - {cell.dateHeader && } + {cell.dateHeader && } {cell.slotTime && } {cell.event && } )} diff --git a/src/hooks/useScheduleTable.js b/src/hooks/useScheduleTable.js index 070b616..dcfff53 100644 --- a/src/hooks/useScheduleTable.js +++ b/src/hooks/useScheduleTable.js @@ -1,6 +1,7 @@ import { useMemo } from 'react'; -import { getMidnightTimestamp, isSameDay, sorter } from '../utils.js'; +import { sorter, toMidnight } from '../utils.js'; import { langs } from '../Schedule/constants.js'; +import { getTime, isSameDay, toDate } from 'date-fns'; export default function useScheduleTable({ eventTypeId, @@ -12,13 +13,11 @@ export default function useScheduleTable({ const filteredEvents = events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true); 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 => - getMidnightTimestamp(slot.starts_at) - ))).map(ts => new Date(ts)); + const days = Array.from(new Set(filteredSlots.map(slot => getTime(toMidnight(slot))))).map(ts => toDate(ts)); const microslots = Array.from(new Set(filteredSlots.flatMap(slot => [ - slot.starts_at.getTime(), - slot.ends_at.getTime(), - ]))).map(ts => new Date(ts)).sort(); + getTime(slot.starts_at), + getTime(slot.ends_at), + ]))).sort().map(ts => toDate(ts)); const filteredHallIds = new Set(filteredSlots.map(slot => slot.hall_id)); const filteredHalls = halls.filter(hall => filteredHallIds.has(hall.id)); const hallSlots = Object.fromEntries(filteredHalls.map(hall => [ @@ -48,7 +47,7 @@ export default function useScheduleTable({ return [ ...showHeader ? [{ - id: 'header-'.concat(date.getTime().toString()), + id: 'header-'.concat(getTime(date).toString()), cells: [{ id: 1, attributes: { @@ -58,7 +57,7 @@ export default function useScheduleTable({ }], }] : [], ...showSlot ? [{ - id: 'slot-'.concat(date.getTime().toString()), + id: 'slot-'.concat(getTime(date).toString()), cells: [{ id: 1, slotTime: { diff --git a/src/utils.js b/src/utils.js index 6f24027..6110c9d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,3 +1,5 @@ +import { parseJSON, set } from 'date-fns'; + export const sorter = field => (a, b) => { const fieldA = a[field]; const fieldB = b[field]; @@ -8,7 +10,7 @@ export const sorter = field => (a, b) => { }; export const parseDateFields = (item, dateFields) => Object.fromEntries(Object.entries(item).map(([key, value]) => - [key, dateFields.includes(key) ? new Date(value) : value] + [key, dateFields.includes(key) ? parseJSON(value) : value] )); export function calculateProgress(...elements) { @@ -62,8 +64,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); -} +export const toMidnight = date => set(date, { + hours: 0, + minutes: 0, + seconds: 0, + milliseconds: 0, +});