Use date-fns (#109)

* Replace dayjs with date-fns for date handling across the application, updating package dependencies and modifying date formatting and comparison logic in various components and hooks.

* Replace DayJS with date-fns in README for date utility functions

Author: mwarman

README.md

@@ -50,7 +50,7 @@ The application production technology stack includes:
 - React Hook Form - form management
 - Zod - schema-based validation
 - Lodash - utility functions
-- DayJS - date utility functions
+- date-fns - date utility functions
 - i18next - internationalization framework
 
 The application development technology stack includes:

package-lock.json

@@ -43,7 +43,7 @@
     "@tanstack/react-query-devtools": "5.91.3",
     "axios": "1.13.5",
     "classnames": "2.5.1",
-    "dayjs": "1.11.19",
+    "date-fns": "4.1.0",
     "i18next": "25.8.13",
     "i18next-browser-languagedetector": "8.2.1",
     "lodash": "4.17.23",

package.json

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import dayjs from 'dayjs';
+import { isBefore } from 'date-fns';
 
 import { UserTokens } from 'common/models/auth';
 import { QueryKey, StorageKey } from 'common/utils/constants';
@@ -20,8 +20,8 @@ export const useGetUserTokens = () => {
       if (storedTokens) {
         // tokens found
         const tokens = JSON.parse(storedTokens) as unknown as UserTokens;
-        const now = dayjs();
-        if (now.isBefore(tokens.expires_at)) {
+        const now = new Date();
+        if (isBefore(now, new Date(tokens.expires_at))) {
           // tokens not expired
           return resolve(tokens);
         } else {

src/common/api/useGetUserTokens.ts

@@ -3,7 +3,7 @@ import { ModalCustomEvent } from '@ionic/core';
 import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
 import { Control, FieldPath, FieldValues, useController } from 'react-hook-form';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 
 import './DateInput.scss';
 import { PropsWithTestId } from '../types';
@@ -83,7 +83,7 @@ const DateInput = <T extends FieldValues>({
   const onChange = async (e: DatetimeCustomEvent): Promise<void> => {
     const value = e.detail.value as DateValue;
     if (value) {
-      const isoDate = dayjs(value).format('YYYY-MM-DD');
+      const isoDate = format(new Date(value), 'yyyy-MM-dd');
       field.onChange(isoDate);
     } else {
       field.onChange(null);
@@ -117,7 +117,7 @@ const DateInput = <T extends FieldValues>({
 
   // format the value for the IonDatetime. it must be a local ISO date or null/undefined
   const datetimeValue = useMemo(() => {
-    return field.value ? dayjs(field.value).format('YYYY-MM-DD[T]HH:mm') : null;
+    return field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : null;
   }, [field.value]);
 
   return (

src/common/components/Input/DateInput.tsx

@@ -3,7 +3,7 @@ import { ModalCustomEvent } from '@ionic/core';
 import { DatetimeCustomEvent, IonButton, IonDatetime, IonInput, IonModal } from '@ionic/react';
 import { Control, FieldPath, FieldValues, useController } from 'react-hook-form';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 
 import './DatetimeInput.scss';
 import { PropsWithTestId } from '../types';
@@ -94,7 +94,7 @@ const DatetimeInput = <T extends FieldValues>({
   const onChange = async (e: DatetimeCustomEvent): Promise<void> => {
     const value = e.detail.value as DatetimeValue;
     if (value) {
-      const isoDate = dayjs(value).toISOString();
+      const isoDate = new Date(value).toISOString();
       field.onChange(isoDate);
     } else {
       field.onChange(null);
@@ -129,7 +129,7 @@ const DatetimeInput = <T extends FieldValues>({
 
   // format the value for the IonDatetime. it must be a local ISO date or null/undefined
   const datetimeValue = useMemo(() => {
-    return field.value ? dayjs(field.value).format('YYYY-MM-DD[T]HH:mm') : null;
+    return field.value ? format(new Date(field.value), "yyyy-MM-dd'T'HH:mm") : null;
   }, [field.value]);
 
   return (

src/common/components/Input/DatetimeInput.tsx

@@ -12,7 +12,7 @@ import {
 } from '@ionic/react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 
 import { PropsWithTestId } from 'common/components/types';
 import { config } from 'common/utils/config';
@@ -31,7 +31,7 @@ const AccountPage = ({ testid = 'page-account' }: PropsWithTestId) => {
   const router = useIonRouter();
   const { t } = useTranslation();
 
-  const versionTs = dayjs(config.VITE_BUILD_TS).format('YY.MM.DD.hhmm');
+  const versionTs = format(new Date(config.VITE_BUILD_TS), 'yy.MM.dd.HHmm');
   const sha = config.VITE_BUILD_COMMIT_SHA.substring(0, 7);
   const version = `${versionTs}.${sha}`;
 

src/pages/Account/AccountPage.tsx

@@ -1,6 +1,6 @@
 import { IonItem, IonLabel, IonListHeader, IonText } from '@ionic/react';
 import classNames from 'classnames';
-import dayjs from 'dayjs';
+import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 
 import { BaseComponentProps } from 'common/components/types';
@@ -31,7 +31,9 @@ const BuildDiagnostics = ({ className, testid = 'diagnostics-build' }: BaseCompo
       </IonItem>
       <IonItem className="text-sm">
         <IonLabel className="font-medium ion-margin-end">{t('diagnostics.label.time', { ns: 'account' })}</IonLabel>
-        <IonText data-testid={`${testid}-time`}>{dayjs(config.VITE_BUILD_TS).format('YYYY-MM-DD HH:mm:ss Z')}</IonText>
+        <IonText data-testid={`${testid}-time`}>
+          {format(new Date(config.VITE_BUILD_TS), 'yyyy-MM-dd HH:mm:ss xxx')}
+        </IonText>
       </IonItem>
       <IonItem className="text-sm">
         <IonLabel className="font-medium ion-margin-end">{t('diagnostics.label.sha', { ns: 'account' })}</IonLabel>

src/pages/Account/components/Diagnostics/BuildDiagnostics.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import find from 'lodash/find';
-import dayjs from 'dayjs';
+import { add } from 'date-fns';
 
 import { User } from 'common/models/user';
 import { UserTokens } from 'common/models/auth';
@@ -40,7 +40,7 @@ export const useSignIn = () => {
       storage.setItem(StorageKey.User, JSON.stringify(user));
 
       // simulate the creation of authentication tokens
-      const expires_at = dayjs().add(1, 'hour').toISOString();
+      const expires_at = add(new Date(), { hours: 1 }).toISOString();
       const tokens: UserTokens = {
         access_token: 'access_token',
         id_token: 'id_token',