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,
+});