Introduce date component to replace getMoment bullshit

src/app/api/types/level.ts

@@ -5,8 +5,8 @@ export interface Level {
   title: string
   description: string
   iconHash: string
-  publishDate: number
-  updateDate: number
+  publishDate: Date
+  updateDate: Date
   booRatings: number
   yayRatings: number
   hearts: number

src/app/app.module.ts

@@ -89,6 +89,7 @@ import { AdminLinkButtonComponent } from './components/admin-link-button/admin-l
 import { EditLevelComponent } from './pages/edit-level/edit-level.component';
 import {FormsModule} from "@angular/forms";
 import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password.component';
+import { DateComponent } from './components/date/date.component';
 
 @NgModule({
     declarations: [
@@ -152,6 +153,7 @@ import { ForgotPasswordComponent } from './pages/forgot-password/forgot-password
         AdminLinkButtonComponent,
         EditLevelComponent,
         ForgotPasswordComponent,
+        DateComponent,
     ],
     imports: [
         BrowserModule,

src/app/components/activity-event/activity-event.component.html

@@ -34,7 +34,9 @@
       <span *ngSwitchCase="127">logged in for the first time</span>
       <span *ngSwitchDefault>Unhandled case: {{_event.eventType}}</span>
     </ng-template>
-    <p-gentle>{{getMoment(_event.occurredAt)}}</p-gentle>
+    <p-gentle>
+      <date [date]="_event.occurredAt"></date>
+    </p-gentle>
   </div>
 </div>
 

src/app/components/activity-event/activity-event.component.ts

@@ -27,10 +27,6 @@ export class ActivityEventComponent {
     this._contextIsLevel = contextIsLevel;
   }
 
-  getMoment(timestamp: number | Date): string {
-    return moment(timestamp).fromNow();
-  }
-
   getUserFromEvent(): User {
     if(this._page === undefined) return undefined!;
     if(this._event === undefined) return undefined!;

src/app/components/date/date.component.html

@@ -0,0 +1,3 @@
+<tooltip [text]="getFormattedDate()">
+    {{ getMoment() }}
+</tooltip>

src/app/components/date/date.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+import * as moment from "dayjs";
+
+@Component({
+  selector: 'date',
+  templateUrl: './date.component.html'
+})
+export class DateComponent {
+  private _date: Date = new Date();
+
+  @Input("date")
+  set date(value: Date) {
+    this._date = new Date(value);
+  }
+
+  getMoment(): string {
+    return moment(this._date).fromNow();
+  }
+
+  getFormattedDate(): string {
+    return `${this._date.toLocaleDateString()} @ ${this._date.toLocaleTimeString()}`;
+  }
+}

src/app/components/level-preview/level-preview.component.html

@@ -11,7 +11,7 @@
       </tooltip>
       <level-statistics [level]="_level" class="text-sm"></level-statistics>
       <p-gentle *ngIf="_level.publisher">by <user-link [user]="_level.publisher" class="pl-0.5"></user-link></p-gentle>
-      <p-gentle>Created in {{getGameVersion(_level.gameVersion)}} {{getMoment(_level.publishDate)}}</p-gentle>
+      <p-gentle>Created in {{getGameVersion(_level.gameVersion)}} <date [date]="_level.publishDate"></date></p-gentle>
     </div>
   </div>
 

src/app/components/level-preview/level-preview.component.ts

@@ -23,10 +23,6 @@ export class LevelPreviewComponent {
     this._description = description;
   }
 
-  getMoment(timestamp: number): string {
-    return moment(timestamp).fromNow();
-  }
-
   getGameVersion(version: number): string {
     return GameVersion[version].replace("LittleBigPlanet", "LBP");
   }

src/app/components/refresh-notification/refresh-notification.component.html

@@ -4,7 +4,9 @@
     {{_notification.title}}
   </span>
 
-  <span-gentle>{{getMoment(_notification.createdAt)}}</span-gentle>
+  <span-gentle>
+    <date [date]="_notification.createdAt"></date>
+  </span-gentle>
 
   <!-- close button-->
   <fa-icon class="float-right text-xl mr-2.5 text-secondary-bright cursor-pointer" [icon]="'xmark'" (click)="raiseClearEvent()"></fa-icon>

src/app/components/refresh-notification/refresh-notification.component.ts

@@ -21,10 +21,6 @@ export class RefreshNotificationComponent {
     return name as IconName;
   }
 
-  getMoment(timestamp: Date): string {
-    return moment(timestamp).fromNow();
-  }
-
   raiseClearEvent(): void {
     this.clearEvent.emit(this._notification.notificationId)
   }

src/app/components/tooltip/tooltip.component.html

@@ -4,7 +4,7 @@
   absolute z-10 mt-1 left-1/2 transform -translate-x-1/2
   py-2.5 px-5 bg-backdrop flex items-center justify-center
   transition-opacity duration-300
-  font-normal text-base whitespace-nowrap
+  not-italic text-foreground font-normal text-base whitespace-nowrap
   rounded drop-shadow-lg">
     {{_text}}
   </span>

src/app/pages/admin-registrations/admin-registrations.component.html

@@ -14,5 +14,5 @@
 
   <p class="text-xl font-bold">{{registration.username}}</p>
   <p>{{registration.emailAddress}}</p>
-  <p-gentle>Expires {{getMoment(registration.expiryDate)}}</p-gentle>
+  <p-gentle>Expires <date [date]="registration.expiryDate"></date></p-gentle>
 </div>

src/app/pages/admin-registrations/admin-registrations.component.ts

@@ -20,10 +20,6 @@ export class AdminRegistrationsComponent implements OnInit {
     });
   }
 
-  getMoment(timestamp: Date): string {
-    return moment(timestamp).fromNow();
-  }
-
   remove(registration: AdminQueuedRegistration): void {
     this.adminService.AdminRemoveQueuedRegistration(registration);
     this.ngOnInit();

src/app/pages/admin-users/admin-users.component.ts

@@ -24,9 +24,6 @@ export class AdminUsersComponent {
       this.total = data.listInfo.totalItems;
     });
   }
-  getMoment(timestamp: Date): string {
-    return moment(timestamp).fromNow();
-  }
 
   getRole(role: number | undefined) {
     if(role == undefined) return "";

src/app/pages/authentication/authentication.component.html

@@ -9,7 +9,7 @@
 <div *ngFor="let request of requests" class="bg-form-background px-5 py-3.5 rounded flex">
   <div class="w-full">
     <p class="text-xl font-bold">{{request.ipAddress}}</p>
-    <p-gentle>Sent {{getMoment(request.createdAt)}}</p-gentle>
+    <p-gentle>Sent <date [date]="request.createdAt"></date></p-gentle>
   </div>
   <div class="text-center align-top flex gap-2 text-xl float-right">
     <div class="rounded-full bg-success p-2.5 w-10 h-10 cursor-pointer" (click)="approve(request.ipAddress)">

src/app/pages/authentication/authentication.component.ts

@@ -25,10 +25,6 @@ export class AuthenticationComponent implements OnInit {
       })
   }
 
-  getMoment(timestamp: Date): string {
-    return moment(timestamp).fromNow();
-  }
-
   approve(ipAddress: string) {
     this.apiClient.ApproveIpVerificationRequests(ipAddress).subscribe(() => {
       window.location.reload(); // TODO: reload the requests dynamically instead of ...this.

src/app/pages/level/level.component.html

@@ -15,9 +15,12 @@
           </span-gentle>
         </div>
         <div class="text-sm font-normal">
-          <span-gentle>Published for {{getGameVersion(level.gameVersion)}} {{ getMoment(level.publishDate) }}</span-gentle>
+          <span-gentle>Published for {{getGameVersion(level.gameVersion)}} </span-gentle>
+          <span-gentle>
+            <date [date]="level.publishDate"></date>
+          </span-gentle>
           <span-gentle *ngIf="level.publishDate != level.updateDate">,
-            last updated {{ getMoment(level.updateDate)}}</span-gentle>
+            last updated <date [date]="level.updateDate"></date></span-gentle>
         </div>
       </div>
 
@@ -86,12 +89,10 @@ <h2 class="text-3xl font-bold flex-grow">Leaderboard</h2>
             <span class="text-lg">{{score.score.toLocaleString(undefined)}} points</span>
 
             <span class="text-sm">
-                        Achieved by
-                        <b>
-                            <user-link [user]="score.players[0]"></user-link>
-                        </b>
-              {{getMoment(score.scoreSubmitted)}}
-                    </span>
+              Achieved by
+              <b><user-link [user]="score.players[0]"></user-link></b>
+              <date [date]="score.scoreSubmitted" class="ml-1"></date>
+            </span>
           </div>
         </a>
       </div>

src/app/pages/level/level.component.ts

@@ -107,10 +107,6 @@ export class LevelComponent implements OnInit {
     this.getScores(this.level.levelId, false, this.scores.length + 1).subscribe();
   }
 
-  getMoment(timestamp: number | Date): string {
-    return moment(timestamp).fromNow();
-  }
-
   getGameVersion(version: number): string {
     return GameVersion[version].replace("LittleBigPlanet", "LBP");
   }