Use relative time for viewing duration

web/pages/connected-clients.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Table } from 'antd';
+import { formatDistanceToNow } from "date-fns";
 import { BroadcastStatusContext } from './utils/broadcast-status-context';
 
 import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from './utils/apis';
@@ -50,36 +51,36 @@ export default function ConnectedClients() {
 
   const columns = [
     {
-      title: 'User name',
+      title: "User name",
-      dataIndex: 'username',
+      dataIndex: "username",
-      key: 'username',
+      key: "username",
-      render: username => username || '-',
+      render: (username) => username || "-",
       sorter: (a, b) => a.username - b.username,
-      sortDirections: ['descend', 'ascend'],  
+      sortDirections: ["descend", "ascend"],
     },
     {
-      title: 'Messages sent',
+      title: "Messages sent",
-      dataIndex: 'messageCount',
+      dataIndex: "messageCount",
-      key: 'messageCount',
+      key: "messageCount",
       sorter: (a, b) => a.messageCount - b.messageCount,
-      sortDirections: ['descend', 'ascend'],  
+      sortDirections: ["descend", "ascend"],
     },
     {
-      title: 'Connected Time',
+      title: "Connected Time",
-      dataIndex: 'connectedAt',
+      dataIndex: "connectedAt",
-      key: 'connectedAt',
+      key: "connectedAt",
-      render: time => (Date.now() - (new Date(time).getTime())) / 1000 / 60,
+      render: (time) => formatDistanceToNow(new Date(time)),
     },
     {
-      title: 'User Agent',
+      title: "User Agent",
-      dataIndex: 'userAgent',
+      dataIndex: "userAgent",
-      key: 'userAgent', 
+      key: "userAgent",
     },
     {
-      title: 'Location',
+      title: "Location",
-      dataIndex: 'geo',
+      dataIndex: "geo",
-      key: 'geo', 
+      key: "geo",
-      render: geo => geo && `${geo.regionName}, ${geo.countryCode}`,
+      render: (geo) => geo && `${geo.regionName}, ${geo.countryCode}`,
     },
   ];