diff --git a/src/components/auth/userDevices.tsx b/src/components/auth/userDevices.tsx index 7fb7ee1a..c3d1ddd5 100644 --- a/src/components/auth/userDevices.tsx +++ b/src/components/auth/userDevices.tsx @@ -6,6 +6,7 @@ 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"); @@ -13,6 +14,13 @@ const formatLastActive = (date) => { 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 (

{ {device.ipAddress && ` - ${device.ipAddress}`}

{isCurrentDevice && ( -

- {t("userSettings.account.userDevices.activeNow")} +

+ {t("userSettings.account.userDevices.currentDevice")} +

+ )} + {!isCurrentDevice && isRecent && ( +

Online

+ )} + {!isCurrentDevice && !isRecent && ( +

+

)}
@@ -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 (
@@ -81,8 +101,8 @@ const ListUserDevices: React.FC<{ devices: UserDevice[] }> = ({ devices }) => { {/* */}
- {sortedDevices && sortedDevices.length > 0 ? ( - sortedDevices.map((device) => ( + {sortedDevicesByLastActive && sortedDevicesByLastActive.length > 0 ? ( + sortedDevicesByLastActive.map((device) => (