From cc24fe936c1297668b5f3ad046a908c9d1c0f4c1 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 14 Sep 2021 16:26:52 -0400
Subject: [PATCH] Finished intl block

---
 frontend/src/components/IntlBlock.js  | 19 ++++++++++++++-
 frontend/src/components/OtherBlock.js |  6 +++++
 frontend/src/components/TableRow.js   |  2 +-
 frontend/src/components/main.js       | 35 ++++++++++++++++-----------
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 055e6c3..e8dd348 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/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.
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 6c0a049..c73302c 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/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>
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 8c89a83..63b8b96 100644
--- a/frontend/src/components/TableRow.js
+++ b/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 ? (
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 6251a78..4a885f8 100644
--- a/frontend/src/components/main.js
+++ b/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',