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
-        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.
+        <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>
       {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 ? (
-          <ScanBlocks />
-        ) : (
-          <StartBlock scan={scan} onScanClick={setScan} />
-        )}
+        {scan ? <ScanBlocks /> : <StartBlock scan={scan} setScan={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,32 +15,26 @@ 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 startScan = useCallback(() => {
-    onScanClick(true);
-  }, [onScanClick]);
-
-  return (
-    <ScanBlock>
-      <h2>About</h2>
-      <div className="contentBody">
-        Vytal shows you what traces your browser leaves behind while surfing the
-        web. This scan allows you to understand how easy it is to identify and
-        track your browser even while using private mode.
-      </div>
-      <ContentList items={contentItems} />
-      <input
-        type="submit"
-        onClick={startScan}
-        id="scanButton"
-        value="Scan Browser"
-      />
-    </ScanBlock>
-  );
-};
+const StartBlock = ({ setScan }) => (
+  <ScanBlock>
+    <h2>About</h2>
+    <div className="contentBody">
+      Vytal shows you what traces your browser leaves behind while surfing the
+      web. This scan allows you to understand how easy it is to identify and
+      track your browser even while using private mode.
+    </div>
+    <ContentList items={contentItems} />
+    <input
+      type="submit"
+      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 };