Added context to stop prop drilling

frontend/src/components/Blocks.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import DataContext from './Context';
 import BlocksOne from './BlocksOne';
 import BlocksTwo from './BlocksTwo';
 // import FontsBlock from './FontsBlock';
@@ -18,24 +19,18 @@ const Blocks = () => {
   return (
     <>
       {connectionData ? (
-        <>
+        <DataContext.Provider value={{ workerData, connectionData }}>
           <div className="centerBlockInner">
-            <BlocksOne workerData={workerData} />
+            <BlocksOne />
           </div>
           <div className="centerBlockInner">
-            <BlocksTwo
-              workerData={workerData}
-              connectionData={connectionData}
-            />
+            <BlocksTwo />
           </div>
           <div className="centerBlockMobile">
-            <BlocksOne workerData={workerData} />
-            <BlocksTwo
-              workerData={workerData}
-              connectionData={connectionData}
-            />
+            <BlocksOne />
+            <BlocksTwo />
           </div>
-        </>
+        </DataContext.Provider>
       ) : (
         <div className="contentBlock loadBlock">
           <center>Loading...</center>

frontend/src/components/BlocksOne.js

@@ -3,12 +3,12 @@ import IntlBlock from './IntlBlock';
 import NavigatorBlock from './NavigatorBlock';
 import FingerprintBlock from './FingerprintBlock';
 
-const BlocksOne = ({ workerData }) => (
+const BlocksOne = () => (
   <>
-    <FingerprintBlock workerData={workerData} />
-    <NavigatorBlock workerData={workerData} />
-    <UserAgentBlock workerAgent={workerData.userAgent} />
-    <IntlBlock workerData={workerData} />
+    <FingerprintBlock />
+    <NavigatorBlock />
+    <UserAgentBlock />
+    <IntlBlock />
   </>
 );
 

frontend/src/components/BlocksTwo.js

@@ -3,12 +3,12 @@ import ScreenBlock from './ScreenBlock';
 import LocationBlock from './LocationBlock';
 import ConnectionBlock from './ConnectionBlock';
 
-const BlocksTwo = ({ workerData, connectionData }) => (
+const BlocksTwo = () => (
   <>
-    <LocationBlock workerData={workerData} connectionData={connectionData} />
-    <ConnectionBlock workerData={workerData} connectionData={connectionData} />
+    <LocationBlock />
+    <ConnectionBlock />
     <ScreenBlock />
-    <OtherBlock workerData={workerData} />
+    <OtherBlock />
   </>
 );
 

frontend/src/components/ConnectionBlock.js

@@ -1,25 +1,30 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import { getConnection } from '../utils/connection';
 
-const LocationBlock = ({ connectionData }) => (
-  <Block>
-    <h1>Connection</h1>
-    <Table data={getConnection(connectionData)} />
-    <p>
-      <b>Explanation:</b> Your IP address reveals information about your
-      connection.{' '}
-      <a
-        className="link"
-        target="_blank"
-        rel="noreferrer"
-        alt="Read more about ip connection"
-        href="https://en.wikipedia.org/wiki/IP_address"
-      >
-        Read more
-      </a>
-    </p>
-  </Block>
-);
+const LocationBlock = () => {
+  const { connectionData } = useContext(DataContext);
+  return (
+    <Block>
+      <h1>Connection</h1>
+      <Table data={getConnection(connectionData)} />
+      <p>
+        <b>Explanation:</b> Your IP address reveals information about your
+        connection.{' '}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          alt="Read more about ip connection"
+          href="https://en.wikipedia.org/wiki/IP_address"
+        >
+          Read more
+        </a>
+      </p>
+    </Block>
+  );
+};
 
 export default LocationBlock;

frontend/src/components/Context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DataContext = createContext();
+
+export default DataContext;

frontend/src/components/FingerprintBlock.js

@@ -1,5 +1,6 @@
 import './FingerprintBlock.css';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import {
@@ -9,9 +10,10 @@ import {
   getFingerprint,
 } from '../utils/fingerprint';
 
-const FingerprintBlock = ({ workerData }) => {
+const FingerprintBlock = () => {
   const [signature, setSignature] = useState();
   const [load, setload] = useState(false);
+  const { workerData } = useContext(DataContext);
   const hash = getHash(workerData);
 
   useEffect(() => {

frontend/src/components/IntlBlock.js

@@ -1,24 +1,29 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getIntl from '../utils/intl';
 
-const IntlBlock = ({ workerData }) => (
-  <Block>
-    <h1>Intl</h1>
-    <Table data={getIntl(workerData)} />
-    <p>
-      <b>Explanation:</b> The Intl object exposes info about your computer.{' '}
-      <a
-        className="link"
-        target="_blank"
-        rel="noreferrer"
-        alt="Read more about intl"
-        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"
-      >
-        Read more
-      </a>
-    </p>
-  </Block>
-);
+const IntlBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
+    <Block>
+      <h1>Intl</h1>
+      <Table data={getIntl(workerData)} />
+      <p>
+        <b>Explanation:</b> The Intl object exposes info about your computer.{' '}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          alt="Read more about intl"
+          href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"
+        >
+          Read more
+        </a>
+      </p>
+    </Block>
+  );
+};
 
 export default IntlBlock;

frontend/src/components/LocationBlock.js

@@ -1,26 +1,31 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import { getMap, getLocation } from '../utils/connection';
 
-const LocationBlock = ({ connectionData, workerData }) => (
-  <Block>
-    <h1>Location</h1>
-    <img src={getMap(connectionData)} alt="Map of current location" />
-    <Table data={getLocation(connectionData, workerData)} />
-    <p>
-      <b>Explanation:</b> Your IP address can be used to determine your
-      location.{' '}
-      <a
-        className="link"
-        target="_blank"
-        rel="noreferrer"
-        alt="Read more about ip location"
-        href="https://en.wikipedia.org/wiki/IP_address"
-      >
-        Read more
-      </a>
-    </p>
-  </Block>
-);
+const LocationBlock = () => {
+  const { workerData, connectionData } = useContext(DataContext);
+  return (
+    <Block>
+      <h1>Location</h1>
+      <img src={getMap(connectionData)} alt="Map of current location" />
+      <Table data={getLocation(connectionData, workerData)} />
+      <p>
+        <b>Explanation:</b> Your IP address can be used to determine your
+        location.{' '}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          alt="Read more about ip location"
+          href="https://en.wikipedia.org/wiki/IP_address"
+        >
+          Read more
+        </a>
+      </p>
+    </Block>
+  );
+};
 
 export default LocationBlock;

frontend/src/components/NavigatorBlock.js

@@ -1,25 +1,30 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getNavigator from '../utils/navigator';
 
-const NavigatorBlock = ({ workerData }) => (
-  <Block>
-    <h1>Navigator</h1>
-    <Table data={getNavigator(workerData)} />
-    <p>
-      <b>Explanation:</b> The Navigator interface exposes info about your
-      computer.{' '}
-      <a
-        className="link"
-        target="_blank"
-        rel="noreferrer"
-        alt="Read more about navigator"
-        href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator"
-      >
-        Read more
-      </a>
-    </p>
-  </Block>
-);
+const NavigatorBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
+    <Block>
+      <h1>Navigator</h1>
+      <Table data={getNavigator(workerData)} />
+      <p>
+        <b>Explanation:</b> The Navigator interface exposes info about your
+        computer.{' '}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          alt="Read more about navigator"
+          href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator"
+        >
+          Read more
+        </a>
+      </p>
+    </Block>
+  );
+};
 
 export default NavigatorBlock;

frontend/src/components/OtherBlock.js

@@ -1,12 +1,13 @@
-import { useState, useEffect } from 'react';
-
+import { useState, useEffect, useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getOther from '../utils/other';
 
-const OtherBlock = ({ workerData }) => {
+const OtherBlock = () => {
   const [adBlock, setAdBlock] = useState();
   const [battery, setBattery] = useState();
+  const { workerData } = useContext(DataContext);
 
   useEffect(() => {
     fetch('https://www3.doubleclick.net', {

frontend/src/components/UserAgentBlock.js

@@ -1,25 +1,30 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getUserAgent from '../utils/userAgent';
 
-const UserAgentBlock = ({ workerAgent }) => (
-  <Block>
-    <h1>User Agent</h1>
-    <Table data={getUserAgent(workerAgent)} />
-    <p>
-      <b>Explanation:</b> Your user agent can be parsed to determine information
-      about your browser or operating system.{' '}
-      <a
-        className="link"
-        target="_blank"
-        rel="noreferrer"
-        alt="Read more about user agent"
-        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent"
-      >
-        Read more
-      </a>
-    </p>
-  </Block>
-);
+const UserAgentBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
+    <Block>
+      <h1>User Agent</h1>
+      <Table data={getUserAgent(workerData.userAgent)} />
+      <p>
+        <b>Explanation:</b> Your user agent can be parsed to determine
+        information about your browser or operating system.{' '}
+        <a
+          className="link"
+          target="_blank"
+          rel="noreferrer"
+          alt="Read more about user agent"
+          href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent"
+        >
+          Read more
+        </a>
+      </p>
+    </Block>
+  );
+};
 
 export default UserAgentBlock;