migrate from moment to date-fns (#988)

Last years there are some alternatives to momentjs appeared. Like [date-fns](https://date-fns.org/). Mostly they depend on new [itnl](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Intl), that is build in into all modern browsers. Unfortunately, I wasn't able to build the project (I've never touched rust before, and the current cargo version refused to accept configs from repo). That's why I'm not sure that this PR actually works :( If somebody can check, that it builds correctly now - it would be nice to move to less size costly solution like date-fns. Co-authored-by: Eugene <[email protected]>
warp-tech · Jul 16, 2024 · 7e45fa5 · 7e45fa5
1 parent b65a189
commit 7e45fa5
Show file tree

Hide file tree

Showing 5 changed files with 199 additions and 253 deletions.
diff --git a/warpgate-web/package.json b/warpgate-web/package.json
@@ -34,6 +34,7 @@
     "@typescript-eslint/parser": "^7.13.0",
     "bootstrap": "^5.3.3",
     "copy-text-to-clipboard": "^3.0.1",
+    "date-fns": "^3.6.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -42,7 +43,6 @@
     "eslint-plugin-promise": "^6.2.0",
     "eslint-plugin-svelte": "^2.39.4",
     "format-duration": "^3.0.2",
-    "moment": "^2.29.4",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.1",
     "sass": "^1.77.6",
@@ -64,4 +64,4 @@
     "xterm": "^4.18.0",
     "xterm-addon-serialize": "^0.7.0"
   }
-}
+}
diff --git a/warpgate-web/src/admin/Home.svelte b/warpgate-web/src/admin/Home.svelte
@@ -4,7 +4,7 @@
     import { onDestroy } from 'svelte'
     import { link } from 'svelte-spa-router'
     import { api, SessionSnapshot } from 'admin/lib/api'
-    import moment from 'moment'
+    import { formatDistance } from 'date-fns';
     import { timer, Observable, switchMap, from, combineLatest, fromEvent, merge } from 'rxjs'
     import RelativeDate from './RelativeDate.svelte'
     import AsyncButton from 'common/AsyncButton.svelte'
@@ -104,7 +104,7 @@
 
             <div class="meta">
                 {#if session.ended }
-                    {moment.duration(moment(session.ended).diff(session.started)).humanize()}
+                    {formatDistance(new Date(session.started), new Date(session.ended))}
                 {/if}
             </div>
 

diff --git a/warpgate-web/src/admin/Session.svelte b/warpgate-web/src/admin/Session.svelte
@@ -3,7 +3,7 @@ import { api, SessionSnapshot, Recording, TargetSSHOptions, TargetHTTPOptions, T
 import { timeAgo } from 'admin/lib/time'
 import AsyncButton from 'common/AsyncButton.svelte'
 import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import moment from 'moment'
+import { formatDistance, formatDistanceToNow } from 'date-fns';
 import { onDestroy } from 'svelte'
 import { link } from 'svelte-spa-router'
 import { Alert } from '@sveltestrap/sveltestrap'
@@ -79,9 +79,9 @@ onDestroy(() => clearInterval(interval))
                 </strong>
                 <span class="text-muted">
                     {#if session.ended}
-                        {moment.duration(moment(session.ended).diff(session.started)).humanize()} long, <RelativeDate date={session.started} />
+                        {formatDistance(new Date(session.started), new Date(session.ended))} long, <RelativeDate date={session.started} />
                     {:else}
-                        {moment.duration(moment().diff(session.started)).humanize()}
+                        {formatDistanceToNow(new Date(session.started))}
                     {/if}
                 </span>
             </div>

diff --git a/warpgate-web/src/admin/lib/time.ts b/warpgate-web/src/admin/lib/time.ts
@@ -1,5 +1,5 @@
-import moment from 'moment'
+import { formatDistanceToNow } from 'date-fns'
 
-export function timeAgo (t: Date): string {
-    return moment(t).fromNow()
+export function timeAgo(t: Date): string {
+    return formatDistanceToNow(t, { addSuffix: true })
 }