implemented qr code scanner

package.json

@@ -17,6 +17,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^3.0.0",
+    "react-qr-reader": "^2.2.1",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/App.js

@@ -7,6 +7,7 @@ import Create from './screens/CreateScreen';
 import Success from './screens/SuccessScreen';
 import './App.css';
 import Verify from './screens/VerifyScreen';
+import Scanner from './screens/ScannerScreen';
 
 function App() {
   return (
@@ -24,6 +25,9 @@ function App() {
         <Route path="/success">
           <Success />
         </Route>
+        <Route path="/scanner">
+          <Scanner />
+        </Route>
         <Route path="/verify/:id" component={Verify}/>
         <Route path="/">
           <Redirect to="/home" />

src/screens/HomeScreen.js

@@ -1,8 +1,8 @@
-import { Flex, Image, Spinner, Text } from '@chakra-ui/react';
+import { Button, Divider, Flex, Image, Spinner, Text } from '@chakra-ui/react';
 import axios from 'axios';
 import { React, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Redirect } from 'react-router-dom';
+import { Redirect, useHistory } from 'react-router-dom';
 import { authLogout } from '../features/auth/authSlice';
 
 function QRCode() {
@@ -34,6 +34,8 @@ function QRCode() {
 }
 
 function Home() {
+  const history = useHistory();
+
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
   if (!isAuthenticated) return <Redirect to="/login" />;
   
@@ -52,10 +54,12 @@ function Home() {
         id="QRFlex"
       >
         <QRCode />
-        <Text align="center" fontSize="lg">
+        <Text mb={6} align="center" fontSize="lg">
           This is your QR code. Show this to others to allow them to confirm a
           contact, or allow them to create an account!
         </Text>
+        <Divider mb={6} />
+        <Button onClick={()=>{history.push("/scanner");}}>Scan a QR Code</Button>
       </Flex>
     </Flex>
   );

src/screens/ScannerScreen.js

@@ -0,0 +1,95 @@
+import { Button, Divider, Flex, useToast } from "@chakra-ui/react";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import QrReader from "react-qr-reader";
+import { useDispatch, useSelector } from "react-redux";
+import { Redirect, useHistory } from "react-router-dom";
+import { authLogout } from "../features/auth/authSlice";
+
+function Scanner() {
+
+
+    const toast = useToast();
+    const history = useHistory();
+    const dispatch = useDispatch();
+
+    const [scanData, setScanData] = useState(null);
+
+
+
+    const handleError = (err) => {
+        console.log(err);
+    };
+
+    const handleScan = (res) => {
+        if (res && res !== scanData) {
+            setScanData(res);
+        }
+    };
+
+    useEffect(() => {
+        if (scanData) {
+            // fucking safari on ios doesn't support lookbehind, so have to workaround with substr
+            // const re = /(?<=verify\/).*$/;
+            const re = /verify\/.*$/;
+            const hash = re.exec(scanData);
+            if (hash) {
+                axios.post(`${process.env.REACT_APP_API_URL}/verify`,
+                    {
+                        id: hash[0].substr(7),
+                    },
+                    { withCredentials: true })
+                    .then((res) => {
+
+                        if (res.data.success) {
+                            if (res.data.loggedIn) {
+                                toast({
+                                    title: 'Contact Succesfully Logged',
+                                    status: 'info',
+                                    duration: 2000,
+                                });
+                            } else {
+                                console.log("Time to logout!");
+                                dispatch(authLogout());
+                                history.push("/login");
+                            }
+                        }
+                    })
+                    .catch((e) => {
+                        toast({
+                            title: 'Bad Verification',
+                            status: 'error',
+                            duration: 2000,
+                        });
+                    });
+            }
+        }
+    }, [scanData, dispatch, history, toast]);
+
+    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
+    if (!isAuthenticated) return <Redirect to="/login" />;
+
+    return (
+        <Flex
+            height="100vh"
+            background="teal.100"
+            alignItems="center"
+            justifyContent="center"
+        >
+            <Flex direction="column" background="white" p={12} rounded={6}>
+                <QrReader
+                    mb={6}
+                    delay={300}
+                    onError={handleError}
+                    onScan={handleScan}
+                    style={{ width: '30vh' }}
+                    facingMode="environment"
+                />
+                <Divider mb={6} />
+                <Button onClick={() => { history.push("/home"); }}>Show my QR Code</Button>
+            </Flex>
+        </Flex>
+    );
+}
+
+export default Scanner;

yarn.lock

@@ -7606,6 +7606,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jsqr@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+  integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
@@ -9925,6 +9930,15 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-qr-reader@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-2.2.1.tgz#dc89046d1c1a1da837a683dd970de5926817d55b"
+  integrity sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==
+  dependencies:
+    jsqr "^1.2.0"
+    prop-types "^15.7.2"
+    webrtc-adapter "^7.2.1"
+
 react-redux@^7.2.4:
   version "7.2.4"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
@@ -10522,6 +10536,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtcpeerconnection-shim@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+  dependencies:
+    sdp "^2.6.0"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -10636,6 +10657,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+sdp@^2.12.0, sdp@^2.6.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -12150,6 +12176,14 @@ webpack@4.44.2:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
+webrtc-adapter@^7.2.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1"
+  integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==
+  dependencies:
+    rtcpeerconnection-shim "^1.2.15"
+    sdp "^2.12.0"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"