refactor: Migrate from momentjs to dayjs

VocaDbWeb/Scripts/App.tsx

@@ -11,19 +11,17 @@ import { LoginManagerProvider } from '@/LoginManagerContext';
 import { MutedUsersProvider } from '@/MutedUsersContext';
 import { VdbProvider, useVdb } from '@/VdbContext';
 import '@/i18n';
+import '@/styles/css.less';
 import { NostalgicDivaProvider } from '@vocadb/nostalgic-diva';
 import { ScrollToTop } from '@vocadb/route-sphere';
 import React from 'react';
 import { Toaster } from 'react-hot-toast';
 import { BrowserRouter } from 'react-router-dom';
 
-import "@/styles/css.less"
-
-const TetoDB = React.lazy(() => import("./styles/tetoDb"))
-const DarkAngel = React.lazy(() => import("./styles/darkAngel"))
+const TetoDB = React.lazy(() => import('./styles/tetoDb'));
+const DarkAngel = React.lazy(() => import('./styles/darkAngel'));
 
 const AppContainer = (): React.ReactElement => {
-
 	const vdb = useVdb();
 
 	return (

VocaDbWeb/Scripts/Components/KnockoutExtensions/MomentJsTimeAgo.tsx

@@ -1,4 +1,5 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import React from 'react';
 
 interface MomentJsTimeAgoProps {
@@ -7,12 +8,14 @@ interface MomentJsTimeAgoProps {
 	children: string;
 }
 
+dayjs.extend(relativeTime);
+
 export const MomentJsTimeAgo = ({
 	as: Component,
 	className,
 	children,
 }: MomentJsTimeAgoProps): React.ReactElement => {
-	const parsed = moment(children);
+	const parsed = dayjs(children);
 
 	return (
 		<Component title={parsed.format('l LT ([UTC]Z)')} className={className}>

VocaDbWeb/Scripts/Components/Shared/ArtistPopupContent.tsx

@@ -1,7 +1,7 @@
 import { ArtistContract } from '@/DataContracts/Artist/ArtistContract';
 import { UrlHelper } from '@/Helpers/UrlHelper';
 import { ImageSize } from '@/Models/Images/ImageSize';
-import moment from 'moment';
+import dayjs from '@/dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -41,7 +41,7 @@ export const ArtistPopupContent = React.memo(
 				{artist.releaseDate && (
 					<p>
 						{t('ViewRes.Artist:Details.ReleaseDate')}{' '}
-						{moment(artist.releaseDate).format('l')}
+						{dayjs(artist.releaseDate).format('l')}
 					</p>
 				)}
 			</>

VocaDbWeb/Scripts/Components/Shared/EventPopupContent.tsx

@@ -1,8 +1,8 @@
 import { Markdown } from '@/Components/KnockoutExtensions/Markdown';
 import { ReleaseEventContract } from '@/DataContracts/ReleaseEvents/ReleaseEventContract';
 import { EventCategory } from '@/Models/Events/EventCategory';
+import dayjs from '@/dayjs';
 import { truncate } from 'lodash-es';
-import moment from 'moment';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -55,8 +55,8 @@ export const EventPopupContent = React.memo(
 				{event.date && (
 					<p>
 						{t('ViewRes.Event:Details:OccurrenceDate')}{' '}
-						{moment(event.date).format('l')}
-						{event.endDate && ` - ${moment(event.endDate).format('l')}`}
+						{dayjs(event.date).format('l')}
+						{event.endDate && ` - ${dayjs(event.endDate).format('l')}`}
 					</p>
 				)}
 			</>

VocaDbWeb/Scripts/Components/Shared/PVs/PVEdit.tsx

@@ -1,9 +1,9 @@
 import SafeAnchor from '@/Bootstrap/SafeAnchor';
 import { PVType } from '@/Models/PVs/PVType';
 import { PVEditStore, PVListEditStore } from '@/Stores/PVs/PVListEditStore';
+import dayjs from '@/dayjs';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import moment from 'moment';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -48,7 +48,7 @@ export const PVEdit = observer(
 				{pvListEditStore.showPublishDates && (
 					<td>
 						{pvListEditStore.showPublishDates && (
-							<>{moment(contract.publishDate).format('l')}</>
+							<>{dayjs(contract.publishDate).format('l')}</>
 						)}
 					</td>
 				)}

VocaDbWeb/Scripts/Components/Shared/Partials/ArchivedEntry/PVInfo.tsx

@@ -2,7 +2,7 @@ import { ArchivedPVContract } from '@/DataContracts/PVs/ArchivedPVContract';
 import { PVContract } from '@/DataContracts/PVs/PVContract';
 import { DateTimeHelper } from '@/Helpers/DateTimeHelper';
 import { VideoServiceHelper } from '@/Helpers/VideoServiceHelper';
-import moment from 'moment';
+import dayjs from '@/dayjs';
 import React from 'react';
 
 interface PVInfoProps {
@@ -21,7 +21,7 @@ export const PVInfo = React.memo(
 					{pv.pvId}
 				</a>{' '}
 				by {pv.author} ({DateTimeHelper.formatFromSeconds(pv.length)})
-				{pv.publishDate && <> at {moment(pv.publishDate).format('l')}</>}
+				{pv.publishDate && <> at {dayjs(pv.publishDate).format('l')}</>}
 				{pv.disabled && <> (unavailable)</>}
 			</>
 		);

VocaDbWeb/Scripts/Components/Shared/Partials/Shared/ConcurrentEditWarning.tsx

@@ -1,6 +1,6 @@
 import { NotificationPanel } from '@/Components/Shared/Partials/Shared/NotificationPanel';
 import { EntryEditDataContract } from '@/DataContracts/User/EntryEditDataContract';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +12,7 @@ export const ConcurrentEditWarning = React.memo(
 	({ conflictingEditor }: ConcurrentEditWarningProps): React.ReactElement => {
 		const { t } = useTranslation(['ViewRes']);
 
-		const ago = moment().diff(conflictingEditor.time, 'minutes');
+		const ago = dayjs().diff(conflictingEditor.time, 'minutes');
 
 		return (
 			<NotificationPanel

VocaDbWeb/Scripts/Components/Shared/Partials/Shared/EventThumbs.tsx

@@ -5,8 +5,8 @@ import { EntryType } from '@/Models/EntryType';
 import { EventCategory } from '@/Models/Events/EventCategory';
 import { ImageSize } from '@/Models/Images/ImageSize';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
+import dayjs from '@/dayjs';
 import classNames from 'classnames';
-import moment from 'moment';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -84,8 +84,8 @@ export const EventThumbs = ({
 							<>
 								<br />
 								<small className="extraInfo">
-									{moment(event.date).format('l')}
-									{event.endDate && <> - {moment(event.endDate).format('l')}</>}
+									{dayjs(event.date).format('l')}
+									{event.endDate && <> - {dayjs(event.endDate).format('l')}</>}
 								</small>
 							</>
 						)}

VocaDbWeb/Scripts/Components/Shared/Partials/Shared/UniversalTimeLabel.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from '@/dayjs';
 import React from 'react';
 
 interface UniversalTimeLabelProps {
@@ -8,7 +8,7 @@ interface UniversalTimeLabelProps {
 export const UniversalTimeLabel = React.memo(
 	({ dateTime }: UniversalTimeLabelProps): React.ReactElement => {
 		return (
-			<span title="UTC" /* LOC */>{moment(dateTime).utc().format('lll')}</span>
+			<span title="UTC" /* LOC */>{dayjs(dateTime).utc().format('lll')}</span>
 		);
 	},
 );

VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongGrid.tsx

@@ -2,7 +2,8 @@ import { SongTypeLabel } from '@/Components/Shared/Partials/Song/SongTypeLabel';
 import { SongApiContract } from '@/DataContracts/Song/SongApiContract';
 import { UrlHelper } from '@/Helpers/UrlHelper';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
-import moment from 'moment';
+import dayjs from '@/dayjs';
+import UTC from 'dayjs/plugin/utc';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -40,6 +41,8 @@ interface SongGridProps {
 	displayPublishDate?: boolean;
 }
 
+dayjs.extend(UTC);
+
 export const SongGrid = ({
 	songs,
 	columns,
@@ -70,9 +73,7 @@ export const SongGrid = ({
 											<i
 												className="icon-calendar"
 												title={`Published: ${
-													moment(song.publishDate)
-														.utc()
-														.format('l') /* REVIEW */
+													dayjs(song.publishDate).utc().format('l') /* REVIEW */
 												}`} /* LOC */
 												/* TODO: tooltip */
 											/>

VocaDbWeb/Scripts/Components/Shared/Partials/Song/SongListsKnockout.tsx

@@ -2,8 +2,8 @@ import SafeAnchor from '@/Bootstrap/SafeAnchor';
 import { EntryType } from '@/Models/EntryType';
 import { EntryUrlMapper } from '@/Shared/EntryUrlMapper';
 import { SongListsBaseStore } from '@/Stores/SongList/SongListsBaseStore';
+import dayjs from '@/dayjs';
 import { observer } from 'mobx-react-lite';
-import moment from 'moment';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -26,7 +26,7 @@ export const SongListsKnockout = observer(
 								<tr>
 									<td colSpan={3}>
 										<h3 className="song-list-year">
-											{moment(item.eventDate).format('YYYY')}
+											{dayjs(item.eventDate).format('YYYY')}
 										</h3>
 									</td>
 								</tr>
@@ -54,7 +54,7 @@ export const SongListsKnockout = observer(
 									</Link>
 									{item.eventDate && (
 										<div>
-											<small>{moment(item.eventDate).format('l')}</small>
+											<small>{dayjs(item.eventDate).format('l')}</small>
 										</div>
 									)}
 								</td>

VocaDbWeb/Scripts/Components/Shared/SongPopupContent.tsx

@@ -1,6 +1,6 @@
 import { SongContract } from '@/DataContracts/Song/SongContract';
 import { DateTimeHelper } from '@/Helpers/DateTimeHelper';
-import moment from 'moment';
+import dayjs from '@/dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -38,7 +38,7 @@ export const SongPopupContent = React.memo(
 				{song.publishDate && (
 					<p>
 						{t('ViewRes:EntryDetails.PublishDate')}{' '}
-						{moment(song.publishDate).format('l')}
+						{dayjs(song.publishDate).format('l')}
 					</p>
 				)}
 

VocaDbWeb/Scripts/Components/Shared/UserPopupContent.tsx

@@ -1,6 +1,6 @@
 import { ProfileIcon } from '@/Components/Shared/Partials/User/ProfileIcon';
 import { UserApiContract } from '@/DataContracts/User/UserApiContract';
-import moment from 'moment';
+import dayjs from '@/dayjs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -29,7 +29,7 @@ export const UserPopupContent = React.memo(
 				)}
 
 				<p>
-					Joined{/* LOC */} {moment(user.memberSince).format('l')}
+					Joined{/* LOC */} {dayjs(user.memberSince).format('l')}
 				</p>
 			</>
 		);

VocaDbWeb/Scripts/DataContracts/Album/AlbumDetailsForApi.ts

@@ -24,8 +24,11 @@ import { ArtistCategories } from '@/Models/Artists/ArtistCategories';
 import { ArtistRoles } from '@/Models/Artists/ArtistRoles';
 import { ContentFocus } from '@/Models/ContentFocus';
 import { EntryStatus } from '@/Models/EntryStatus';
+import dayjs from 'dayjs';
+import UTC from 'dayjs/plugin/utc';
 import { has } from 'lodash-es';
-import moment from 'moment';
+
+dayjs.extend(UTC);
 
 export enum DiscMediaType {
 	Audio = 'Audio',
@@ -182,12 +185,11 @@ export class AlbumDetailsForApi {
 				this.releaseDate.year &&
 				this.releaseDate.month &&
 				this.releaseDate.day
-					? moment
-							.utc([
-								this.releaseDate.year,
-								this.releaseDate.month - 1,
-								this.releaseDate.day,
-							])
+					? dayjs
+							.utc()
+							.year(this.releaseDate.year)
+							.month(this.releaseDate.month - 1)
+							.date(this.releaseDate.day)
 							.toDate()
 					: undefined;
 		}
@@ -274,21 +276,21 @@ export class AlbumDetailsForApi {
 	get releaseDateIsInTheFarFuture(): boolean {
 		return (
 			!!this.fullReleaseDate &&
-			this.fullReleaseDate > moment.utc().add(7, 'd').toDate()
+			this.fullReleaseDate > dayjs.utc().add(7, 'd').toDate()
 		);
 	}
 
 	get releaseDateIsInTheNearFuture(): boolean {
 		return (
 			!!this.fullReleaseDate &&
-			this.fullReleaseDate > moment.utc().toDate() &&
-			this.fullReleaseDate <= moment.utc().add(7, 'd').toDate()
+			this.fullReleaseDate > dayjs.utc().toDate() &&
+			this.fullReleaseDate <= dayjs.utc().add(7, 'd').toDate()
 		);
 	}
 
 	get releaseDateIsInThePast(): boolean {
 		return (
-			!!this.fullReleaseDate && this.fullReleaseDate <= moment.utc().toDate()
+			!!this.fullReleaseDate && this.fullReleaseDate <= dayjs.utc().toDate()
 		);
 	}
 

VocaDbWeb/Scripts/Helpers/DateTimeHelper.ts

@@ -1,4 +1,7 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+import UTC from 'dayjs/plugin/utc';
+
+dayjs.extend(UTC);
 
 export class DateTimeHelper {
 	private static addLeadingZero(val: any): any {
@@ -7,15 +10,18 @@ export class DateTimeHelper {
 
 	static convertToLocal(utcDate: Date): Date | null {
 		if (utcDate == null) return null;
-		const momentDate = moment.utc(utcDate);
+		const momentDate = dayjs.utc(utcDate);
 		return new Date(momentDate.year(), momentDate.month(), momentDate.date());
 		//return new Date(utcDate.getFullYear(), utcDate.getMonth(), utcDate.getDate());
 	}
 
 	static convertToUtc(localDate: Date): Date | null {
 		if (localDate == null) return null;
-		return moment
-			.utc([localDate.getFullYear(), localDate.getMonth(), localDate.getDate()])
+		return dayjs
+			.utc()
+			.year(localDate.getFullYear())
+			.month(localDate.getMonth())
+			.date(localDate.getDate())
 			.toDate();
 	}
 

VocaDbWeb/Scripts/Helpers/EntryMergeValidationHelper.ts

@@ -1,6 +1,6 @@
 import { CommonEntryContract } from '@/DataContracts/CommonEntryContract';
 import { EntryStatus } from '@/Models/EntryStatus';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 export class EntryMergeValidationHelper {
 	private static toEnum(statusStr: string | EntryStatus): EntryStatus {
@@ -22,14 +22,14 @@ export class EntryMergeValidationHelper {
 
 		return {
 			validationError_targetIsLessComplete:
-				moment(targetCreated) <= moment(baseCreated) &&
+				dayjs(targetCreated) <= dayjs(baseCreated) &&
 				targetStatusEnum === EntryStatus.Draft &&
 				baseStatusEnum > EntryStatus.Draft,
 			validationError_targetIsNewer:
 				!(
 					targetStatusEnum > EntryStatus.Draft &&
 					baseStatusEnum === EntryStatus.Draft
-				) && moment(targetCreated) > moment(baseCreated),
+				) && dayjs(targetCreated) > dayjs(baseCreated),
 		};
 	}