TechDebt: Moment -> DayJs

api/package.json

@@ -37,7 +37,7 @@
     "aws-sdk": "~2.742.0",
     "axios": "~0.21.4",
     "clamdjs": "~1.0.2",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.10",
     "db-migrate": "~0.11.11",
     "db-migrate-pg": "~1.2.2",
     "express": "~4.17.1",
@@ -52,7 +52,6 @@
     "knex": "~1.0.1",
     "lodash": "~4.17.21",
     "mime": "~2.5.2",
-    "moment": "~2.29.2",
     "multer": "~1.4.3",
     "pg": "~8.7.1",
     "qs": "~6.10.1",

api/src/models/project-survey-attachments.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { default as dayjs } from 'dayjs';
 import { getLogger } from '../utils/logger';
 import { SurveySupplementaryData } from './survey-view';
 
@@ -29,7 +29,7 @@ export class GetAttachmentsWithSupplementalData {
       attachment.project_report_attachment_id;
     this.fileName = attachment.file_name;
     this.fileType = attachment.file_type || 'Report';
-    this.lastModified = moment(attachment.update_date || attachment.create_date).toISOString();
+    this.lastModified = dayjs(attachment.update_date || attachment.create_date).toISOString();
     this.size = attachment.file_size;
     this.status = attachment.status;
     this.supplementaryAttachmentData = supplementaryData;

api/src/services/project-service.ts

@@ -1,5 +1,5 @@
+import { default as dayjs } from 'dayjs';
 import { Feature } from 'geojson';
-import moment from 'moment';
 import { COMPLETION_STATUS } from '../constants/status';
 import { IDBConnection } from '../database/db';
 import { HTTP400 } from '../errors/http-error';
@@ -63,7 +63,7 @@ export class ProjectService extends DBService {
       start_date: row.start_date,
       end_date: row.end_date,
       completion_status:
-        (row.end_date && moment(row.end_date).endOf('day').isBefore(moment()) && COMPLETION_STATUS.COMPLETED) ||
+        (row.end_date && dayjs(row.end_date).endOf('day').isBefore(dayjs()) && COMPLETION_STATUS.COMPLETED) ||
         COMPLETION_STATUS.ACTIVE,
       project_programs: row.project_programs,
       regions: row.regions

api/src/utils/media/xlsx/xlsx-utils.ts

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import { default as dayjs } from 'dayjs';
 import xlsx, { CellObject } from 'xlsx';
 import { safeTrim } from '../../string-utils';
 

api/src/utils/xlsx-utils/cell-utils.ts

@@ -1,4 +1,4 @@
-import dayjs from 'dayjs';
+import { default as dayjs } from 'dayjs';
 import { CellObject } from 'xlsx';
 import { safeTrim } from '../string-utils';
 

api/src/utils/xlsx-utils/worksheet-utils.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { default as dayjs } from 'dayjs';
 import xlsx, { CellObject } from 'xlsx';
 import { MediaFile } from '../media/media-file';
 import { safeToLowerCase } from '../string-utils';
@@ -218,7 +218,7 @@
       const type = typeof value;
 
       if (rowValueTypes[index] === 'date') {
-        return moment(value).isValid();
+        return dayjs(value).isValid();
       }
 
       return rowValueTypes[index] === type;

app/package.json

@@ -49,14 +49,14 @@
     "@turf/turf": "^6.5.0",
     "axios": "~0.21.4",
     "clsx": "~1.2.1",
+    "dayjs": "^1.11.10",
     "express": "~4.17.1",
     "formik": "~2.4.1",
     "leaflet": "~1.9.4",
     "leaflet-draw": "~1.0.4",
     "leaflet-fullscreen": "~1.0.2",
     "leaflet.locatecontrol": "~0.79.0",
     "lodash-es": "~4.17.21",
-    "moment": "~2.29.4",
     "node-sass": "~4.14.1",
     "npm-run-all": "^4.1.5",
     "oidc-client-ts": "^2.3.0",

app/src/components/data-grid/DatePickerDataGrid.tsx

@@ -1,8 +1,8 @@
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { GridRenderEditCellParams, GridValidRowModel, useGridApiContext } from '@mui/x-data-grid';
 import { DatePicker, DatePickerProps, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import moment from 'moment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { default as dayjs } from 'dayjs';
 import { useRef } from 'react';
 
 interface IDatePickerDataGridProps<DataGridType extends GridValidRowModel> {
@@ -22,10 +22,10 @@ const DatePickerDataGrid = <DataGridType extends GridValidRowModel>({
     }
   }, [dataGridProps.hasFocus]);
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
         inputRef={ref}
-        value={(dataGridProps.value && moment(dataGridProps.value, 'HH:mm:ss')) || null}
+        value={(dataGridProps.value && dayjs(dataGridProps.value, 'HH:mm:ss')) || null}
         onChange={(value) => {
           apiRef?.current.setEditCellValue({ id: dataGridProps.id, field: dataGridProps.field, value: value });
         }}

app/src/components/data-grid/TimePickerDataGrid.tsx

@@ -1,8 +1,8 @@
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { GridRenderEditCellParams, GridValidRowModel, useGridApiContext } from '@mui/x-data-grid';
 import { LocalizationProvider, TimePicker, TimePickerProps } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import moment from 'moment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { default as dayjs } from 'dayjs';
 import { useRef } from 'react';
 
 interface ITimePickerDataGridProps<DataGridType extends GridValidRowModel> {
@@ -25,7 +25,7 @@ const TimePickerDataGrid = <DataGridType extends GridValidRowModel>({
   const { slotProps, ...rest } = dateFieldProps ?? {};
 
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <TimePicker
         slotProps={{
           ...slotProps,
@@ -35,7 +35,7 @@ const TimePickerDataGrid = <DataGridType extends GridValidRowModel>({
           }
         }}
         inputRef={ref}
-        value={(dataGridProps.value && moment(dataGridProps.value, 'HH:mm:ss')) || null}
+        value={(dataGridProps.value && dayjs(dataGridProps.value, 'HH:mm:ss')) || null}
         onChange={(value) => {
           apiRef?.current.setEditCellValue({ id: dataGridProps.id, field: dataGridProps.field, value: value });
         }}

app/src/components/fields/DateTimeFields.tsx

@@ -1,13 +1,13 @@
 import Icon from '@mdi/react';
 import Grid from '@mui/material/Grid';
 import { DatePicker, TimePicker } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DATE_FORMAT, DATE_LIMIT, TIME_FORMAT } from 'constants/dateTimeFormats';
+import { default as dayjs } from 'dayjs';
 import { ISurveySampleMethodData } from 'features/surveys/components/MethodForm';
 import { FormikContextType } from 'formik';
 import get from 'lodash-es/get';
-import moment from 'moment';
 import React from 'react';
 
 interface IDateTimeFieldsProps {
@@ -51,19 +51,19 @@
   const rawDateValue = get(values, dateName);
   const formattedDateValue =
     (rawDateValue &&
-      moment(rawDateValue, DATE_FORMAT.ShortDateFormat).isValid() &&
-      moment(rawDateValue, DATE_FORMAT.ShortDateFormat)) ||
+      dayjs(rawDateValue, DATE_FORMAT.ShortDateFormat).isValid() &&
+      dayjs(rawDateValue, DATE_FORMAT.ShortDateFormat)) ||
     null;
 
   const rawTimeValue = get(values, timeName);
   const formattedTimeValue =
     (rawTimeValue &&
-      moment(rawTimeValue, TIME_FORMAT.LongTimeFormat24Hour).isValid() &&
-      moment(rawTimeValue, TIME_FORMAT.LongTimeFormat24Hour)) ||
+      dayjs(rawTimeValue, TIME_FORMAT.LongTimeFormat24Hour).isValid() &&
+      dayjs(rawTimeValue, TIME_FORMAT.LongTimeFormat24Hour)) ||
     null;
 
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <Grid container>
         <Grid item xs={6}>
           <DatePicker
@@ -97,18 +97,19 @@
             }}
             label={dateLabel}
             format={DATE_FORMAT.ShortDateFormat}
-            minDate={moment(DATE_LIMIT.min)}
-            maxDate={moment(DATE_LIMIT.max)}
+            minDate={dayjs(DATE_LIMIT.min)}
+            maxDate={dayjs(DATE_LIMIT.max)}
             value={formattedDateValue}
             onChange={(value) => {
-              if (!value || String(value.creationData().input) === 'Invalid Date') {
+              console.log(value);
+              if (!value || value === 'Invalid Date') {
                 // The creation input value will be 'Invalid Date' when the date field is cleared (empty), and will
                 // contain an actual date string value if the field is not empty but is invalid.
                 setFieldValue(dateName, null);
                 return;
               }
 
-              setFieldValue(dateName, moment(value).format(DATE_FORMAT.ShortDateFormat));
+              setFieldValue(dateName, dayjs(value).format(DATE_FORMAT.ShortDateFormat));
             }}
           />
         </Grid>
@@ -146,14 +147,14 @@
             label={timeLabel}
             format={TIME_FORMAT.LongTimeFormat24Hour}
             value={formattedTimeValue}
-            onChange={(value: moment.Moment | null) => {
-              if (!value || !moment(value).isValid()) {
+            onChange={(value: dayjs.Dayjs | null) => {
+              if (!value || !dayjs(value).isValid()) {
                 // Check if the value is null or invalid, and if so, clear the field.
                 setFieldValue(timeName, null);
                 return;
               }
 
-              setFieldValue(timeName, moment(value).format(TIME_FORMAT.LongTimeFormat24Hour));
+              setFieldValue(timeName, dayjs(value).format(TIME_FORMAT.LongTimeFormat24Hour));
             }}
             views={['hours', 'minutes', 'seconds']}
             timeSteps={{ hours: 1, minutes: 1, seconds: 1 }}

app/src/components/fields/SingleDateField.tsx

@@ -2,12 +2,12 @@
 import Icon from '@mdi/react';
 import { TextFieldProps } from '@mui/material/TextField';
 import { DatePicker } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DATE_FORMAT, DATE_LIMIT } from 'constants/dateTimeFormats';
+import { default as dayjs } from 'dayjs';
 import { useFormikContext } from 'formik';
 import get from 'lodash-es/get';
-import moment from 'moment';
 import React from 'react';
 
 interface IDateProps {
@@ -39,12 +39,12 @@
 
   const formattedDateValue =
     (rawDateValue &&
-      moment(rawDateValue, DATE_FORMAT.ShortDateFormat).isValid() &&
-      moment(rawDateValue, DATE_FORMAT.ShortDateFormat)) ||
+      dayjs(rawDateValue, DATE_FORMAT.ShortDateFormat).isValid() &&
+      dayjs(rawDateValue, DATE_FORMAT.ShortDateFormat)) ||
     null;
 
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DatePicker
         slots={{
           openPickerIcon: CalendarIcon
@@ -75,19 +75,19 @@
         }}
         label={label}
         format={DATE_FORMAT.ShortDateFormat}
-        minDate={moment(DATE_LIMIT.min)}
-        maxDate={moment(DATE_LIMIT.max)}
+        minDate={dayjs(DATE_LIMIT.min)}
+        maxDate={dayjs(DATE_LIMIT.max)}
         value={formattedDateValue}
         onChange={(value) => {
           other?.onChange?.(value);
-          if (!value || String(value.creationData().input) === 'Invalid Date') {
+          if (!value || value === 'Invalid Date') {
             // The creation input value will be 'Invalid Date' when the date field is cleared (empty), and will
             // contain an actual date string value if the field is not empty but is invalid.
             setFieldValue(name, null);
             return;
           }
 
-          setFieldValue(name, moment(value).format(DATE_FORMAT.ShortDateFormat));
+          setFieldValue(name, dayjs(value).format(DATE_FORMAT.ShortDateFormat));
         }}
       />
     </LocalizationProvider>