Added main file for functions

README.md

@@ -10,14 +10,14 @@ Check it out at https://vytal.io
 
 # Dev
 
-Backend setup:
+Backend Django setup:
 
 ```
 cd backend
 python manage.py runserver
 ```
 
-Frontend setup:
+Frontend React setup:
 
 ```
 cd frontend

frontend/src/components/FingerprintBlock.js

@@ -11,7 +11,7 @@ const FingerprintBlock = () => {
 
   useEffect(() => {
     axios
-      .get(`http://localhost:8000/fingerprint/?hash=${hash}`)
+      .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
       .then((response) => {
         if (response.data.length !== 0) {
           setName(response.data[response.data.length - 1].name);
@@ -22,7 +22,7 @@ const FingerprintBlock = () => {
 
   const handleSave = (e) => {
     e.preventDefault();
-    axios.post('http://localhost:8000/fingerprint/', {
+    axios.post('https://api.vytal.io/fingerprint/', {
       name: e.target[0].value,
       hash,
     });
@@ -134,10 +134,10 @@ const FingerprintBlock = () => {
         )}
       </div>
       <p>
-        <b>Explanation:</b> This is a unique identifier that can be
+        <b>Explanation:</b> This is a unique identifier that can be used to
-        used to follow you around the web. Even if you clear cookies, change
+        follow you around the web. Even if you clear cookies, change your IP or
-        your IP or use private mode the hash will stay the same. Enter
+        use private mode the hash will stay the same. Enter your name below and
-        your name below and reload the page in private mode to test it out.
+        reload the page in private mode to test it out.
       </p>
       {saved ? (
         <p>Success! Re-scan browser.</p>

frontend/src/components/MainColumn.js

@@ -9,11 +9,7 @@ const MainColumn = () => {
     <div className="centerBlockOuter">
       <div className="centerBlockInner">
         <Logo />
-        {scan ? (
+        {scan ? <ScanBlocks /> : <StartBlock scan={scan} setScan={setScan} />}
-          <ScanBlocks />
-        ) : (
-          <StartBlock scan={scan} onScanClick={setScan} />
-        )}
       </div>
     </div>
   );

frontend/src/components/StartBlock.js

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import ContentList from './ContentList';
 import ScanBlock from './ScanBlock';
 
@@ -16,16 +15,11 @@ const contentItems = [
   {
     title: 'System Info',
     icon: 'browser',
-    body: 'JavaScript can be used to find data about your computer\'s software and hardware. This information can be used to create a fingerprint.',
+    body: "JavaScript can be used to find data about your computer's software and hardware. This information can be used to create a fingerprint.",
   },
 ];
 
-const StartBlock = ({ onScanClick }) => {
+const StartBlock = ({ setScan }) => (
-  const startScan = useCallback(() => {
-    onScanClick(true);
-  }, [onScanClick]);
-
-  return (
   <ScanBlock>
     <h2>About</h2>
     <div className="contentBody">
@@ -36,12 +30,11 @@ const StartBlock = ({ onScanClick }) => {
     <ContentList items={contentItems} />
     <input
       type="submit"
-        onClick={startScan}
+      onClick={() => setScan(true)}
       id="scanButton"
       value="Scan Browser"
     />
   </ScanBlock>
-  );
+);
-};
 
 export default StartBlock;

frontend/src/components/main.js

@@ -0,0 +1,5 @@
+import md5 from 'crypto-js/md5';
+
+const getHash = (data) => md5(JSON.stringify(data)).toString();
+
+export { getHash as default };