From 4c7d7032755f7a3e144efe696e5e60279b876fdf Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 14 May 2020 11:20:27 +0100
Subject: [PATCH] Reuse QRCode for VerificationQRCode and specify widths

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/ShareDialog.tsx  |  2 +-
 src/components/views/elements/QRCode.tsx      |  9 ++---
 .../elements/crypto/VerificationQRCode.js     | 36 ++++---------------
 3 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index 3924fd42ec..271f754fd2 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -221,7 +221,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode data={matrixToUrl} />
+                        <QRCode data={matrixToUrl} width={256} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         { socials.map((social) => (
diff --git a/src/components/views/elements/QRCode.tsx b/src/components/views/elements/QRCode.tsx
index 9c867058c0..f70ab48fa3 100644
--- a/src/components/views/elements/QRCode.tsx
+++ b/src/components/views/elements/QRCode.tsx
@@ -16,19 +16,21 @@ limitations under the License.
 
 import * as React from "react";
 import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import classNames from "classnames";
 
 import {_t} from "../../../languageHandler";
 import Spinner from "./Spinner";
 
 interface IProps extends QRCodeToDataURLOptions {
     data: string | QRCodeSegment[];
+    className?: string;
 }
 
 const defaultOptions: QRCodeToDataURLOptions = {
     errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
 };
 
-const QRCode: React.FC<IProps> = ({data, ...options}) => {
+const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
     const [dataUri, setUri] = React.useState<string>(null);
     React.useEffect(() => {
         let cancelled = false;
@@ -39,10 +41,9 @@ const QRCode: React.FC<IProps> = ({data, ...options}) => {
         return () => {
             cancelled = true;
         };
-    }, [data, options]);
+    }, [JSON.stringify(data), options]);
 
-
-    return <div className="mx_QRCode">
+    return <div className={classNames("mx_QRCode", className)}>
         { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
     </div>;
 };
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
index 08cd0c772e..3bbfb004c6 100644
--- a/src/components/views/elements/crypto/VerificationQRCode.js
+++ b/src/components/views/elements/crypto/VerificationQRCode.js
@@ -17,8 +17,7 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {replaceableComponent} from "../../../../utils/replaceableComponent";
-import Spinner from "../Spinner";
-import * as QRCode from "qrcode";
+import QRCode from "../QRCode";
 
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
 export default class VerificationQRCode extends React.PureComponent {
@@ -26,33 +25,12 @@ export default class VerificationQRCode extends React.PureComponent {
         qrCodeData: PropTypes.object.isRequired,
     };
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            dataUri: null,
-        };
-        this.generateQrCode();
-    }
-
-    componentDidUpdate(prevProps): void {
-        if (JSON.stringify(this.props) === JSON.stringify(prevProps)) return; // No prop change
-
-        this.generateQRCode();
-    }
-
-    async generateQrCode() {
-        // Now actually assemble the QR code's data URI
-        const uri = await QRCode.toDataURL([{data: this.props.qrCodeData.buffer, mode: 'byte'}], {
-            errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
-        });
-        this.setState({dataUri: uri});
-    }
-
     render() {
-        if (!this.state.dataUri) {
-            return <div className='mx_VerificationQRCode'><Spinner /></div>;
-        }
-
-        return <img src={this.state.dataUri} className='mx_VerificationQRCode' />;
+        return (
+            <QRCode
+                data={[{data: this.props.qrCodeData.buffer, mode: 'byte'}]}
+                className="mx_VerificationQRCode"
+                width={196} />
+        );
     }
 }