Remove timeago-react

src/components/PageComponents/Map/NodeDetail.tsx

@@ -3,7 +3,7 @@ import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
-import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Protobuf } from "@meshtastic/js";
 import type { Protobuf as ProtobufType } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";

src/components/generic/Table/tmp/TimeAgo.tsx

@@ -1,9 +0,0 @@
-import TimeAgoReact from "timeago-react";
-
-export interface TimeAgoProps {
-  timestamp: number;
-}
-
-export const TimeAgo = ({ timestamp }: TimeAgoProps): JSX.Element => {
-  return <TimeAgoReact datetime={timestamp} opts={{ minInterval: 10 }} />;
-};

src/components/generic/TimeAgo.tsx

@@ -0,0 +1,34 @@
+import { type JSX, useEffect, useState } from "react";
+
+export interface TimeAgoProps {
+  timestamp: number;
+}
+
+const getTimeAgo = (timestamp: number): string => {
+  const now = Date.now();
+  const secondsPast = Math.floor((now - timestamp) / 1000);
+
+  if (secondsPast < 10) return "now";
+  if (secondsPast < 60) return `${secondsPast} seconds ago`;
+  if (secondsPast < 3600) return `${Math.floor(secondsPast / 60)} minutes ago`;
+  if (secondsPast < 86400) return `${Math.floor(secondsPast / 3600)} hours ago`;
+  return `${Math.floor(secondsPast / 86400)} days ago`;
+};
+
+export const TimeAgo = ({ timestamp }: TimeAgoProps): JSX.Element => {
+  const [timeAgo, setTimeAgo] = useState(getTimeAgo(timestamp));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(getTimeAgo(timestamp));
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [timestamp]);
+
+  useEffect(() => {
+    setTimeAgo(getTimeAgo(timestamp));
+  }, [timestamp]);
+
+  return <span>{timeAgo}</span>;
+};

src/pages/Nodes.tsx

@@ -6,7 +6,7 @@ import { Sidebar } from "@components/Sidebar.tsx";
 import { Button } from "@components/UI/Button.tsx";
 import { Mono } from "@components/generic/Mono.tsx";
 import { Table } from "@components/generic/Table/index.tsx";
-import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import { Protobuf, type Types } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
@@ -77,8 +77,8 @@ const NodesPage = (): JSX.Element => {
                 {node.user?.longName ??
                   (node.user?.macaddr
                     ? `Meshtastic ${base16
-                        .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-                        .toLowerCase()}`
+                      .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
+                      .toLowerCase()}`
                     : `!${numberToHexUnpadded(node.num)}`)}
               </h1>,
 
@@ -114,9 +114,8 @@ const NodesPage = (): JSX.Element => {
                 {node.lastHeard !== 0
                   ? node.viaMqtt === false && node.hopsAway === 0
                     ? "Direct"
-                    : `${node.hopsAway.toString()} ${
-                        node.hopsAway > 1 ? "hops" : "hop"
-                      } away`
+                    : `${node.hopsAway.toString()} ${node.hopsAway > 1 ? "hops" : "hop"
+                    } away`
                   : "-"}
                 {node.viaMqtt === true ? ", via MQTT" : ""}
               </Mono>,