scanner

src/App.js

@@ -31,7 +31,10 @@ export default function App() {
         setUserSession={setUserSession}
         notificationApi={notificationApi}
       >
-        <SideMenu setUserSession={setUserSession}></SideMenu>
+        <SideMenu
+          userSession={userSession}
+          setUserSession={setUserSession}
+        ></SideMenu>
         <PageContent></PageContent>
       </WebSocketProvider>
     </Layout>

src/Components/SideMenu/index.js

@@ -9,15 +9,9 @@ import Sider from "antd/es/layout/Sider";
 import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
-import {
-  Constants,
-  MyAvatar,
-  UseUserSession,
-  WebSocketContext,
-} from "../../utils";
+import { Constants, MyAvatar, WebSocketContext } from "../../utils";
 
-export default function SideMenu({ setUserSession }) {
-  const { userSession } = UseUserSession();
+export default function SideMenu({ userSession, setUserSession }) {
   const location = useLocation();
   const [selectedKeys, setSelectedKeys] = useState("/");
   const webSocketContext = useContext(WebSocketContext);

src/Pages/Scanners/index.js

@@ -1,6 +1,7 @@
-import { Button, Popover, QRCode, Space, Table } from "antd";
-import { MyAvatar } from "../../utils";
-import { PlusOutlined } from "@ant-design/icons";
+import { Space, Table } from "antd";
+import { FormatDatetime, WebSocketContext } from "../../utils";
+import { useContext } from "react";
+import { Link } from "react-router-dom";
 
 const columns = [
   {
@@ -23,37 +24,71 @@ const columns = [
     dataIndex: "registeredAt",
     key: "registeredAt",
   },
-];
-
-const data = [
   {
-    key: "1",
-    name: "Alex",
-    usedBy: <MyAvatar avatar={"8c9f6287-5de3-413a-aec4-a89a7e55fcd4.jpeg"} />,
-    lastUsed: new Date().toLocaleString(),
-    registeredAt: new Date().toLocaleString(),
+    title: "User-Agent",
+    dataIndex: "userAgent",
+    key: "userAgent",
+  },
+  {
+    title: "Action",
+    dataIndex: "action",
+    key: "action",
+    render: (_, record) => (
+      <Space size="middle">
+        <Link to="#">Use scanner</Link>
+      </Space>
+    ),
   },
 ];
 
 export default function Scanners() {
+  const webSocketContext = useContext(WebSocketContext);
+
+  const getTableItems = () => {
+    if (webSocketContext.Scanners === null) return [];
+
+    let items = [];
+
+    webSocketContext.Scanners.forEach((scanner) => {
+      items.push({
+        key: scanner.Id,
+        name: scanner.Name,
+        usedBy: scanner.UsedByUserId,
+        lastUsed: scanner.LastUsed,
+        registeredAt: FormatDatetime(scanner.RegisteredAt),
+        userAgent: scanner.UserAgent,
+      });
+    });
+
+    return items;
+  };
+
   return (
     <>
-      <h1 style={{ fontWeight: "bold", float: "left" }}>Scanners (0)</h1>
+      <h1 style={{ fontWeight: "bold", float: "left" }}>
+        Scanners (
+        {webSocketContext.Scanners === null
+          ? "0"
+          : webSocketContext.Scanners.length}
+        )
+      </h1>
 
-      <Popover
-        title="Scan this on mobile"
-        content={<QRCode value={"test"} bordered={false} />}
-      >
-        <Button
-          style={{ float: "right" }}
-          type="primary"
-          icon={<PlusOutlined />}
-        >
-          Add scanner
-        </Button>
-      </Popover>
-
-      <Table columns={columns} dataSource={data} />
+      <Table columns={columns} dataSource={getTableItems()} />
     </>
   );
 }
+
+/*
+<Popover
+  title="Scan this on mobile"
+  content={<QRCode value={"test"} bordered={false} />}
+>
+  <Button
+    style={{ float: "right" }}
+    type="primary"
+    icon={<PlusOutlined />}
+  >
+    Add scanner
+  </Button>
+</Popover>
+*/

src/Pages/UserProfile/index.js

@@ -8,6 +8,7 @@ import {
   getConnectionStatusItem,
   getUserSessionFromLocalStorage,
 } from "../../utils";
+import { Link } from "react-router-dom";
 
 const columns = [
   {
@@ -37,7 +38,7 @@ const columns = [
     render: (_, record) => {
       return (
         <Space size="middle">
-          <a
+          <Link
             href="#"
             onClick={() => {
               fetch(`${Constants.API_ADDRESS}/user/session/${record.key}`, {
@@ -52,7 +53,7 @@ const columns = [
             }}
           >
             Sign out
-          </a>
+          </Link>
         </Space>
       );
     },

src/utils.js

@@ -85,6 +85,7 @@ let webSocketContextPreview = {
   CategoryGroups: [],
   GroupTasks: [],
   GroupTasksSteps: [],
+  Scanners: [],
 };
 
 export const WebSocketContext = createContext(webSocketContextPreview);
@@ -101,6 +102,8 @@ const ReceivedMessagesCommands = {
   GroupTasksReloaded: 8,
   UpdateUserSessions: 9,
   UpdateAllUsersUserAvatar: 10,
+  NewScanner: 11,
+  DeleteScanner: 12,
 };
 
 // commands sent to the backend server
@@ -131,6 +134,7 @@ export function WebSocketProvider({
   // these are all group tasks that are then filtered and displayed in the respective tables for the category
   const [groupTasks, setGroupTasks] = useState([]);
   const [groupTasksSteps, setGroupTasksSteps] = useState([]);
+  const [scanners, setScanners] = useState([]);
   const navigate = useNavigate();
   const StartGroupTasksOpenModalRememberIdRef = useRef(null);
 
@@ -162,6 +166,7 @@ export function WebSocketProvider({
           setCategoryGroups(body.CategoryGroups);
           setGroupTasks(body.GroupTasks);
           setGroupTasksSteps(body.GroupTasksSteps);
+          if (body.Scanners !== null) setScanners(body.Scanners);
           break;
         case ReceivedMessagesCommands.UpdateConnectedUsers:
           setConnectedWebSocketUsersCount(body.WebSocketUsersCount);
@@ -240,6 +245,12 @@ export function WebSocketProvider({
             return newArr;
           });
           break;
+        case ReceivedMessagesCommands.NewScanner:
+          setScanners((arr) => [...arr, body]);
+          break;
+        case ReceivedMessagesCommands.DeleteScanner:
+          setScanners((arr) => arr.filter((arr) => arr.Id !== body.Id));
+          break;
         default:
           console.error("unknown command", cmd);
           break;
@@ -291,6 +302,7 @@ export function WebSocketProvider({
         GroupTasks: groupTasks,
         User: user,
         AllUsers: allUsers,
+        Scanners: scanners,
         SendSocketMessage: SendSocketMessage,
         GroupTasksSteps: groupTasksSteps,
         setGroupTasksSteps: setGroupTasksSteps,