diff --git a/.eslintrc.js b/.eslintrc.js index c8c3ceb..d90e3c6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,5 +32,6 @@ module.exports = { }, ], 'react/jsx-one-expression-per-line': 'off', + 'react/prop-types': 'off', }, }; diff --git a/src/components/App.js b/src/components/App.js index deb5b5a..b6f4756 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,12 +1,12 @@ import * as React from 'react'; import Navbar from './Navbar'; -import Table from './Table'; +import TableWrap from './TableWrap'; import '../styles/App.css'; const App = () => (
- + ); diff --git a/src/components/Table.js b/src/components/Table.js index 7ddb238..a3e67ca 100644 --- a/src/components/Table.js +++ b/src/components/Table.js @@ -1,140 +1,20 @@ import * as React from 'react'; -import { useState, useEffect } from 'react'; -import Bowser from 'bowser'; -const Table = () => { - const [batLevel, setBatLevel] = useState(''); - const [batStatus, setBatStatus] = useState(''); - - useEffect(() => { - navigator.getBattery().then((res) => { - setBatLevel(`${Math.round(res.level * 100)}%`); - setBatStatus(res.charging ? 'Charging' : 'Not charging'); - }); - }, []); - - const uaResult = Bowser.parse(navigator.userAgent); - const browser = uaResult.browser.name; - const browserVersion = uaResult.browser.version; - const browserEngine = uaResult.engine.name; - const os = `${uaResult.os.name} ${uaResult.os.versionName}`; - const platform = uaResult.platform.type; - const language = navigator.language; - const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; - const date = new Date(); - const offset = date.getTimezoneOffset(); - const cookies = navigator.cookieEnabled ? 'True' : 'False'; - const java = navigator.javaEnabled() ? 'True' : 'False'; - const dnt = navigator.doNotTrack ? 'True' : 'False'; - - const pluginsLength = navigator.plugins.length; - let pluginList = ''; - for (let i = 0; i < pluginsLength; i++) { - if (i !== 0) pluginList += ', '; - pluginList += navigator.plugins[i].name; - } - - const plugins = pluginList; - const screenSize = `${window.screen.width}x${window.screen.height}`; - const color = window.screen.colorDepth; - const memory = `${navigator.deviceMemory}GB`; - const cores = navigator.hardwareConcurrency; - const maxTouch = navigator.maxTouchPoints; - const gl = document.createElement('canvas').getContext('webgl'); - const ext = gl.getExtension('WEBGL_debug_renderer_info'); - const vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); - const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); - return ( -
- -
Software
+const Table = ({ title, data }) => ( +
+ - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hardware
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Browser:{browser}{title}
Browser version:{browserVersion}
Browser engine:{browserEngine}
Operating system:{os}
Language:{language}
Timezone:{timezone}
Timezone offset:{offset}
Cookies enabled:{cookies}
Java enabled:{java}
DNT header enabled:{dnt}
Plugins:{plugins}
Platform:{platform}
Screen resolution:{screenSize}
Color Resolution:{color}
Battery level:{batLevel}
Battery status:{batStatus}
Device memory:{memory}
# of CPU cores:{cores}
Max touchpoints:{maxTouch}
WebGL vendor:{vendor}
WebGL renderer:{renderer}
- ); -}; - + + {data.map((item) => ( + + + {item.title}: + {item.value} + + + ))} + +); export default Table; diff --git a/src/components/TableWrap.js b/src/components/TableWrap.js new file mode 100644 index 0000000..c856676 --- /dev/null +++ b/src/components/TableWrap.js @@ -0,0 +1,163 @@ +import * as React from 'react'; +import { useState, useEffect } from 'react'; +import Bowser from 'bowser'; +import Table from './Table'; + +const sortArr = (arr) => { + const arrLength = arr.length; + let list = ''; + for (let i = 0; i < arrLength; i++) { + if (i !== 0) list += ', '; + list += arr[i]; + } + return list; +}; + +const TableWrap = () => { + const uaResult = Bowser.parse(navigator.userAgent); + const date = new Date(); + const pluginsLength = navigator.plugins.length; + + let pluginList = ''; + for (let i = 0; i < pluginsLength; i++) { + if (i !== 0) pluginList += ', '; + pluginList += navigator.plugins[i].name; + } + + const [batLevel, setBatLevel] = useState(''); + const [batStatus, setBatStatus] = useState(''); + + useEffect(() => { + if ('getBattery' in navigator) { + navigator.getBattery().then((res) => { + setBatLevel(`${Math.round(res.level * 100)}%`); + setBatStatus(res.charging ? 'Charging' : 'Not charging'); + }); + } else { + setBatLevel('N/A'); + setBatStatus('N/A'); + } + }, []); + + const gl = document.createElement('canvas').getContext('webgl'); + const ext = gl.getExtension('WEBGL_debug_renderer_info'); + + const software = [ + { + title: 'Browser', + value: uaResult.browser.name, + }, + { + title: 'Browser version', + value: uaResult.browser.version, + }, + { + title: 'Browser engine', + value: uaResult.browser.engine || 'N/A', + }, + { + title: 'OS', + value: `${uaResult.os.name} ${uaResult.os.versionName}`, + }, + { + title: 'OS version', + value: uaResult.os.version, + }, + { + title: 'Platform', + value: navigator.platform, + }, + { + title: 'System type', + value: uaResult.platform.type, + }, + { + title: 'User Agent', + value: navigator.userAgent || 'N/A', + }, + { + title: 'Preferred language', + value: navigator.language || 'N/A', + }, + { + title: 'Languages', + value: sortArr(navigator.languages) || 'N/A', + }, + { + title: 'Timezone', + value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A', + }, + { + title: 'Timezone offset', + value: date.getTimezoneOffset() || 'N/A', + }, + { + title: 'Cookies enabled', + value: navigator.cookieEnabled ? 'True' : 'False', + }, + { + title: 'Java enabled', + value: navigator.javaEnabled() ? 'True' : 'False', + }, + { + title: 'DNT header enabled', + value: navigator.doNotTrack ? 'True' : 'False', + }, + { + title: 'Automated browser', + value: navigator.webdriver ? 'True' : 'False', + }, + { + title: 'Plugins', + value: pluginList || 'N/A', + }, + ]; + + const hardware = [ + { + title: 'Screen resolution', + value: `${window.screen.width}x${window.screen.height}`, + }, + { + title: 'Color Resolution', + value: window.screen.colorDepth, + }, + { + title: 'Battery level', + value: batLevel, + }, + { + title: 'Battery status', + value: batStatus, + }, + { + title: 'Device memory', + value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A', + }, + { + title: '# of CPU cores', + value: navigator.hardwareConcurrency || 'N/A', + }, + { + title: 'Max touchpoints', + value: navigator.maxTouchPoints, + }, + { + title: 'WebGL vendor', + value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL), + }, + { + title: 'WebGL renderer', + value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL), + }, + ]; + + return ( +
+ +
+ + ); +}; + +export default TableWrap;