First version of search bar

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.0.22",
+      "version": "2.0.23",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
@@ -30,7 +30,7 @@
         "react-tooltip": "^4.2.21",
         "react-widgets": "^5.1.1",
         "sass": "^1.35.1",
-        "ucentral-libs": "^0.8.62",
+        "ucentral-libs": "^0.8.63",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -14736,9 +14736,9 @@
       }
     },
     "node_modules/ucentral-libs": {
-      "version": "0.8.62",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.62.tgz",
-      "integrity": "sha512-7/ndNquHAytKYWycIIesngvX1bd+59hdtpXtmWaOMrx51f+25MUAJgTPzL9X7eRr69zTMM+7ZqAM6dFLoi4G/Q==",
+      "version": "0.8.63",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.63.tgz",
+      "integrity": "sha512-qjNJBMJbt4USVqm1Lu/LCzq6Yf98DJpKVsdarR+3LV0xkqzPIw6AmtvT8MQZpgR8q9QSIEpSrQOBs/cvNjrkvg==",
       "engines": {
         "node": ">=10"
       },
@@ -27498,9 +27498,9 @@
       }
     },
     "ucentral-libs": {
-      "version": "0.8.62",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.62.tgz",
-      "integrity": "sha512-7/ndNquHAytKYWycIIesngvX1bd+59hdtpXtmWaOMrx51f+25MUAJgTPzL9X7eRr69zTMM+7ZqAM6dFLoi4G/Q==",
+      "version": "0.8.63",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.8.63.tgz",
+      "integrity": "sha512-qjNJBMJbt4USVqm1Lu/LCzq6Yf98DJpKVsdarR+3LV0xkqzPIw6AmtvT8MQZpgR8q9QSIEpSrQOBs/cvNjrkvg==",
       "requires": {}
     },
     "unbox-primitive": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.0.22",
+  "version": "2.0.23",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -24,7 +24,7 @@
     "react-tooltip": "^4.2.21",
     "react-widgets": "^5.1.1",
     "sass": "^1.35.1",
-    "ucentral-libs": "^0.8.62",
+    "ucentral-libs": "^0.8.63",
     "uuid": "^8.3.2"
   },
   "main": "index.js",

public/locales/de/translation.json

@@ -108,6 +108,7 @@
 		"na": "(unbekannt)",
 		"need_date": "Du brauchst ein Datum...",
 		"no": "Nein",
+		"no_devices_found": "Keine Geräte gefunden",
 		"no_items": "Keine Gegenstände",
 		"not_connected": "Nicht verbunden",
 		"of_connected": "% der Geräte",
@@ -123,6 +124,7 @@
 		"save": "Sparen",
 		"saving": "Speichern ...",
 		"schedule": "Zeitplan",
+		"search": "Geräte suchen",
 		"second": "zweite",
 		"seconds": "sekunden",
 		"seconds_elapsed": "Sekunden verstrichen",

public/locales/en/translation.json

@@ -108,6 +108,7 @@
 		"na": "N/A",
 		"need_date": "You need a date...",
 		"no": "No",
+		"no_devices_found": "No Devices Found",
 		"no_items": "No Items",
 		"not_connected": "Not Connected",
 		"of_connected": "% of devices",
@@ -123,6 +124,7 @@
 		"save": "Save",
 		"saving": "Saving... ",
 		"schedule": "Schedule",
+		"search": "Search Devices",
 		"second": "second",
 		"seconds": "seconds",
 		"seconds_elapsed": "Seconds elapsed",

public/locales/es/translation.json

@@ -108,6 +108,7 @@
 		"na": "N / A",
 		"need_date": "Necesitas una cita ...",
 		"no": "No",
+		"no_devices_found": "No se encontraron dispositivos",
 		"no_items": "No hay articulos",
 		"not_connected": "No conectado",
 		"of_connected": "% de dispositivos",
@@ -123,6 +124,7 @@
 		"save": "Salvar",
 		"saving": "Ahorro...",
 		"schedule": "Programar",
+		"search": "Dispositivos de búsqueda",
 		"second": "segundo",
 		"seconds": "segundos",
 		"seconds_elapsed": "Segundos transcurridos",

public/locales/fr/translation.json

@@ -108,6 +108,7 @@
 		"na": "N / A",
 		"need_date": "Vous avez besoin d'un rendez-vous...",
 		"no": "Non",
+		"no_devices_found": "Aucun périphérique trouvé",
 		"no_items": "Pas d'objet",
 		"not_connected": "Pas connecté",
 		"of_connected": "% d'appareils",
@@ -123,6 +124,7 @@
 		"save": "Sauvegarder",
 		"saving": "Économie...",
 		"schedule": "Programme",
+		"search": "Rechercher des appareils",
 		"second": "seconde",
 		"seconds": "secondes",
 		"seconds_elapsed": "Secondes écoulées",

public/locales/pt/translation.json

@@ -108,6 +108,7 @@
 		"na": "N / D",
 		"need_date": "Você precisa de um encontro ...",
 		"no": "Não",
+		"no_devices_found": "Nenhum dispositivo encontrado",
 		"no_items": "Nenhum item",
 		"not_connected": "Não conectado",
 		"of_connected": "% de dispositivos",
@@ -123,6 +124,7 @@
 		"save": "Salve",
 		"saving": "Salvando ...",
 		"schedule": "Cronograma",
+		"search": "Dispositivos de pesquisa",
 		"second": "segundo",
 		"seconds": "segundos",
 		"seconds_elapsed": "Segundos decorridos",

src/components/DeviceListTable/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import DeviceSearchBar from 'components/DeviceSearchBar';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import axiosInstance from 'utils/axiosInstance';
@@ -344,6 +345,7 @@ const DeviceList = () => {
       <DeviceListTable
         currentPage={page}
         t={t}
+        searchBar={<DeviceSearchBar />}
         devices={devices}
         loading={loading}
         updateDevicesPerPage={updateDevicesPerPage}

src/components/DeviceSearchBar/index.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAuth, DeviceSearchBar as SearchBar } from 'ucentral-libs';
+import { checkIfJson } from 'utils/helper';
+
+const DeviceSearchBar = () => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const [socket, setSocket] = useState(null);
+  const [results, setResults] = useState([]);
+
+  const search = (e) => {
+    if (socket.readyState === WebSocket.OPEN) {
+      if (e.target.value.length > 0) {
+        socket.send(
+          JSON.stringify({ command: 'serial_number_search', serial_prefix: e.target.value }),
+        );
+      } else {
+        setResults([]);
+      }
+    } else if (socket.readyState !== WebSocket.CONNECTING) {
+      setSocket(new WebSocket(`${endpoints.ucentralgw.replace('https', 'wss')}/api/v1/ws`));
+    }
+  };
+
+  const closeSocket = () => {
+    if (socket !== null) {
+      socket.close();
+    }
+  };
+
+  useEffect(() => {
+    if (socket !== null) {
+      socket.onopen = () => {
+        socket.send(`token:${currentToken}`);
+      };
+
+      socket.onmessage = (event) => {
+        if (checkIfJson(event.data)) {
+          const result = JSON.parse(event.data);
+          if (result.command === 'serial_number_search' && result.serialNumbers) {
+            setResults(result.serialNumbers);
+          }
+        }
+      };
+    }
+
+    return () => closeSocket();
+  }, [socket]);
+
+  useEffect(() => {
+    if (socket === null) {
+      setSocket(new WebSocket(`${endpoints.ucentralgw.replace('https', 'wss')}/api/v1/ws`));
+    }
+  }, []);
+
+  return <SearchBar t={t} search={search} results={results} />;
+};
+
+export default DeviceSearchBar;

src/pages/DeviceListPage/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import DeviceList from '../../components/DeviceListTable';
+import DeviceList from 'components/DeviceListTable';
 
 const DeviceListPage = () => (
   <div className="App">