From 27f4c41a0ecf70c5706584c869d48bac4837f062 Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Tue, 14 Jun 2022 18:08:31 +0800
Subject: [PATCH] no log: Fix uptime in the system status view (with the
 approach that doesn't hurt performance)

---
 frontend/src/pages/System/Status/index.tsx | 20 +++++++++-----------
 frontend/src/utilities/hooks.ts            | 12 ++++++++++++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/System/Status/index.tsx b/frontend/src/pages/System/Status/index.tsx
index fca4f1e48..0d17219c7 100644
--- a/frontend/src/pages/System/Status/index.tsx
+++ b/frontend/src/pages/System/Status/index.tsx
@@ -1,6 +1,7 @@
 import { useSystemHealth, useSystemStatus } from "@/apis/hooks";
 import { QueryOverlay } from "@/components/async";
 import { GithubRepoRoot } from "@/constants";
+import { useInterval } from "@/utilities";
 import { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import {
   faDiscord,
@@ -10,9 +11,9 @@ import {
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Anchor, Container, Divider, Grid, Stack, Text } from "@mantine/core";
-import { useDocumentTitle, useInterval } from "@mantine/hooks";
+import { useDocumentTitle } from "@mantine/hooks";
 import moment from "moment";
-import { FunctionComponent, ReactNode, useEffect, useState } from "react";
+import { FunctionComponent, ReactNode, useCallback, useState } from "react";
 import Table from "./table";
 
 interface InfoProps {
@@ -71,10 +72,11 @@ const SystemStatusView: FunctionComponent = () => {
 
   const [uptime, setUptime] = useState<string>();
 
-  const interval = useInterval(() => {
-    if (status) {
+  const update = useCallback(() => {
+    const startTime = status?.start_time;
+    if (startTime) {
       const duration = moment.duration(
-          moment().utc().unix() - status.start_time,
+          moment().utc().unix() - startTime,
           "seconds"
         ),
         days = duration.days(),
@@ -83,13 +85,9 @@ const SystemStatusView: FunctionComponent = () => {
         seconds = duration.seconds().toString().padStart(2, "0");
       setUptime(days + "d " + hours + ":" + minutes + ":" + seconds);
     }
-  }, 1000);
+  }, [status?.start_time]);
 
-  useEffect(() => {
-    interval.start();
-    return interval.stop();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [interval]);
+  useInterval(update, 1000);
 
   useDocumentTitle("Status - Bazarr (System)");
 
diff --git a/frontend/src/utilities/hooks.ts b/frontend/src/utilities/hooks.ts
index 310a8763a..dd485ebdd 100644
--- a/frontend/src/utilities/hooks.ts
+++ b/frontend/src/utilities/hooks.ts
@@ -150,3 +150,15 @@ export function useOnValueChange<T>(value: T, onChange: (value: T) => void) {
     }
   }, [value]);
 }
+
+// Mantine's useInterval has some weird issues. This is a workaround.
+export function useInterval(fn: VoidFunction, ms: number) {
+  const timer = useRef<number>();
+
+  useEffect(() => {
+    timer.current = window.setInterval(fn, ms);
+    return () => {
+      clearInterval(timer.current);
+    };
+  }, [fn, ms]);
+}