Fixed fingerprint functionality

frontend/src/components/FingerprintBlock.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
@@ -11,37 +10,36 @@ import {
 
 const FingerprintBlock = ({ workerData }) => {
   const [signature, setSignature] = useState();
+  const [load, setload] = useState(false);
+  const hash = getHash(workerData);
 
   useEffect(() => {
-    if (signature) {
-      postSignature(hash, signature);
-    } else {
-      getSignature(hash, setSignature);
-    }
-  }, [signature]);
+    getSignature(hash, setSignature, setload);
+  }, []);
 
-  const hash = getHash(workerData);
   return (
     <Block>
       <h1>Fingerprint</h1>
-      <>
-        {signature ? (
-          <div className="fingerprintTable">
-            <Table data={getFingerprint(signature, hash)} />
-          </div>
-        ) : (
-          <div className="boxWrap">
-            <div className="hash">{hash}</div>
-          </div>
-        )}
-      </>
+      {load && (
+        <>
+          {signature !== undefined ? (
+            <div className="fingerprintTable">
+              <Table data={getFingerprint(signature, hash)} />
+            </div>
+          ) : (
+            <div className="boxWrap">
+              <div className="hash">{hash}</div>
+            </div>
+          )}
+        </>
+      )}
       <p>
         <b>Explanation:</b> This is a unique identifier that can be used to
         follow you around the web. Even if you clear cookies, change your IP or
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      <form onSubmit={(e) => setSignature(e.target[0].value)}>
+      <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input
           type="text"
           id="name"

frontend/src/styles/App.css

@@ -19,7 +19,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  background: rgb(87, 35, 117);
+  background: var(--grey);
   background: linear-gradient(
     165deg,
     rgba(87, 35, 117, 1) 0%,

frontend/src/utils/fingerprint.js

@@ -3,16 +3,14 @@ import md5 from 'crypto-js/md5';
 
 export { getSignature, postSignature, getHash, getFingerprint };
 
-const getSignature = (hash, setSignature) => {
-  console.log('1');
+const getSignature = (hash, setSignature, setload) => {
   axios
     .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
     .then((response) => {
-      console.log(response.data[response.data.length - 1]);
-
       if (response.data.length !== 0) {
         setSignature(response.data[response.data.length - 1].name);
       }
+      setload(true);
     });
 };