Merge pull request #4394 from matrix-org/t3chguy/qrcode

wrap node-qrcode in a React FC and use it for ShareDialog

src/components/views/elements/QRCode.tsx

@@ -0,0 +1,51 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+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, className, ...options}) => {
+    const [dataUri, setUri] = React.useState<string>(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        toDataURL(data, {...defaultOptions, ...options}).then(uri => {
+            if (cancelled) return;
+            setUri(uri);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [JSON.stringify(data), options]);
+
+    return <div className={classNames("mx_QRCode", className)}>
+        { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
+    </div>;
+};
+
+export default QRCode;

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} />
+        );
     }
 }