From bd855b97cd017f0d50ce95d21275395c806d0371 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao <_accounts@nareshkumarrao.com> Date: Wed, 28 Jul 2021 17:22:32 +0200 Subject: [PATCH 1/2] implemented qr code scanner --- package.json | 1 + src/App.js | 4 ++ src/screens/HomeScreen.js | 12 +++-- src/screens/ScannerScreen.js | 95 ++++++++++++++++++++++++++++++++++++ yarn.lock | 34 +++++++++++++ 5 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 src/screens/ScannerScreen.js diff --git a/package.json b/package.json index e7988ab..bd19304 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 2083f8e..550d125 100644 --- a/src/App.js +++ b/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() { + + + diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index e940355..cafed57 100644 --- a/src/screens/HomeScreen.js +++ b/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,9 +34,11 @@ function QRCode() { } function Home() { + const history = useHistory(); + const isAuthenticated = useSelector(state => state.auth.isAuthenticated); if (!isAuthenticated) return ; - + return ( - + This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account! + + ); diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js new file mode 100644 index 0000000..c448304 --- /dev/null +++ b/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 ; + + return ( + + + + + + + + ); +} + +export default Scanner; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4830fb3..488a218 100644 --- a/yarn.lock +++ b/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" From 0ba8c8151ee01a8a1bdf3a27c4bb88f416945462 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao Date: Wed, 28 Jul 2021 17:28:43 +0200 Subject: [PATCH 2/2] ran prettier --- src/screens/ScannerScreen.js | 170 ++++++++++++++++++----------------- 1 file changed, 87 insertions(+), 83 deletions(-) diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js index c448304..08641af 100644 --- a/src/screens/ScannerScreen.js +++ b/src/screens/ScannerScreen.js @@ -1,95 +1,99 @@ -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"; +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 toast = useToast(); - const history = useHistory(); - const dispatch = useDispatch(); + const handleError = err => { + console.log(err); + }; - const [scanData, setScanData] = useState(null); + const handleScan = res => { + if (res && res !== scanData) { + setScanData(res); + } + }; - - - 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, - }); - }); + 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'); + } } - } - }, [scanData, dispatch, history, toast]); + }) + .catch(e => { + toast({ + title: 'Bad Verification', + status: 'error', + duration: 2000, + }); + }); + } + } + }, [scanData, dispatch, history, toast]); - const isAuthenticated = useSelector(state => state.auth.isAuthenticated); - if (!isAuthenticated) return ; + const isAuthenticated = useSelector(state => state.auth.isAuthenticated); + if (!isAuthenticated) return ; - return ( - + + + + - - - ); + Show my QR Code + + + + ); } -export default Scanner; \ No newline at end of file +export default Scanner;