diff --git a/package.json b/package.json index 1a7e6f184d..8fe3ff2ad0 100644 --- a/package.json +++ b/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", diff --git a/src/commons/achievement/utils/DateHelper.ts b/src/commons/achievement/utils/DateHelper.ts index 1d695f1a02..df7cbd696b 100644 --- a/src/commons/achievement/utils/DateHelper.ts +++ b/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) { diff --git a/src/commons/achievement/utils/InsertFakeAchievements.ts b/src/commons/achievement/utils/InsertFakeAchievements.ts index 9ba1c1d0d8..93182c3155 100644 --- a/src/commons/achievement/utils/InsertFakeAchievements.ts +++ b/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; diff --git a/src/commons/utils/DateHelper.ts b/src/commons/utils/DateHelper.ts index 79454affba..ff40ad064f 100644 --- a/src/commons/utils/DateHelper.ts +++ b/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})`; diff --git a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx b/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx index 19cb9f68d9..43c40e5196 100644 --- a/src/pages/academy/groundControl/subcomponents/GroundControlEditCell.tsx +++ b/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 = ({ 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(currentDate); + const [newDate, setNewDate] = useState(currentDate); const handleOpenDialog = useCallback(() => setDialogState(true), []); const handleCloseDialog = useCallback(() => setDialogState(false), []); @@ -46,13 +46,13 @@ const EditCell: React.FC = ({ 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(() => { diff --git a/yarn.lock b/yarn.lock index 97d819d906..ad456ab49c 100644 --- a/yarn.lock +++ b/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"