fix: format time

Author: joshunrau

apps/web/src/features/about/components/InfoBlock.tsx

@@ -1,12 +1,21 @@
-export const InfoBlock: React.FC<{ items: { [key: string]: string }; label: string }> = ({ items, label }) => {
+import { TimeValue } from './TimeValue';
+
+export type InfoBlockProps = {
+  items: {
+    [key: string]: string;
+  };
+  label: string;
+};
+
+export const InfoBlock = ({ items, label }: InfoBlockProps) => {
   return (
     <div>
       <h5 className="mb-1 font-semibold">{label}</h5>
       <ul className="text-muted-foreground grid gap-0.5">
         {Object.entries(items).map(([key, value]) => (
           <li key={key}>
             <span>{key}: </span>
-            <span>{value}</span>
+            {value.startsWith('Uptime=') ? <TimeValue value={parseInt(value.slice(7))} /> : <span>{value}</span>}
           </li>
         ))}
       </ul>

apps/web/src/features/about/components/TimeValue.tsx

@@ -0,0 +1,26 @@
+import { useCallback, useRef, useState } from 'react';
+
+import { parseDuration } from '@douglasneuroinformatics/libjs';
+import { useInterval } from '@douglasneuroinformatics/libui/hooks';
+
+export type TimeValueProps = {
+  value: number;
+};
+
+export const TimeValue = ({ value }: TimeValueProps) => {
+  const format = useCallback((uptime: number) => {
+    let { days, hours, minutes, seconds } = parseDuration(uptime * 1000);
+    hours += days * 24;
+    return [hours, minutes, seconds].map((value) => (value < 10 ? '0' + value : value)).join(':');
+  }, []);
+  const valueRef = useRef<number>(value);
+
+  const [state, setState] = useState(format(value));
+
+  useInterval(() => {
+    valueRef.current = valueRef.current + 1;
+    setState(format(valueRef.current + 1));
+  }, 1000);
+
+  return <span>{state}</span>;
+};

apps/web/src/features/about/pages/AboutPage.tsx

@@ -1,4 +1,3 @@
-import { parseDuration } from '@douglasneuroinformatics/libjs';
 import { Card, Heading } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import type { ReleaseInfo } from '@opendatacapture/schemas/setup';
@@ -64,12 +63,6 @@ export const AboutPage = () => {
 
   const { isGatewayEnabled } = setupStateQuery.data;
 
-  const translateUptime = (uptime: number) => {
-    let { days, hours, minutes, seconds } = parseDuration(uptime * 1000);
-    hours += days * 24;
-    return [hours, minutes, seconds].map((value) => (value < 10 ? '0' + value : value)).join(':');
-  };
-
   const translateReleaseInfo = (release: ReleaseInfo) => {
     const translatedReleaseInfo = {
       [t(translations.buildType)]: t(translations.buildTypes[release.type]),
@@ -92,7 +85,7 @@ export const AboutPage = () => {
     gatewayInfo[t(translations.status)] = gatewayHealthData.status.toString();
     if (gatewayHealthData.ok) {
       Object.assign(gatewayInfo, translateReleaseInfo(gatewayHealthData.release), {
-        [t(translations.uptime)]: translateUptime(gatewayHealthData.uptime)
+        [t(translations.uptime)]: `Uptime=${gatewayHealthData.uptime}`
       });
     }
     return gatewayInfo;
@@ -127,7 +120,7 @@ export const AboutPage = () => {
           <InfoBlock
             items={{
               ...translateReleaseInfo(setupStateQuery.data.release),
-              [t(translations.uptime)]: translateUptime(setupStateQuery.data.uptime)
+              [t(translations.uptime)]: `Uptime=${setupStateQuery.data.uptime}`
             }}
             label={t({
               en: 'Core API',