Switch date operations to date-fns

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

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'));
 }

src/Schedule/Schedule.jsx

@@ -57,7 +57,7 @@ export default function Schedule({
                 <tbody>
                     {rows.map(row => <tr key={row.id}>
                         {row.cells.map(cell => <td key={cell.id} {...cell.attributes}>
-                            {cell.dateHeader && <DateHeader date={cell.dateHeader} />}
+                            {cell.dateHeader && <DateHeader date={cell.dateHeader} lang={lang} />}
                             {cell.slotTime && <SlotTime {...cell.slotTime} />}
                             {cell.event && <Event {...cell.event} />}
                         </td>)}

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: {

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