user sessions

src/Components/AppRoutes/index.js

@@ -2,6 +2,8 @@ import { Route, Routes } from "react-router-dom";
 import Dashboard from "../../Pages/Dashboard";
 import GroupTasks from "../../Pages/GroupTasks";
 import { Constants } from "../../utils";
+import UserProfile from "../../Pages/UserProfile";
+import Users from "../../Pages/Users";
 
 export default function AppRoutes() {
   return (
@@ -15,6 +17,8 @@ export default function AppRoutes() {
         path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
         element={<GroupTasks isGroupTasksViewModalOpen={true} />}
       />
+      <Route path="/users" element={<Users />} />
+      <Route path="/user-profile" element={<UserProfile />} />
     </Routes>
   );
 }

src/Components/SideMenu/index.js

@@ -71,6 +71,7 @@ export default function SideMenu({ setUserSession }) {
           <Menu
             selectable={false}
             mode="vertical"
+            onClick={(item) => navigate(item.key)}
             items={[
               {
                 icon: (
@@ -83,10 +84,12 @@ export default function SideMenu({ setUserSession }) {
                     }  connected`}
                   />
                 ),
+                key: "/users",
               },
               {
                 label: webSocketContext.User.Username,
                 icon: <UserOutlined />,
+                key: "/user-profile",
               },
               {
                 label: "Logout",
@@ -103,6 +106,7 @@ export default function SideMenu({ setUserSession }) {
                     },
                   }).catch(console.error);
                 },
+                key: "/",
               },
             ]}
           />

src/Pages/Dashboard/index.js

@@ -1,7 +1,5 @@
 import { Button } from "antd";
 
-function Dashboard() {
+export default function Dashboard() {
   return <Button>Test</Button>;
 }
-
-export default Dashboard;

src/Pages/UserProfile/index.js

@@ -0,0 +1,86 @@
+import { Badge, Space, Table } from "antd";
+import { useContext } from "react";
+import { FormatDatetime, WebSocketContext } from "../../utils";
+
+const columns = [
+  {
+    title: "User-Agent",
+    dataIndex: "userAgent",
+    key: "userAgent",
+  },
+  {
+    title: "Connection status",
+    dataIndex: "connectionStatus",
+    key: "connectionStatus",
+  },
+  {
+    title: "Last used",
+    dataIndex: "lastUsed",
+    key: "lastUsed",
+  },
+  {
+    title: "Expires at",
+    dataIndex: "expiresAt",
+    key: "expiresAt",
+  },
+  {
+    title: "Action",
+    dataIndex: "action",
+    key: "action",
+    render: (_, record) => (
+      <Space size="middle">
+        <a>Sign out</a>
+      </Space>
+    ),
+  },
+];
+
+const data = [
+  {
+    key: "1",
+    userAgent:
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_2) AppleWebKit/537.36 (KHTML 5) Chrome/121",
+    connectionStatus: <Badge status="success" text="Online" />,
+    lastUsed: new Date(Date.now()).toLocaleString(),
+    expiresAt: new Date(Date.now()).toLocaleString(),
+  },
+];
+
+export default function UserProfile() {
+  const webSocketContext = useContext(WebSocketContext);
+
+  const getTableItems = () => {
+    let items = [];
+
+    webSocketContext.User.Sessions.sort(
+      (a, b) => b.ConnectionStatus - a.ConnectionStatus
+    );
+
+    webSocketContext.User.Sessions.forEach((session, index) => {
+      items.push({
+        key: "usersession" + index,
+        userAgent: session.UserAgent,
+        connectionStatus:
+          session.ConnectionStatus === 0 ? (
+            <Badge status="error" text="Offline" />
+          ) : (
+            <Badge status="success" text="Online" />
+          ),
+        lastUsed: FormatDatetime(session.LastUsed),
+        expiresAt: FormatDatetime(session.ExpiresAt),
+      });
+    });
+
+    return items;
+  };
+
+  return (
+    <>
+      <h1 style={{ fontWeight: "bold" }}>
+        Your Sessions ({webSocketContext.User.Sessions.length})
+      </h1>
+
+      <Table columns={columns} dataSource={getTableItems()} />
+    </>
+  );
+}

src/Pages/Users/index.js

@@ -0,0 +1,5 @@
+import { Button } from "antd";
+
+export default function Users() {
+  return <Button>Test</Button>;
+}

src/utils.js

@@ -67,6 +67,7 @@ let webSocketContextPreview = {
   User: {
     Username: l,
     Email: l,
+    Sessions: [],
   },
   ConnectionBadgeStatus: "error",
   ConnectedWebSocketUsersCount: 0,
@@ -87,6 +88,7 @@ const ReceivedMessagesCommands = {
   UpdateGroupTask: 6,
   ReloadingGroupTasks: 7,
   GroupTasksReloaded: 8,
+  UpdateUserSessions: 9,
 };
 
 // commands sent to the backend server
@@ -202,6 +204,9 @@ export function WebSocketProvider({
             duration: 2,
           });
           break;
+        case ReceivedMessagesCommands.UpdateUserSessions:
+          setUser((arr) => ({ ...arr, Sessions: body }));
+          break;
         case ReceivedMessagesCommands.default:
           console.error("unknown command", cmd);
           break;