Migrate from moment to dayjs (#3053)

Author: TheMythologist

package.json

@@ -47,6 +47,7 @@
     "array-move": "^4.0.0",
     "browserfs": "^1.4.3",
     "classnames": "^2.3.2",
+    "dayjs": "^1.11.13",
     "dompurify": "^3.1.6",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
@@ -62,7 +63,6 @@
     "lz-string": "^1.4.4",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-to-hast": "^13.0.0",
-    "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "phaser": "^3.55.2",
     "query-string": "^9.0.0",

src/commons/achievement/utils/DateHelper.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const now = new Date();
 
@@ -38,12 +38,12 @@ export const timeFromExpired = (deadline?: Date) =>
 export const prettifyDate = (deadline?: Date) => {
   if (deadline === undefined) return '';
 
-  return moment(deadline).format('D MMMM YYYY HH:mm');
+  return dayjs(deadline).format('D MMMM YYYY HH:mm');
 };
 
 export const prettifyTime = (time?: Date) => {
   if (time === undefined) return '';
-  return moment(time).format('HH:mm');
+  return dayjs(time).format('HH:mm');
 };
 
 // Converts Date to deadline countdown
@@ -54,11 +54,11 @@ export const prettifyDeadline = (deadline?: Date) => {
     return 'Expired';
   }
 
-  const now = moment();
+  const now = dayjs();
 
-  const weeksAway = Math.ceil(moment(deadline).diff(now, 'weeks', true));
-  const daysAway = Math.ceil(moment(deadline).diff(now, 'days', true));
-  const hoursAway = Math.ceil(moment(deadline).diff(now, 'hours', true));
+  const weeksAway = Math.ceil(dayjs(deadline).diff(now, 'weeks', true));
+  const daysAway = Math.ceil(dayjs(deadline).diff(now, 'days', true));
+  const hoursAway = Math.ceil(dayjs(deadline).diff(now, 'hours', true));
 
   let prettifiedDeadline = '';
   if (weeksAway > 1) {

src/commons/achievement/utils/InsertFakeAchievements.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import {
   cardBackgroundUrl,
@@ -23,7 +23,7 @@ function insertFakeAchievements(
   inferencer: AchievementInferencer
 ) {
   const sortedOverviews = [...assessmentOverviews].sort((overview1, overview2) =>
-    moment(overview1.closeAt).diff(moment(overview2.closeAt))
+    dayjs(overview1.closeAt).diff(dayjs(overview2.closeAt))
   );
   const length = assessmentOverviews.length;
 

src/commons/utils/DateHelper.ts

@@ -1,4 +1,9 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(advancedFormat);
+dayjs.extend(relativeTime);
 
 /**
  * Checks if a date is before or at the current time.
@@ -9,8 +14,8 @@ import moment from 'moment';
  *   is before the time of execution of this function.
  */
 export const beforeNow = (dateString: string): boolean => {
-  const date = moment(dateString);
-  const now = moment();
+  const date = dayjs(dateString);
+  const now = dayjs();
   return date.isBefore(now);
 };
 
@@ -25,25 +30,25 @@ export const beforeNow = (dateString: string): boolean => {
  *   e.g 7th June, 20:09
  */
 export const getPrettyDate = (dateString: string): string => {
-  const date = moment(dateString);
+  const date = dayjs(dateString);
   const prettyDate = date.format('Do MMMM, HH:mm');
   return prettyDate;
 };
 
 export const getStandardDateTime = (dateString: string): string => {
-  const date = moment(dateString);
+  const date = dayjs(dateString);
   const prettyDate = date.format('MMMM Do YYYY, HH:mm');
   return prettyDate;
 };
 
 export const getStandardDate = (dateString: string): string => {
-  const date = moment(dateString);
+  const date = dayjs(dateString);
   const prettyDate = date.format('MMMM Do YYYY');
   return prettyDate;
 };
 
 export const getPrettyDateAfterHours = (dateString: string, hours: number): string => {
-  const date = moment(dateString).add(hours, 'hours');
+  const date = dayjs(dateString).add(hours, 'hours');
   const absolutePrettyDate = date.format('Do MMMM, HH:mm');
   const relativePrettyDate = date.fromNow();
   return `${absolutePrettyDate} (${relativePrettyDate})`;

src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogBody, DialogFooter, Intent } from '@blueprintjs/core';
 import { DateInput3 } from '@blueprintjs/datetime2';
 import { IconNames } from '@blueprintjs/icons';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useCallback, useState } from 'react';
 
 import { AssessmentOverview } from '../../../../commons/assessment/AssessmentTypes';
@@ -21,10 +21,10 @@ const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDa
   const maxDate = new Date(2030, 11, 31);
 
   const currentDateString = forOpenDate ? data.openAt : data.closeAt;
-  const currentDate = moment(currentDateString, moment.ISO_8601, true);
+  const currentDate = dayjs(currentDateString, undefined, true);
 
   const [isDialogOpen, setDialogState] = useState(false);
-  const [newDate, setNewDate] = useState<moment.Moment | null>(currentDate);
+  const [newDate, setNewDate] = useState<dayjs.Dayjs | null>(currentDate);
 
   const handleOpenDialog = useCallback(() => setDialogState(true), []);
   const handleCloseDialog = useCallback(() => setDialogState(false), []);
@@ -46,13 +46,13 @@ const EditCell: React.FC<Props> = ({ data, forOpenDate, handleAssessmentChangeDa
   }, [newDate, currentDate, data, handleAssessmentChangeDate, forOpenDate, handleCloseDialog]);
 
   const handleParseDate = (str: string) => {
-    const date = moment(str, dateDisplayFormat, true);
+    const date = dayjs(str, dateDisplayFormat, true);
     return date.isValid() ? date.toDate() : false;
   };
-  const handleFormatDate = (date: Date) => moment(date).format(dateDisplayFormat);
+  const handleFormatDate = (date: Date) => dayjs(date).format(dateDisplayFormat);
 
   const handleDateChange = React.useCallback(
-    (selectedDate: string | null) => setNewDate(moment(selectedDate)),
+    (selectedDate: string | null) => setNewDate(dayjs(selectedDate)),
     []
   );
   const handleDateError = React.useCallback(() => {

yarn.lock

@@ -5596,6 +5596,11 @@ date-fns@^2.28.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 debounce@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
@@ -9879,11 +9884,6 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
-moment@^2.29.4:
-  version "2.30.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
-  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
-
 mqtt-packet@^6.8.0:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/mqtt-packet/-/mqtt-packet-6.10.0.tgz#c8b507832c4152e3e511c0efa104ae4a64cd418f"