Added navigator file

frontend/src/components/NavigatorBlock.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable arrow-body-style */
+import { useState, useEffect } from 'react';
+import ScanBlock from './ScanBlock';
+import NewTable from './NewTable';
+import { getHardware, getWebGL, getBattery } from './main';
+import { getNavigator } from './navigator';
+
+const NavigatorBlock = () => {
+  // const [data, setData] = useState([]);
+
+  // useEffect(() => {
+  //   getBattery().then((batteryInfo) => {
+  //     setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
+  //   });
+  // }, []);
+
+  return (
+    <ScanBlock>
+      <h1>Hardware</h1>
+      <NewTable data={getNavigator()} />
+      <p>
+        <b>Explanation:</b> JavaScript can be used to find information about
+        your hardware. This information can be used to create a fingerprint.
+      </p>
+    </ScanBlock>
+  );
+};
+
+export default NavigatorBlock;

frontend/src/components/NewTable.js

@@ -0,0 +1,17 @@
+const Table = ({ data }) => (
+  <div className="tableWrap">
+    <table>
+      {data.map((item) => (
+        <tbody key={item.title}>
+          <tr>
+            <td>{item.title}</td>
+            <td>{item.value}</td>
+            <td>{item.test}</td>
+          </tr>
+        </tbody>
+      ))}
+    </table>
+  </div>
+);
+
+export default Table;

frontend/src/components/ScanBlocks.js

@@ -1,3 +1,4 @@
+import NavigatorBlock from './NavigatorBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
 import HardwareBlock from './HardwareBlock';
@@ -8,6 +9,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <NavigatorBlock />
     <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />

frontend/src/components/navigator.js

@@ -0,0 +1,23 @@
+/* eslint-disable import/prefer-default-export */
+export { getNavigator };
+
+const getNavigator = () => {
+  const data = [
+    {
+      key: 'deviceMemory',
+      title: 'Device memory',
+      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+      test:
+        checkUndefinedProperties('deviceMemory') &&
+        'failed undefined properties',
+    },
+  ];
+  return data;
+};
+
+const checkUndefinedProperties = (property) => {
+  if (Object.getOwnPropertyDescriptor(navigator, property) !== undefined) {
+    return true;
+  }
+  return false;
+};