Merge pull request sinamics#534 from sinamics/device-list

Add Timeago and Online status for devices
tinola · Aug 30, 2024 · 5df694a · 5df694a
2 parents 8ebb781 + b5343fc
commit 5df694a
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 4 deletions.
diff --git a/src/components/auth/userDevices.tsx b/src/components/auth/userDevices.tsx
@@ -6,13 +6,21 @@ import Tablet from "~/icons/tablet";
 import { api } from "~/utils/api";
 import { useTranslations } from "next-intl";
 import { signOut, useSession } from "next-auth/react";
+import TimeAgo from "react-timeago";
 
 const formatLastActive = (date) => {
 	return new Date(date).toLocaleString("no-NO");
 };
 
 const DeviceInfo = ({ device, isCurrentDevice }) => {
 	const t = useTranslations();
+
+	// if lastActive is within 5 minutes, show as active
+	const lastActive = new Date(device.lastActive);
+	const now = new Date();
+	const diff = Math.abs(now.getTime() - lastActive.getTime()) / 1000;
+	const isRecent = diff < 300;
+
 	return (
 		<div>
 			<p
@@ -27,8 +35,16 @@ const DeviceInfo = ({ device, isCurrentDevice }) => {
 				{device.ipAddress && ` - ${device.ipAddress}`}
 			</p>
 			{isCurrentDevice && (
-				<p className="text-xs text-green-600 font-semibold">
-					{t("userSettings.account.userDevices.activeNow")}
+				<p className="text-xs text-green-600 font-semibold capitalize">
+					{t("userSettings.account.userDevices.currentDevice")}
+				</p>
+			)}
+			{!isCurrentDevice && isRecent && (
+				<p className="text-xs text-green-600 font-semibold">Online</p>
+			)}
+			{!isCurrentDevice && !isRecent && (
+				<p className="text-xs text-gray-500">
+					<TimeAgo date={device.lastActive} />
 				</p>
 			)}
 		</div>
@@ -71,6 +87,10 @@ const ListUserDevices: React.FC<{ devices: UserDevice[] }> = ({ devices }) => {
 		if (isCurrentDevice(b)) return 1;
 		return 0;
 	});
+	// sort devices by lastActive
+	const sortedDevicesByLastActive = [...(sortedDevices || [])].sort((a, b) => {
+		return new Date(b.lastActive).getTime() - new Date(a.lastActive).getTime();
+	});
 
 	return (
 		<div className="mx-auto">
@@ -81,8 +101,8 @@ const ListUserDevices: React.FC<{ devices: UserDevice[] }> = ({ devices }) => {
 				{/* <button className="btn btn-sm btn-error btn-outline">Logout All</button> */}
 			</div>
 			<div className="space-y-2 max-h-[500px] overflow-auto custom-scrollbar">
-				{sortedDevices && sortedDevices.length > 0 ? (
-					sortedDevices.map((device) => (
+				{sortedDevicesByLastActive && sortedDevicesByLastActive.length > 0 ? (
+					sortedDevicesByLastActive.map((device) => (
 						<div
 							key={device.id}
 							className={cn(

diff --git a/src/locales/en/common.json b/src/locales/en/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "Access Denied",
 				"noDevicesFound": "No devices found.",
 				"activeNow": "Active Now",
+				"currentDevice": "Current Device",
 				"logout": "Logout"
 			},
 			"restapi": {

diff --git a/src/locales/es/common.json b/src/locales/es/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "Acceso Denegado",
 				"noDevicesFound": "No se encontraron dispositivos.",
 				"activeNow": "Activo Ahora",
+				"currentDevice": "Dispositivo Actual",
 				"logout": "Cerrar Sesión"
 			},
 			"restapi": {

diff --git a/src/locales/fr/common.json b/src/locales/fr/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "Accès Refusé",
 				"noDevicesFound": "Aucun appareil trouvé.",
 				"activeNow": "Actif Maintenant",
+				"currentDevice": "Appareil Actuel",
 				"logout": "Déconnexion"
 			},
 			"restapi": {

diff --git a/src/locales/no/common.json b/src/locales/no/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "Tilgang Nektet",
 				"noDevicesFound": "Ingen enheter funnet.",
 				"activeNow": "Aktiv Nå",
+				"currentDevice": "Nåværende enhet",
 				"logout": "Logg ut"
 			},
 			"restapi": {

diff --git a/src/locales/pl/common.json b/src/locales/pl/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "Odmowa dostępu",
 				"noDevicesFound": "Nie znaleziono podłączonych urządzeń.",
 				"activeNow": "Aktywny/Zalogowany",
+				"currentDevice": "Aktualne urządzenie",
 				"logout": "Wyloguj"
 			},
 			"restapi": {

diff --git a/src/locales/zh-tw/common.json b/src/locales/zh-tw/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "拒絕存取",
 				"noDevicesFound": "未找到裝置。",
 				"activeNow": "目前使用中",
+				"currentDevice": "當前裝置",
 				"logout": "登出"
 			},
 			"restapi": {

diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json
@@ -736,6 +736,7 @@
 				"accessDenied": "访问被拒绝",
 				"noDevicesFound": "未找到设备。",
 				"activeNow": "当前活跃",
+				"currentDevice": "当前设备",
 				"logout": "登出"
 			},
 			"restapi": {