From b6c4ac332fd8f06abdc8fbda006e04c1e095e033 Mon Sep 17 00:00:00 2001
From: jvyden <jvyden@jvyden.xyz>
Date: Tue, 27 Aug 2024 19:06:55 -0400
Subject: [PATCH] Remove dependency on dayjs

---
 package-lock.json                       |  6 ---
 package.json                            |  1 -
 src/app/components/ui/date.component.ts | 54 +++++++++++++++----------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7d7e56..e6523f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,6 @@
         "@fortawesome/angular-fontawesome": "^0.15.0",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
-        "dayjs": "^1.11.11",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -5950,11 +5949,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index 649659c..1fc88b8 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
     "@fortawesome/angular-fontawesome": "^0.15.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "dayjs": "^1.11.11",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
diff --git a/src/app/components/ui/date.component.ts b/src/app/components/ui/date.component.ts
index fda2777..fa8e32b 100644
--- a/src/app/components/ui/date.component.ts
+++ b/src/app/components/ui/date.component.ts
@@ -1,13 +1,6 @@
-import {Component, Inject, Input, PLATFORM_ID} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {TooltipComponent} from "./text/tooltip.component";
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { isPlatformBrowser } from "@angular/common";
 
-dayjs.extend(relativeTime);
-
-// FIXME: this component can't be used from SSR due to hydration problems
-// best to just nuke dayJs entirely and write our own function
 @Component({
   selector: 'app-date',
   standalone: true,
@@ -15,24 +8,23 @@ dayjs.extend(relativeTime);
     TooltipComponent
 ],
   template: `
-    @if (isBrowserOnly) {
-      <app-tooltip [text]="getFormattedDate()">
+<!--
+    for some stupid fucking reason we need to defer this,
+    because otherwise this breaks the layout when SSR renders this component 
+-->
+    @defer {
+      <app-tooltip [text]="getFormattedDate()" class>
         {{ getMoment() }}
       </app-tooltip>
+    } @placeholder {
+      <span>{{ recentText }}</span>
     }
-    @else {
-      <span>...</span>
-    }
-    `
+  `
 })
 export class DateComponent {
   private _date: Date = new Date();
-
-  constructor(@Inject(PLATFORM_ID) private platformId: string) {}
-
-  get isBrowserOnly(): boolean {
-    return isPlatformBrowser(this.platformId);
-  }
+  
+  protected recentText = "just now";
 
   @Input({required: true, alias: "date"})
   set date(value: Date) {
@@ -40,7 +32,27 @@ export class DateComponent {
   }
 
   getMoment(): string {
-    return dayjs(this._date).fromNow();
+    const now = new Date();
+    const seconds = Math.floor((now.getTime() - this._date.getTime()) / 1000);
+
+    const intervals: { [key: string]: number } = {
+      year: 31536000,
+      month: 2592000,
+      week: 604800,
+      day: 86400,
+      hour: 3600,
+      minute: 60,
+      second: 1,
+    };
+
+    for (const interval in intervals) {
+      const time = Math.floor(seconds / intervals[interval]);
+      if (time >= 1) {
+        return `${time} ${interval}${time > 1 ? 's' : ''} ago`;
+      }
+    }
+
+    return this.recentText;
   }
 
   getFormattedDate(): string {