Finished fingerprint functionality on frontend

frontend/src/components/FingerprintBlock.js

@@ -1,19 +1,40 @@
 /* eslint-disable no-unused-vars */
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
-import getHash from '../utils/fingerprint';
+import {
+  getSignature,
+  postSignature,
+  getHash,
+  getFingerprint,
+} from '../utils/fingerprint';
 
 const FingerprintBlock = ({ workerData }) => {
   const [signature, setSignature] = useState();
 
+  useEffect(() => {
+    if (signature) {
+      postSignature(hash, signature);
+    } else {
+      console.log(signature);
+
+      getSignature(hash, setSignature);
+    }
+  }, [signature]);
+
   const hash = getHash(workerData);
   return (
     <Block>
       <h1>Fingerprint</h1>
+      <>
+        {signature ? (
+          <Table data={getFingerprint(signature, hash)} />
+        ) : (
           <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
@@ -21,7 +42,7 @@ const FingerprintBlock = ({ workerData }) => {
         reload the page in private mode to test it out.
       </p>
       {signature ? (
-        <p>Success! Reload browser.</p>
+        <p>Success! Reload page.</p>
       ) : (
         <form onSubmit={(e) => setSignature(e.target[0].value)}>
           <input

frontend/src/utils/fingerprint.js

@@ -1,5 +1,39 @@
+import axios from 'axios';
 import md5 from 'crypto-js/md5';
 
+export { getSignature, postSignature, getHash, getFingerprint };
+
+const getSignature = (hash, setSignature) => {
+  console.log('1');
+  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);
+      }
+    });
+};
+
+const postSignature = (hash, signature) => {
+  axios.post('https://api.vytal.io/fingerprint/', {
+    name: signature,
+    hash,
+  });
+};
+
 const getHash = (data) => md5(JSON.stringify(data)).toString();
 
-export default getHash;
+const getFingerprint = (signature, hash) => [
+  {
+    key: 'Signature',
+    value: signature,
+    issues: [],
+  },
+  {
+    key: 'Hash',
+    value: hash,
+    issues: [],
+  },
+];