fix: better handle last_seen: "disable" (#357)

Author: Nerivec

mocks/bridgeInfo.ts

@@ -13,6 +13,7 @@ export const BRIDGE_INFO: Message<Zigbee2MQTTAPI["bridge/info"]> = {
                 elapsed: true,
                 ext_pan_id: [170, 187, 204, 221, 238, 255, 0, 0],
                 last_seen: "ISO_8601_local",
+                // last_seen: "disable",
                 log_console_json: false,
                 log_debug_namespace_ignore: "",
                 log_debug_to_mqtt_frontend: false,

src/components/device-page/tabs/DeviceInfo.tsx

@@ -294,7 +294,11 @@ export default function DeviceInfo({ sourceIdx, device }: DeviceInfoProps) {
                     <div className="stat px-3">
                         <div className="stat-title">{t(($) => $.last_seen)}</div>
                         <div className="stat-value text-xl">
-                            <LastSeen config={bridgeConfig.advanced.last_seen} lastSeen={deviceState.last_seen} />
+                            <LastSeen
+                                config={bridgeConfig.advanced.last_seen}
+                                lastSeen={deviceState.last_seen}
+                                fallback={t(($) => $.disabled, { ns: "common" })}
+                            />
                         </div>
                         <div className="stat-desc">
                             {t(($) => $.availability, { ns: "availability" })}

src/components/value-decorators/LastSeen.tsx

@@ -1,11 +1,12 @@
-import { type JSX, memo } from "react";
+import { memo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { LastSeenConfig } from "../../types.js";
 import TimeAgo from "./TimeAgo.js";
 
 type LastSeenProps = {
     lastSeen: unknown;
     config: LastSeenConfig;
+    fallback?: ReactNode;
 };
 
 const getLastSeenDate = (lastSeen: unknown, lastSeenConfig: LastSeenConfig): Date | undefined => {
@@ -30,7 +31,7 @@ const getLastSeenDate = (lastSeen: unknown, lastSeenConfig: LastSeenConfig): Dat
     }
 };
 
-const LastSeen = memo(({ lastSeen, config }: LastSeenProps): JSX.Element => {
+const LastSeen = memo(({ lastSeen, config, fallback = null }: LastSeenProps) => {
     const { i18n } = useTranslation();
     const lastSeenDate = getLastSeenDate(lastSeen, config);
 
@@ -39,7 +40,7 @@ const LastSeen = memo(({ lastSeen, config }: LastSeenProps): JSX.Element => {
             <TimeAgo datetime={lastSeenDate} locale={i18n.language} />
         </span>
     ) : (
-        <span>N/A</span>
+        fallback
     );
 });
 

src/pages/DevicesPage.tsx

@@ -245,7 +245,13 @@ export default function DevicesPage(): JSX.Element {
                     row: {
                         original: { sourceIdx, state },
                     },
-                }) => <LastSeen lastSeen={state.last_seen} config={bridgeInfo[sourceIdx].config.advanced.last_seen} />,
+                }) => (
+                    <LastSeen
+                        lastSeen={state.last_seen}
+                        config={bridgeInfo[sourceIdx].config.advanced.last_seen}
+                        fallback={t(($) => $.disabled, { ns: "common" })}
+                    />
+                ),
                 // don't want to compare by minute (`accessorFn`), as that creates visual mismatches with `<LastSeen />`
                 sortingFn: (rowA, rowB) => {
                     const a = getLastSeenEpoch(rowA.original.state.last_seen, bridgeInfo[rowA.original.sourceIdx].config.advanced.last_seen);