Upgrade QR code library

Author: zwliew

website/package.json

@@ -149,6 +149,7 @@
     "mousetrap": "1.6.5",
     "nusmoderator": "3.0.0",
     "p-queue": "6.6.2",
+    "qrcode.react": "4.1.0",
     "query-string": "6.14.1",
     "react": "18.3.1",
     "react-beautiful-dnd": "13.1.1",
@@ -159,7 +160,6 @@
     "react-leaflet": "3.2.5",
     "react-loadable": "5.5.0",
     "react-modal": "3.16.1",
-    "react-qr-svg": "2.4.0",
     "react-redux": "7.2.9",
     "react-router-dom": "5.3.4",
     "react-scrollspy": "3.4.3",

website/src/views/timetable/ShareTimetable.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import classnames from 'classnames';
 import qs from 'query-string';
 import { Copy, Mail, Repeat } from 'react-feather';
-import type { QRCodeProps } from 'react-qr-svg';
+import type { QRCodeSVG } from 'qrcode.react';
 
 import type { SemTimetableConfig } from 'types/timetables';
 import type { ModuleCode, Semester } from 'types/modules';
@@ -48,7 +48,7 @@ export const SHORT_URL_KEY = 'shorturl';
 
 export default class ShareTimetable extends React.PureComponent<Props, State> {
   // React QR component is lazy loaded for performance
-  static QRCode: React.ComponentType<QRCodeProps> | null;
+  static QRCode: typeof QRCodeSVG | null;
 
   // Save a copy of the current URL to detect when URL changes
   url: string | null = null;
@@ -63,8 +63,8 @@ export default class ShareTimetable extends React.PureComponent<Props, State> {
 
   override componentDidMount() {
     if (!ShareTimetable.QRCode) {
-      retryImport(() => import(/* webpackChunkName: "export" */ 'react-qr-svg')).then((module) => {
-        ShareTimetable.QRCode = module.QRCode;
+      retryImport(() => import(/* webpackChunkName: "export" */ 'qrcode.react')).then((module) => {
+        ShareTimetable.QRCode = module.QRCodeSVG;
         this.forceUpdate();
       });
     }
@@ -167,7 +167,7 @@ export default class ShareTimetable extends React.PureComponent<Props, State> {
           <div className="col-sm-4">
             <h3 className={styles.shareHeading}>QR Code</h3>
             <div className={styles.qrCode}>
-              {ShareTimetable.QRCode && <ShareTimetable.QRCode value={url} />}
+              {ShareTimetable.QRCode && <ShareTimetable.QRCode size={172} value={url} />}
             </div>
           </div>
           <div className="col-sm-4">

website/yarn.lock

@@ -9748,10 +9748,10 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-[email protected].0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+[email protected].0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-4.1.0.tgz#ff15dc9edb135f735bb303a8356938c1e8dcc4c8"
+  integrity sha512-uqXVIIVD/IPgWLYxbOczCNAQw80XCM/LulYDADF+g2xDsPj5OoRwSWtIS4jGyp295wyjKstfG1qIv/I2/rNWpQ==
 
 [email protected]:
   version "6.13.0"
@@ -10036,14 +10036,6 @@ [email protected]:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-[email protected]:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.4.0.tgz#c703d95907b9713192730a5bbeffb57e4aa782bd"
-  integrity sha512-3Q/LyjBi+eWjJ0WyZvBzyY3rCMlUBZyRnbTcKbXQ39J1bd0/vgqYhXoYai7XlDTS42Ro50BBY4TmeUVyIZh+nA==
-  dependencies:
-    prop-types "^15.5.8"
-    qr.js "0.0.0"
-
 [email protected], react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"