feat(qr-scan): Added QR scanner modal

package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "author": "Chris Troutner <chris.troutner@gmail.com>",
   "dependencies": {
+    "@loadable/component": "^5.12.0",
     "adminlte-2-react": "^0.1.27",
     "gatsby": "^2.22.15",
     "gatsby-image": "^2.4.5",
@@ -17,7 +18,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-helmet": "^6.0.0"
+    "react-helmet": "^6.0.0",
+    "react-qr-reader": "^2.2.1"
   },
   "devDependencies": {
     "prettier": "2.0.5"

src/components/admin-lte/admin-lte.css

@@ -12,3 +12,14 @@
     text-align: center;
 
 }
+.scanner-left-menu {
+    padding: 5px 5px 5px 18px;
+    cursor: pointer;
+}
+ /*  .scanner-left-menu:hover li a {
+    color: white;
+  } */
+.scanner-left-menu li a {
+    display: block;
+    width: 100%;
+}

src/components/admin-lte/index.js

@@ -5,9 +5,12 @@ import Icons from "./icons"
 import Portfolio from "./portfolio"
 
 import AdminLTE, { Sidebar } from "adminlte-2-react"
+import ScannerModal from "../qr-scanner/modal"
 
 import Layout from "../layout"
 import "./admin-lte.css"
+
+//import {BrowserRouter as Router} from 'react-router-dom';
 const { Item } = Sidebar
 
 let _this
@@ -17,6 +20,7 @@ class AdminLTEPage extends React.Component {
     _this = this
     this.state = {
       bchBalance: Math.random().toFixed(8),
+      showScannerModal: true,
     }
   }
 
@@ -32,7 +36,6 @@ class AdminLTEPage extends React.Component {
       <Item key="Games" text="Games" />
       <Item key="trade" text="Trade Locally" />
     </Item>,
-    <Item icon="fa-qrcode" key="qrScanner" text="Qr Scanner" />,
   ]
 
   render() {
@@ -56,18 +59,24 @@ class AdminLTEPage extends React.Component {
             </Item>
 
             {_this.sidebar}
+            {/* <div onClick={_this.toggleScanner} className="scanner-left-menu"> */}
+            <Item
+              icon="fa-qrcode"
+              key="qrReader"
+              text="Qr Scanner"
+              to="/qrScanner"
+            />
+            {/* </div> */}
           </Sidebar.Core>
           <Portfolio path="/Portfolio" />
           <Icons path="/Icons" />
           <Configure path="/Configure" />
           <Audit path="/Audit" />
+          <ScannerModal path="/qrScanner" />
         </AdminLTE>
       </Layout>
     )
   }
-  goto() {
-    console.log("go to")
-  }
 }
 
 export default AdminLTEPage

src/components/qr-scanner/modal.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+import { Content, Button } from "adminlte-2-react"
+import QScanner from "./qr-scanner"
+let _this
+class ScannerModal extends Component {
+  constructor(props) {
+    super(props)
+    _this = this
+    this.state = {
+      show: true,
+    }
+  }
+
+  modalFooter = (
+    <React.Fragment>
+      <Button text="Close" pullLeft onClick={this.onHide} />
+    </React.Fragment>
+  )
+
+  render() {
+    return (
+      <Content
+        title="Qr Scanner"
+        modal
+        modalFooter={this.modalFooter}
+        show={_this.state.show}
+        modalCloseButton={true}
+        onHide={_this.onHide}
+      >
+        <QScanner></QScanner>
+      </Content>
+    )
+  }
+
+  UNSAFE_componentWillUpdate() {
+    if (_this.props.show && _this.props.show !== _this.state.show) {
+      _this.setState({
+        show: _this.props.show,
+      })
+    }
+  }
+  onHide() {
+    if (_this.props.onHide) {
+      _this.props.onHide()
+    } else {
+      _this.setState({
+        show: false,
+      })
+      // redirect
+      // deleting focus from qr scanner menu
+      const pageElement = document.querySelectorAll("a[href^='/']")
+      if (pageElement.length) {
+        pageElement[0].click()
+      }
+    }
+  }
+}
+ScannerModal.propTypes = {
+  show: PropTypes.bool,
+  onHide: PropTypes.func,
+}
+export default ScannerModal

src/components/qr-scanner/qr-scanner.css

@@ -0,0 +1,15 @@
+.QRScanner-container{
+    text-align: center;
+}
+
+.change-button {
+    margin-bottom: 2em;
+    margin-top: 2em;
+}
+
+.qr-result {
+    margin-top: 2em;
+    word-break: break-all;
+    margin-left: 2em;
+    margin-right: 2em;
+}

src/components/qr-scanner/qr-scanner.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import loadable from '@loadable/component'
+
+import './qr-scanner.css'
+const QrReader = loadable(() => import('react-qr-reader'))
+
+
+let _this
+class QScanner extends Component {
+
+  constructor(props) {
+    super(props)
+    _this =  this
+
+
+    this.state = {
+      result: 'No Result',
+      facingMode: 'environment'
+    }
+  }
+
+  handleScan = data => {
+    if (data) {
+      this.setState({
+        result: data
+      })
+    }
+  }
+  handleError = err => {
+    console.error(err)
+    alert(err)
+  }
+  render() {
+    return (
+      <div className="QRScanner-container">
+        <h4>Facing Mode: {_this.state.facingMode}</h4>
+        <button className="change-button" onClick={_this.changeMode}>Change</button>
+        <QrReader
+          delay={300}
+          onError={this.handleError}
+          onScan={this.handleScan}
+          facingMode={_this.state.facingMode}
+        />
+        <b><p className="qr-result">{this.state.result}</p></b>
+      </div>
+    )
+  }
+  changeMode() {
+    let mode = _this.state.facingMode === 'user' ?
+      'environment' : 'user'
+    console.log(`changing to ${mode} mode`)
+    _this.setState({
+      facingMode: mode
+    })
+  }
+}
+
+export default QScanner