Merge pull request #113 from felleslosninger/verifierapp-cleanup

Verifierapp cleanup

verifier/verifier-app/src/App.js

@@ -1,24 +1,11 @@
 import './App.css';
 import React from "react";
 import VerifyAge from './Pages/VerifyAge';
-import Verified from './Pages/Verified';
-import NotVerified from './Pages/NotVerified';
-import {
-    BrowserRouter as Router,
-    Switch,
-    Route
-} from "react-router-dom";
 
 function App() {
     return (
         <div className="App">
-            <Router>
-                <Switch>
-                    <Route exact path='/' component={VerifyAge}/>
-                    <Route exact path='/verified' component={Verified}/>
-                    <Route exact path='/notVerified' component={NotVerified}/>
-                </Switch>
-            </Router>
+            <VerifyAge/>
         </div>
     );
 }

verifier/verifier-app/src/Pages/VerifyAge.jsx

@@ -1,64 +1,73 @@
-import React from "react";
-import {Link, useHistory} from "react-router-dom";
+import React, {useState, useEffect} from "react";
 import QRCode from "react-qr-code";
 import localIpUrl from 'local-ip-url';
+import { useInterval } from "../hooks/useInterval";
 
+export default function VerifyAge() {
 
-function VerifyAge() {
-
-    let history = useHistory()
     const path = localIpUrl() + ':3000/api/sendVP'
-    const userID = Math.floor((Math.random() * 100000))
+    const VERIFY_REFRESH_INTERVAL = 2000;
 
-    async function checkAge(id) {
-        let response = await fetch('/api/checkVerified?id='+ id)
-            .then(response => response.json())
-            //.catch(err => console.log('There was an error:' + err))
-        console.log(response)
+    const [userID, setUserID] = useState();
+    const [verified, setVerified] = useState(false);
 
-        if (response === false) {
-            console.log(response)
-            history.push('/notVerified')
-        } else {
-            history.push('/verified')
-            console.log(response)
-        }
+    function generateUserID() {
+        const id = Math.floor((Math.random() * 100000));
+        console.log("Generated userID: " + id);
+        return id;
     }
 
+    async function httpGetVerifiedAge(id) {
+        let response = await fetch('/api/checkVerified?id='+ id)
+            .then(response => response.json());
+            //.catch(err => console.log('There was an error:' + err))
+        console.log("GET verified: " + response);
+        return response;
+    }
+
     async function httpSendUserId(id) {
-        console.log(userID)
+        console.log("POST userID argument: " + id)
         try {
             const response = await fetch("/api/sendUserID", {
                 method: "POST",
                 body: JSON.stringify(id)
             })
-            console.log(response.text())
+            console.log("POST userID response: " + response.text())
             if (response.ok) {
                 return true;
             }
             return false;
         }
         catch (error) {
-            console.log("feil");
+            console.log("feil under sending av userID");
             return false;
         }
     }
 
+    // Called only once when page is loaded
+    useEffect(() => {
+        const generated = generateUserID();
+        setUserID(generated);
+    }, []);
+
+    // Called when userID is changed
+    useEffect(() => {
+        httpSendUserId(userID)
+    }, [userID]);
+
+    // Called continuously with the specified interval delay
+    useInterval(async () => {
+        const verified = await httpGetVerifiedAge(userID);
+        setVerified(verified);
+    }, VERIFY_REFRESH_INTERVAL);
 
     return (
         <div className="VerifyAge">
-            <p>You must be over 18 to continue</p>
+            <p>Verifiser at du er over 18.</p>
             <QRCode value={path + '|over-18|' + userID}/>
             <br/>
             <br/>
-            <br/>
-            <button className="btn" onClick={() => httpSendUserId(userID)}>Send proof</button>
-            <br/>
-            <br/>
-            <br/>
-            <Link className="btn" to={history} onClick={() => checkAge(userID)}>Verify age</Link>
+            <p style={{color: verified ? "green" : "black"}}>Du er {!verified && "enda ikke"} verifisert.</p>
         </div>
     );
-}
-
-export default VerifyAge;
+}

verifier/verifier-app/src/hooks/useInterval.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+export function useInterval(callback, delay) {
+    const savedCallback = useRef();
+
+    // Remember the latest callback.
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+
+    // Set up the interval
+    useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => {
+                clearInterval(id);
+            };
+        }
+    }, [callback, delay])
+}