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
+            <BlocksTwo />
-              workerData={workerData}
-              connectionData={connectionData}
-            />
           </div>
           <div className="centerBlockMobile">
-            <BlocksOne workerData={workerData} />
+            <BlocksOne />
-            <BlocksTwo
+            <BlocksTwo />
-              workerData={workerData}
-              connectionData={connectionData}
-            />
           </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} />
+    <FingerprintBlock />
-    <NavigatorBlock workerData={workerData} />
+    <NavigatorBlock />
-    <UserAgentBlock workerAgent={workerData.userAgent} />
+    <UserAgentBlock />
-    <IntlBlock workerData={workerData} />
+    <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} />
+    <LocationBlock />
-    <ConnectionBlock workerData={workerData} connectionData={connectionData} />
+    <ConnectionBlock />
     <ScreenBlock />
-    <OtherBlock workerData={workerData} />
+    <OtherBlock />
   </>
 );
 

frontend/src/components/ConnectionBlock.js

@@ -1,8 +1,12 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import { getConnection } from '../utils/connection';
 
-const LocationBlock = ({ connectionData }) => (
+const LocationBlock = () => {
+  const { connectionData } = useContext(DataContext);
+  return (
     <Block>
       <h1>Connection</h1>
       <Table data={getConnection(connectionData)} />
@@ -20,6 +24,7 @@ const LocationBlock = ({ connectionData }) => (
         </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,8 +1,12 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getIntl from '../utils/intl';
 
-const IntlBlock = ({ workerData }) => (
+const IntlBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
     <Block>
       <h1>Intl</h1>
       <Table data={getIntl(workerData)} />
@@ -19,6 +23,7 @@ const IntlBlock = ({ workerData }) => (
         </a>
       </p>
     </Block>
-);
+  );
+};
 
 export default IntlBlock;

frontend/src/components/LocationBlock.js

@@ -1,8 +1,12 @@
+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 }) => (
+const LocationBlock = () => {
+  const { workerData, connectionData } = useContext(DataContext);
+  return (
     <Block>
       <h1>Location</h1>
       <img src={getMap(connectionData)} alt="Map of current location" />
@@ -21,6 +25,7 @@ const LocationBlock = ({ connectionData, workerData }) => (
         </a>
       </p>
     </Block>
-);
+  );
+};
 
 export default LocationBlock;

frontend/src/components/NavigatorBlock.js

@@ -1,8 +1,12 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getNavigator from '../utils/navigator';
 
-const NavigatorBlock = ({ workerData }) => (
+const NavigatorBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
     <Block>
       <h1>Navigator</h1>
       <Table data={getNavigator(workerData)} />
@@ -20,6 +24,7 @@ const NavigatorBlock = ({ workerData }) => (
         </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,14 +1,18 @@
+import { useContext } from 'react';
+import DataContext from './Context';
 import Block from './Block';
 import Table from './Table';
 import getUserAgent from '../utils/userAgent';
 
-const UserAgentBlock = ({ workerAgent }) => (
+const UserAgentBlock = () => {
+  const { workerData } = useContext(DataContext);
+  return (
     <Block>
       <h1>User Agent</h1>
-    <Table data={getUserAgent(workerAgent)} />
+      <Table data={getUserAgent(workerData.userAgent)} />
       <p>
-      <b>Explanation:</b> Your user agent can be parsed to determine information
+        <b>Explanation:</b> Your user agent can be parsed to determine
-      about your browser or operating system.{' '}
+        information about your browser or operating system.{' '}
         <a
           className="link"
           target="_blank"
@@ -20,6 +24,7 @@ const UserAgentBlock = ({ workerAgent }) => (
         </a>
       </p>
     </Block>
-);
+  );
+};
 
 export default UserAgentBlock;