From 54a363e4f0e948d2600f0bb760fb2e1dca995576 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 21:41:55 -0400
Subject: [PATCH] Fixed fingerprint functionality

---
 frontend/src/components/FingerprintBlock.js | 38 ++++++++++-----------
 frontend/src/styles/App.css                 |  2 +-
 frontend/src/utils/fingerprint.js           |  6 ++--
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index ffc7d06..4c8e995 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/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"
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index f1d82b7..c8b3962 100644
--- a/frontend/src/styles/App.css
+++ b/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%,
diff --git a/frontend/src/utils/fingerprint.js b/frontend/src/utils/fingerprint.js
index 9ad6fe1..92bec38 100644
--- a/frontend/src/utils/fingerprint.js
+++ b/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);
     });
 };