From 5b7a28fd6170179ef0c7a2d30ad3ae9a83c41b56 Mon Sep 17 00:00:00 2001 From: z0ccc Date: Thu, 2 Sep 2021 16:02:02 -0400 Subject: [PATCH] Fixed web worker --- frontend/package.json | 1 + frontend/public/worker.js | 6 ++- frontend/src/components/Issues.js | 23 ++++++++++ frontend/src/components/NewTable.js | 37 +++++++++------- frontend/src/components/navigator.js | 66 ++++++++++++++-------------- frontend/yarn.lock | 5 +++ 6 files changed, 89 insertions(+), 49 deletions(-) create mode 100644 frontend/src/components/Issues.js diff --git a/frontend/package.json b/frontend/package.json index 596bfcf..b36d4b4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "react-dom": "^17.0.2", "react-scripts": "4.0.3", "react-tsparticles": "^1.28.0", + "react-webworker": "^2.1.0", "tslib": "^2.2.0" }, "scripts": { diff --git a/frontend/public/worker.js b/frontend/public/worker.js index ffd23fa..617e62f 100644 --- a/frontend/public/worker.js +++ b/frontend/public/worker.js @@ -1 +1,5 @@ -postMessage('hello'); +/* eslint-disable import/prefer-default-export */ +onmessage = (e) => { + console.log(e.data, navigator[e.data]); + postMessage(navigator[e.data]); +}; diff --git a/frontend/src/components/Issues.js b/frontend/src/components/Issues.js new file mode 100644 index 0000000..746f786 --- /dev/null +++ b/frontend/src/components/Issues.js @@ -0,0 +1,23 @@ +/* eslint-disable no-unused-vars */ +import parse from 'html-react-parser'; +import { useState, useEffect } from 'react'; +import { checkUndefinedProperties, checkWebWorker } from './navigator'; + +const Issues = ({ item }) => { + const [workerData, setWorkerData] = useState(); + useEffect(() => { + checkWebWorker(item, setWorkerData); + }, []); + + return ( + + {parse(checkUndefinedProperties(item))} +
+ <>{workerData} + + ); + + // return {parse(checkUndefinedProperties(item), workerData)}; +}; + +export default Issues; diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js index 40644e1..cdb0608 100644 --- a/frontend/src/components/NewTable.js +++ b/frontend/src/components/NewTable.js @@ -1,20 +1,27 @@ +/* eslint-disable no-unused-vars */ import parse from 'html-react-parser'; +import { useState, useEffect } from 'react'; import { checkUndefinedProperties } from './navigator'; +import Issues from './Issues'; -const Table = ({ data }) => ( -
- - {data.map((item) => ( - - - - - - - - ))} -
{item.title}{item.value}{parse(checkUndefinedProperties(item))}
-
-); +const Table = ({ data }) => { + const [workerData, setWorkerData] = useState(); + + return ( +
+ + {data.map((item) => ( + + + + + + + + ))} +
{item.title}{item.value}
+
+ ); +}; export default Table; diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js index 1642798..19bb444 100644 --- a/frontend/src/components/navigator.js +++ b/frontend/src/components/navigator.js @@ -1,42 +1,42 @@ /* eslint-disable dot-notation */ -export { getNavigator, checkUndefinedProperties }; +export { getNavigator, checkUndefinedProperties, checkWebWorker }; const getNavigator = () => { const data = [ { key: 'deviceMemory', title: 'Device memory', - value: navigator.deviceMemory || 'N/A', + value: navigator.deviceMemory, }, { key: 'hardwareConcurrency', title: 'Hardware Concurrency', - value: navigator.hardwareConcurrency || 'N/A', + value: navigator.hardwareConcurrency, }, { key: 'maxTouchPoints', title: 'Max touchpoints', - value: navigator.maxTouchPoints || 'N/A', + value: navigator.maxTouchPoints, }, { key: 'platform', title: 'Platform', - value: navigator.platform || 'N/A', + value: navigator.platform, }, { key: 'userAgent', title: 'User agent', - value: navigator.userAgent || 'N/A', + value: navigator.userAgent, }, { key: 'language', title: 'Language', - value: navigator.language || 'N/A', + value: navigator.language, }, { key: 'languages', title: 'Languages', - value: navigator.languages || 'N/A', + value: navigator.languages, }, { key: 'cookieEnabled', @@ -56,30 +56,30 @@ const getNavigator = () => { { key: 'plugins', title: 'Plugins', - value: sortPlugins(navigator.plugins) || 'N/A', + value: sortPlugins(navigator.plugins), }, // { // key: 'connection', // title: 'Connection', - // value: JSON.stringify(navigator.connection) || 'N/A', + // value: JSON.stringify(navigator.connection), // prototype: Navigator.prototype.hardwareConcurrency, // }, // { // key: 'geolocation', // title: 'Geolocation', - // value: navigator.geolocation || 'N/A', + // value: navigator.geolocation, // prototype: Navigator.prototype.hardwareConcurrency, // }, // { // key: 'hid', // title: 'Hid', - // value: navigator.hid || 'N/A', + // value: navigator.hid, // prototype: Navigator.prototype.hardwareConcurrency, // }, // { // key: 'keyboard', // title: 'Keyboard', - // value: navigator.keyboard || 'N/A', + // value: navigator.keyboard, // prototype: Navigator.prototype.hardwareConcurrency, // }, { @@ -90,22 +90,17 @@ const getNavigator = () => { { key: 'vendor', title: 'Vendor', - value: navigator.vendor || 'N/A', + value: navigator.vendor, }, { key: 'appVersion', title: 'App version', - value: navigator.appVersion || 'N/A', + value: navigator.appVersion, }, { key: 'productSub', title: 'Product sub', - value: navigator.productSub || 'N/A', - }, - { - key: 'vendorSub', - title: 'Vendor sub', - value: navigator.vendorSub || 'N/A', + value: navigator.productSub, }, ]; return data; @@ -149,18 +144,23 @@ const checkUndefinedProperties = (obj) => { // document.body.appendChild(frame); // } // console.log(navigator.hardwareConcurrency); - let w; - if (typeof Worker !== 'undefined') { - if (typeof w === 'undefined') { - w = new Worker('/worker.js'); - } - w.onmessage = (event) => { - console.log(event); - }; - } else { - document.getElementById('result').innerHTML = - 'Sorry! No Web Worker support.'; - } return list.toString().split(',').join('
'); }; + +const checkWebWorker = (obj, setWorkerData) => { + let w; + if (typeof w === 'undefined') { + w = new Worker('/worker.js'); + } + w.postMessage(obj.key); + w.onmessage = (event) => { + if ( + event.data !== undefined && + event.data.toString() !== navigator[obj.key].toString() + ) { + console.log(event.data, navigator[obj.key]); + setWorkerData('Did not match web worker'); + } + }; +}; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 12c79a4..eff3e31 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -9134,6 +9134,11 @@ react-tsparticles@^1.28.0: tslib "^2.2.0" tsparticles "^1.28.0" +react-webworker@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-webworker/-/react-webworker-2.1.0.tgz#6bfe5d74d3f3e5bae89f316b8760b3e8cc551420" + integrity sha512-Rl0LeJa7zAQHAZ5KpyWQ/7aHcdy6AKJcJI7UIGlFo2e2sJw7u87hg4ck1cWb70DO0PrW0NwNZrMCgTi23g09JQ== + react@^17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"