Finished intl block

frontend/src/components/IntlBlock.js

@@ -1,11 +1,28 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
 import { getIntl } from './main';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const DateBlock = () => (
   <ScanBlock>
     <h1>Intl</h1>
-    <Table type="navigator" data={getIntl()} />
+    <div className="tableWrap">
+      <table>
+        {Object.entries(Intl.DateTimeFormat().resolvedOptions()).map((item) => (
+          <tbody key={item[0]}>
+            <tr>
+              <td>{item[0]}</td>
+              <td>{item[1]}</td>
+              <td>
+                <CheckCircle className="circleButton" />
+              </td>
+            </tr>
+          </tbody>
+        ))}
+      </table>
+    </div>
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.

frontend/src/components/OtherBlock.js

@@ -47,6 +47,12 @@ const OtherBlock = () => {
               <td>{adBlockDetected ? 'True' : 'False'}</td>
             </tr>
           </tbody>
+          <tbody>
+            <tr>
+              <td>Timezone offset</td>
+              <td>{new Date().getTimezoneOffset()}</td>
+            </tr>
+          </tbody>
           <tbody>
             <tr>
               <td>Battery level</td>

frontend/src/components/TableRow.js

@@ -28,7 +28,7 @@ const TableRow = ({ item }) => {
 
   return (
     <tr className={issues ? 'issue' : ''}>
-      <td>{item.title}</td>
+      <td>{item.key}</td>
       <td>{item.value}</td>
       <td>
         {issues ? (

frontend/src/components/main.js

@@ -286,13 +286,6 @@ const getScreen = () => [
 //   issues: [],
 // });
 
-const getCalendar = () => ({
-  key: 'calendar',
-  title: 'Calendar',
-  value: Intl.DateTimeFormat().resolvedOptions().calendar,
-  issues: [],
-});
-
 const getTimezone = () => ({
   key: 'timezone',
   title: 'Timezone',
@@ -300,14 +293,21 @@ const getTimezone = () => ({
   issues: [],
 });
 
-// const getTimezoneOffset = () => ({
-//   key: 'timezoneOffset',
-//   title: 'Timezone offset',
-//   value: new Date().getTimezoneOffset(),
-//   issues: [],
-// });
+const getHourCycle = () => ({
+  key: 'hourCycle',
+  title: 'Hour cycle',
+  value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
+  issues: [],
+});
 
-const getIntl = () => [getCalendar(), getTimezone()];
+const getCalendar = () => ({
+  key: 'calendar',
+  title: 'Calendar',
+  value: Intl.DateTimeFormat().resolvedOptions().calendar,
+  issues: [],
+});
+
+const getIntl = () => [getTimezone(), getHourCycle(), getCalendar()];
 
 const detectTor = () => {
   const date = new Date();
@@ -322,6 +322,13 @@ const detectTor = () => {
   return false;
 };
 
+// const getTimezoneOffset = () => ({
+//   key: 'timezoneOffset',
+//   title: 'Timezone offset',
+//   value: new Date().getTimezoneOffset(),
+//   issues: [],
+// });
+
 // const getTor = () => ({
 //   key: 'tor',
 //   title: 'Tor browser',