From fdc6e1b789bde7a0d2e08c42d11df24ac59645f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Tue, 16 Jun 2020 17:00:33 +0100
Subject: [PATCH] chore(ui): move moment poller to a dedicated component

---
 ui/src/App.tsx                               |  7 +++++++
 ui/src/Components/MomentPolledTimer/index.js | 12 ++++++++++++
 ui/src/Stores/AlertStore.js                  |  6 ++----
 ui/src/index.tsx                             |  7 -------
 4 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 ui/src/Components/MomentPolledTimer/index.js

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 8116e3244..398a92f4f 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -45,6 +45,12 @@ const FaviconBadge = React.lazy(() =>
   }))
 );
 
+const MomentPolledTimer = React.lazy(() =>
+  import("Components/MomentPolledTimer").then((module) => ({
+    default: module.MomentPolledTimer,
+  }))
+);
+
 interface UIDefaults {
   Refresh: number;
   HideFiltersWhenIdle: boolean;
@@ -156,6 +162,7 @@ const App: FunctionComponent<AppProps> = ({ defaultFilters, uiDefaults }) => {
       <React.Suspense fallback={null}>
         <FaviconBadge alertStore={alertStore} />
         <Fetcher alertStore={alertStore} settingsStore={settingsStore} />
+        <MomentPolledTimer />
       </React.Suspense>
     </ErrorBoundary>
   ));
diff --git a/ui/src/Components/MomentPolledTimer/index.js b/ui/src/Components/MomentPolledTimer/index.js
new file mode 100644
index 000000000..9b646ffbc
--- /dev/null
+++ b/ui/src/Components/MomentPolledTimer/index.js
@@ -0,0 +1,12 @@
+import React, { useEffect } from "react";
+
+import Moment from "react-moment";
+
+export function MomentPolledTimer() {
+  useEffect(() => {
+    Moment.startPooledTimer();
+    return () => Moment.clearPooledTimer();
+  }, []);
+
+  return <span id="moment-polled-timer" />;
+}
diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js
index 4bae228af..64c205616 100644
--- a/ui/src/Stores/AlertStore.js
+++ b/ui/src/Stores/AlertStore.js
@@ -4,8 +4,6 @@ import throttle from "lodash.throttle";
 
 import qs from "qs";
 
-import moment from "moment";
-
 import { FetchGet } from "Common/Fetch";
 
 const QueryStringEncodeOptions = {
@@ -280,7 +278,7 @@ class AlertStore {
       setIdle() {
         this.value = AlertStoreStatuses.Idle;
         this.error = null;
-        this.lastUpdateAt = moment();
+        this.lastUpdateAt = new Date();
       },
       setFetching() {
         this.value = AlertStoreStatuses.Fetching;
@@ -292,7 +290,7 @@ class AlertStore {
       setFailure(err) {
         this.value = AlertStoreStatuses.Failure;
         this.error = err;
-        this.lastUpdateAt = moment();
+        this.lastUpdateAt = new Date();
       },
       pause() {
         this.paused = true;
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 5985559ba..121d34eab 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -7,8 +7,6 @@ import "react-app-polyfill/stable";
 import React from "react";
 import ReactDOM from "react-dom";
 
-import Moment from "react-moment";
-
 import "mobx-react-lite/batchingForReactDom";
 
 import {
@@ -21,11 +19,6 @@ import { App } from "./App";
 
 SetupSentry(SettingsElement());
 
-// global timer for updating timestamps to human readable offsets
-// this needs to be run before any <Moment/> instance
-// https://www.npmjs.com/package/react-moment#pooled-timer
-Moment.startPooledTimer();
-
 // https://wetainment.com/testing-indexjs/
 export default ReactDOM.render(
   <App