refactor(ui): drop moment.js (#2644)

* refactor(ui): drop moment.js

Project has two libs to work with dates date-fns and moment.js. As moment.js

> We now generally consider Moment to be a legacy project in maintenance
mode. It is not dead, but it is indeed done.

* bump date-fns to version 3.2

Author: erka

ui/package-lock.json

@@ -25,11 +25,10 @@
     "@types/react-redux": "^7.1.31",
     "buffer": "^6.0.3",
     "clsx": "^2.1.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^3.2.0",
     "dotenv": "^16.3.1",
     "formik": "^2.4.5",
     "highlight.js": "^11.9.0",
-    "moment": "^2.30.1",
     "monaco-editor": "^0.45.0",
     "monaco-themes": "^0.4.4",
     "nightwind": "^1.1.13",

ui/package.json

@@ -73,7 +73,7 @@ export default function Preferences() {
                   Display dates and times in UTC timezone
                 </p>
                 <p className="text-gray-400 mt-2 text-sm">
-                  {inTimezone(new Date().toUTCString())}
+                  {inTimezone(new Date().toISOString())}
                 </p>
               </Switch.Label>
               <dd className="text-gray-900 mt-1 flex text-sm sm:col-span-2 sm:mt-0">

ui/src/app/preferences/Preferences.tsx

@@ -1,8 +1,8 @@
 import { Dialog } from '@headlessui/react';
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid';
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { addMinutes, format, formatISO, parseISO } from 'date-fns';
 import { Form, Formik, useField, useFormikContext } from 'formik';
-import moment from 'moment';
 import { forwardRef, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -132,40 +132,40 @@ function ConstraintValueDateTimeInput(props: ConstraintInputProps) {
 
   const [field] = useField({
     ...props,
-    validate: (value) => {
-      const m = moment(value);
-      return m.isValid() ? undefined : 'Value is not a valid datetime';
+    validate: (value: string) => {
+      const m = parseISO(value);
+      return m ? undefined : 'Value is not a valid datetime';
     }
   });
 
-  const [fieldDate, setFieldDate] = useState(field.value?.split('T')[0] || '');
-  const [fieldTime, setFieldTime] = useState(field.value?.split('T')[1] || '');
+  const [fieldDate, setFieldDate] = useState('');
+  const [fieldTime, setFieldTime] = useState('');
 
   useEffect(() => {
-    // if both date and time are set, then combine, parse, and set the value
-    if (
-      fieldDate &&
-      fieldDate.trim() !== '' &&
-      fieldTime &&
-      fieldTime.trim() !== ''
-    ) {
-      if (timezone === Timezone.LOCAL) {
-        // if local timezone, then parse as local (moment default) and convert to UTC
-        const m = moment(`${fieldDate}T${fieldTime}`);
-        setFieldValue(field.name, m.utc().format());
-        return;
+    if (field.value) {
+      let m = parseISO(field.value);
+      if (timezone === Timezone.UTC) {
+        // if utc timezone, then convert to UTC
+        m = addMinutes(m, m.getTimezoneOffset());
       }
-
-      // otherwise, parse as UTC
-      const m = moment.utc(`${fieldDate}T${fieldTime}`);
-      setFieldValue(field.name, m.format());
-      return;
+      setFieldDate(format(m, 'yyyy-MM-dd'));
+      setFieldTime(format(m, 'HH:mm'));
     }
+  }, [field.value, timezone]);
 
-    // otherwise, if only date is set, then parse and set the value
+  useEffect(() => {
+    // if both date and time are set, then combine, parse, and set the value
     if (fieldDate && fieldDate.trim() !== '') {
-      const m = moment(fieldDate);
-      setFieldValue(field.name, m.utc().format());
+      let d = `${fieldDate}T00:00:00`;
+      if (fieldTime && fieldTime.trim() !== '') {
+        d = `${fieldDate}T${fieldTime}:00`;
+      }
+      let m = parseISO(d);
+      if (timezone === Timezone.UTC) {
+        // if utc timezone, then convert to UTC
+        m = addMinutes(m, -m.getTimezoneOffset());
+      }
+      setFieldValue(field.name, formatISO(m));
     }
   }, [timezone, field.name, fieldDate, fieldTime, setFieldValue]);
 
@@ -209,11 +209,7 @@ function ConstraintValueDateTimeInput(props: ConstraintInputProps) {
           type="time"
           id="valueTime"
           name="valueTime"
-          value={
-            timezone === Timezone.LOCAL
-              ? moment(fieldTime, 'HH:mm Z').format('HH:mm')
-              : moment.utc(fieldTime, 'HH:mm Z').format('HH:mm')
-          }
+          value={fieldTime}
           onChange={(e) => {
             setFieldTime(e.target.value);
           }}

ui/src/components/segments/ConstraintForm.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import { addMinutes, format, parseISO } from 'date-fns';
 import { useSelector } from 'react-redux';
 import { selectTimezone } from '~/app/preferences/preferencesSlice';
 import { Timezone } from '~/types/Preferences';
@@ -7,9 +7,11 @@ export const useTimezone = () => {
   const timezone = useSelector(selectTimezone);
 
   const inTimezone = (v: string) => {
+    const d = parseISO(v);
     return timezone === Timezone.LOCAL
-      ? moment(v).format('YYYY-MM-DD HH:mm:ss')
-      : moment.utc(v).format('YYYY-MM-DD HH:mm:ss') + ' UTC';
+      ? format(d, 'yyyy-MM-dd HH:mm:ss')
+      : format(addMinutes(d, d.getTimezoneOffset()), 'yyyy-MM-dd HH:mm:ss') +
+          ' UTC';
   };
 
   return {