use scanner

src/Pages/Scanners/index.js

@@ -1,7 +1,13 @@
-import { Space, Table } from "antd";
-import { FormatDatetime, WebSocketContext } from "../../utils";
+import { Space, Table, message } from "antd";
+import {
+  FormatDatetime,
+  MyAvatar,
+  WebSocketContext,
+  getUserSessionFromLocalStorage,
+} from "../../utils";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
+import { Constants } from "../../utils";
 
 const columns = [
   {
@@ -11,8 +17,8 @@ const columns = [
   },
   {
     title: "Used by",
-    dataIndex: "usedBy",
-    key: "usedBy",
+    dataIndex: "usedByUserId",
+    key: "usedByUserId",
   },
   {
     title: "Last used",
@@ -35,7 +41,25 @@ const columns = [
     key: "action",
     render: (_, record) => (
       <Space size="middle">
-        <Link to="#">Use scanner</Link>
+        <Link
+          to="#"
+          onClick={() => {
+            if (localStorage.getItem("userId") === record._usedByUserId) {
+              message.error("You are already using this scanner");
+              return;
+            }
+
+            fetch(`${Constants.API_ADDRESS}/scanner/${record.key}`, {
+              method: "PATCH",
+              headers: {
+                "Content-Type": "application/json",
+                "X-Authorization": getUserSessionFromLocalStorage(),
+              },
+            }).catch((err) => console.error(err));
+          }}
+        >
+          Use scanner
+        </Link>
       </Space>
     ),
   },
@@ -50,10 +74,23 @@ export default function Scanners() {
     let items = [];
 
     webSocketContext.Scanners.forEach((scanner) => {
+      const usedByUser = webSocketContext.AllUsers.find(
+        (user) => user.Id === scanner.UsedByUserId
+      );
+
       items.push({
         key: scanner.Id,
         name: scanner.Name,
-        usedBy: scanner.UsedByUserId,
+        usedByUserId:
+          scanner.UsedByUserId === "" ? (
+            Constants.TEXT_EMPTY_PLACEHOLDER
+          ) : (
+            <>
+              <MyAvatar avatar={usedByUser.Avatar} />
+              <span> {usedByUser.Username}</span>
+            </>
+          ),
+        _usedByUserId: scanner.UsedByUserId,
         lastUsed: scanner.LastUsed,
         registeredAt: FormatDatetime(scanner.RegisteredAt),
         userAgent: scanner.UserAgent,

src/utils.js

@@ -104,6 +104,7 @@ const ReceivedMessagesCommands = {
   UpdateAllUsersUserAvatar: 10,
   NewScanner: 11,
   DeleteScanner: 12,
+  UpdateScannerUsedByUserId: 13,
 };
 
 // commands sent to the backend server
@@ -167,6 +168,8 @@ export function WebSocketProvider({
           setGroupTasks(body.GroupTasks);
           setGroupTasksSteps(body.GroupTasksSteps);
           if (body.Scanners !== null) setScanners(body.Scanners);
+
+          localStorage.setItem("userId", body.User.Id);
           break;
         case ReceivedMessagesCommands.UpdateConnectedUsers:
           setConnectedWebSocketUsersCount(body.WebSocketUsersCount);
@@ -251,6 +254,17 @@ export function WebSocketProvider({
         case ReceivedMessagesCommands.DeleteScanner:
           setScanners((arr) => arr.filter((arr) => arr.Id !== body.Id));
           break;
+        case ReceivedMessagesCommands.UpdateScannerUsedByUserId:
+          setScanners((arr) => {
+            const newArr = [...arr];
+
+            newArr[
+              arr.findIndex((arr1) => arr1.Id === body.ScannerId)
+            ].UsedByUserId = body.UsedByUserId;
+
+            return newArr;
+          });
+          break;
         default:
           console.error("unknown command", cmd);
           break;