From 3fe3691e74ffe05ad19fba57ed9aae50a2f976ca Mon Sep 17 00:00:00 2001
From: sua yoo <sua@suayoo.com>
Date: Wed, 23 Feb 2022 16:14:01 -0800
Subject: [PATCH] Update crawl run duration at intervals (#155)

fixes #138
---
 frontend/src/components/relative-duration.ts | 26 +++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/relative-duration.ts b/frontend/src/components/relative-duration.ts
index 2ade2a5f..a6239d74 100644
--- a/frontend/src/components/relative-duration.ts
+++ b/frontend/src/components/relative-duration.ts
@@ -4,6 +4,7 @@ import humanizeDuration from "pretty-ms";
 
 /**
  * Show time passed from date in human-friendly format
+ * Updates every 5 seconds
  *
  * Usage example:
  * ```ts
@@ -16,17 +17,36 @@ export class RelativeDuration extends LitElement {
   @property({ type: String })
   value?: string; // `new Date` compatible date format
 
+  @state()
+  private now = Date.now();
+
+  // For long polling:
+  private timerId?: number;
+
   static humanize(duration: number) {
     return humanizeDuration(duration, {
       secondsDecimalDigits: 0,
     });
   }
 
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    this.timerId = window.setInterval(() => this.updateValue(), 1000 * 5);
+  }
+
+  disconnectedCallback(): void {
+    window.clearInterval(this.timerId);
+    super.disconnectedCallback();
+  }
+
   render() {
     if (!this.value) return "";
 
-    return RelativeDuration.humanize(
-      Date.now() - new Date(this.value).valueOf()
-    );
+    return RelativeDuration.humanize(this.now - new Date(this.value).valueOf());
+  }
+
+  private updateValue() {
+    this.now = Date.now();
   }
 }