add QR code display

src/widgets/new-topic-by-id.jsx

@@ -1,6 +1,9 @@
+import QRCode from 'qrcodejs';
 import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
+import { QRCODE_SIZE } from '../config';
+
 const messages = defineMessages({
   invalid_id: {
     id: 'error_invalid_id',
@@ -13,6 +16,8 @@ class NewTopicById extends React.PureComponent {
   constructor(props) {
     super(props);
 
+    this.qrCodeRef = React.createRef();
+
     this.state = {
       groupId: '',
     };
@@ -22,6 +27,14 @@ class NewTopicById extends React.PureComponent {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  componentDidMount() {
+    new QRCode(this.qrCodeRef.current, {
+      text: this.props.myURI,
+      width: QRCODE_SIZE,
+      height: QRCODE_SIZE,
+    });
+  }
+
   handleChange(e) {
     this.setState({groupId: e.target.value});
   }
@@ -36,7 +49,7 @@ class NewTopicById extends React.PureComponent {
     e.preventDefault();
     if (this.state.groupId) {
       const name = this.state.groupId.trim();
-      const prefix = name.substr(0, 3);
+      const prefix = name.substring(0, 3);
       if (name.length > 3 && ['usr', 'grp', 'chn'].includes(prefix)) {
         this.props.onSubmit(name);
       } else {
@@ -53,7 +66,7 @@ class NewTopicById extends React.PureComponent {
           description="Prompt for entering user or group ID">{
           (prompt) => <input type="text" placeholder={prompt}
             value={this.state.groupId} onChange={this.handleChange}
-            onKeyPress={this.handleKeyPress} required autoFocus />
+            onKeyDown={this.handleKeyPress} required autoFocus />
         }</FormattedMessage>
         </div>
         <div className="dialog-buttons">
@@ -62,6 +75,11 @@ class NewTopicById extends React.PureComponent {
               description="Button [Subscribe]" />
           </button>
         </div>
+        <br />
+        <div className="panel-form-column">
+        <label className="small">Scan my ID:</label>
+          <div className="qr-code" ref={this.qrCodeRef} />
+        </div>
       </div>
     );
   }

src/widgets/show-qrcode.jsx

@@ -0,0 +1,34 @@
+import QRCode from 'qrcodejs';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { QRCODE_SIZE } from '../config';
+
+export default class ShowQRCode extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.qrCodeRef = React.createRef();
+  }
+
+  componentDidMount() {
+    new QRCode(this.qrCodeRef.current, {
+      text: this.props.uri,
+      width: QRCODE_SIZE,
+      height: QRCODE_SIZE,
+    });
+  }
+
+  render() {
+    return (
+      <div className="panel-form-column">
+        <br />
+        <div className="qr-code" ref={this.qrCodeRef} />
+        <div className="dialog-buttons">
+          <button className="outline" onClick={this.props.onCancel}>
+            <FormattedMessage id="button_ok" defaultMessage="OK" description="Button [OK]" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+};