From dfb741eabbcdb5772b1d2d5b9ebcf8fbf2d6ea76 Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Thu, 4 Apr 2024 18:07:02 +0530 Subject: [PATCH 1/5] Add reactjs-qr-code-reader package --- package-lock.json | 48 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++- 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 7a0f730ba75..62e07f8d35e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1", + "reactjs-qr-code-reader": "^1.0.3", "read-excel-file": "^5.6.1", "redux": "^4.2.1", "redux-thunk": "^2.4.2", @@ -7135,6 +7136,23 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, + "node_modules/@zxing/browser": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.4.tgz", + "integrity": "sha512-WYjaav7St4sj/u/Km2llE4NU2Pq3JFIWnczr0tmyCC1KUlp08rV3qpu7iiEB4kOx/CgcCzrSebNnSmFt5B3IFg==", + "optionalDependencies": { + "@zxing/text-encoding": "^0.9.0" + }, + "peerDependencies": { + "@zxing/library": "^0.20.0" + } + }, + "node_modules/@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "node_modules/abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -20882,6 +20900,36 @@ "react-dom": ">=16.2.0" } }, + "node_modules/reactjs-qr-code-reader": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/reactjs-qr-code-reader/-/reactjs-qr-code-reader-1.0.3.tgz", + "integrity": "sha512-7Od+TsVYO8dPRIRAA61cCmtkkn2pm1ES5dSzsrepS+yn0nKvxjkgKy4Dh6UZmv47T5VAEhejqcCqkON461H4Bg==", + "dependencies": { + "@zxing/browser": "^0.1.4", + "webrtc-adapter": "^8.2.3" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/reactjs-qr-code-reader/node_modules/sdp": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz", + "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==" + }, + "node_modules/reactjs-qr-code-reader/node_modules/webrtc-adapter": { + "version": "8.2.3", + "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz", + "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==", + "dependencies": { + "sdp": "^3.2.0" + }, + "engines": { + "node": ">=6.0.0", + "npm": ">=3.10.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 205612f3ac0..a526a7c84db 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1", + "reactjs-qr-code-reader": "^1.0.3", "read-excel-file": "^5.6.1", "redux": "^4.2.1", "redux-thunk": "^2.4.2", @@ -186,4 +187,4 @@ "node": ">=20.12.0" }, "packageManager": "npm@10.5.0" -} \ No newline at end of file +} From e61220a3c0aee870b44a71416dc734c068f7ffaf Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Sun, 14 Apr 2024 13:10:54 +0530 Subject: [PATCH 2/5] removed faulty qr code scanner package --- package-lock.json | 48 ----------------------------------------------- package.json | 1 - 2 files changed, 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 62e07f8d35e..7a0f730ba75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,7 +54,6 @@ "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1", - "reactjs-qr-code-reader": "^1.0.3", "read-excel-file": "^5.6.1", "redux": "^4.2.1", "redux-thunk": "^2.4.2", @@ -7136,23 +7135,6 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, - "node_modules/@zxing/browser": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.4.tgz", - "integrity": "sha512-WYjaav7St4sj/u/Km2llE4NU2Pq3JFIWnczr0tmyCC1KUlp08rV3qpu7iiEB4kOx/CgcCzrSebNnSmFt5B3IFg==", - "optionalDependencies": { - "@zxing/text-encoding": "^0.9.0" - }, - "peerDependencies": { - "@zxing/library": "^0.20.0" - } - }, - "node_modules/@zxing/text-encoding": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", - "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", - "optional": true - }, "node_modules/abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -20900,36 +20882,6 @@ "react-dom": ">=16.2.0" } }, - "node_modules/reactjs-qr-code-reader": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/reactjs-qr-code-reader/-/reactjs-qr-code-reader-1.0.3.tgz", - "integrity": "sha512-7Od+TsVYO8dPRIRAA61cCmtkkn2pm1ES5dSzsrepS+yn0nKvxjkgKy4Dh6UZmv47T5VAEhejqcCqkON461H4Bg==", - "dependencies": { - "@zxing/browser": "^0.1.4", - "webrtc-adapter": "^8.2.3" - }, - "peerDependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } - }, - "node_modules/reactjs-qr-code-reader/node_modules/sdp": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz", - "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==" - }, - "node_modules/reactjs-qr-code-reader/node_modules/webrtc-adapter": { - "version": "8.2.3", - "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.2.3.tgz", - "integrity": "sha512-gnmRz++suzmvxtp3ehQts6s2JtAGPuDPjA1F3a9ckNpG1kYdYuHWYpazoAnL9FS5/B21tKlhkorbdCXat0+4xQ==", - "dependencies": { - "sdp": "^3.2.0" - }, - "engines": { - "node": ">=6.0.0", - "npm": ">=3.10.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index a526a7c84db..58e0563e398 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,6 @@ "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1", - "reactjs-qr-code-reader": "^1.0.3", "read-excel-file": "^5.6.1", "redux": "^4.2.1", "redux-thunk": "^2.4.2", From 92463205abe5514055e5c424f51b16288af5587e Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Sun, 14 Apr 2024 15:50:44 +0530 Subject: [PATCH 3/5] Update package-lock.json and package.json to include "@yudiel/react-qr-scanner" package version 2.0.0-beta.3. Update AssetsList.tsx to import Scanner from "@yudiel/react-qr-scanner" instead of QrReader. --- package-lock.json | 41 ++++++++++++++++++++++++++++ package.json | 1 + src/Components/Assets/AssetsList.tsx | 23 ++++++++-------- 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7a0f730ba75..0418f57397f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@rescript/react": "^0.11.0", "@sentry/browser": "^7.57.0", "@yaireo/ui-range": "^2.1.15", + "@yudiel/react-qr-scanner": "^2.0.0-beta.3", "axios": "^1.4.0", "browser-image-compression": "^2.0.2", "cross-env": "^7.0.3", @@ -7135,6 +7136,38 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true }, + "node_modules/@yudiel/react-qr-scanner": { + "version": "2.0.0-beta.3", + "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-2.0.0-beta.3.tgz", + "integrity": "sha512-3zGssNoBXpSUdVmNPGhlyQS1V9snzKPlGk5JGOjNXPNUqVYjf/m8TTrU6cskPbL3dRUOGFctAs5rLeVB1UEhXw==", + "dependencies": { + "@zxing/library": "^0.20.0" + }, + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@zxing/library": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz", + "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==", + "dependencies": { + "ts-custom-error": "^3.2.1" + }, + "engines": { + "node": ">= 10.4.0" + }, + "optionalDependencies": { + "@zxing/text-encoding": "~0.9.0" + } + }, + "node_modules/@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "node_modules/abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -23540,6 +23573,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/ts-custom-error": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz", + "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/ts-dedent": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", diff --git a/package.json b/package.json index 58e0563e398..8a1f6b810d3 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@rescript/react": "^0.11.0", "@sentry/browser": "^7.57.0", "@yaireo/ui-range": "^2.1.15", + "@yudiel/react-qr-scanner": "^2.0.0-beta.3", "axios": "^1.4.0", "browser-image-compression": "^2.0.2", "cross-env": "^7.0.3", diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx index 9e21d1bfb04..887fb1ebbed 100644 --- a/src/Components/Assets/AssetsList.tsx +++ b/src/Components/Assets/AssetsList.tsx @@ -1,4 +1,4 @@ -import QrReader from "react-qr-reader"; +import { Scanner } from "@yudiel/react-qr-scanner"; import * as Notification from "../../Utils/Notifications.js"; import { listAssets } from "../../Redux/actions"; import { assetClassProps, AssetData } from "./AssetTypes"; @@ -156,20 +156,21 @@ const AssetsList = () => { Close Scanner - { - if (value) { - const assetId = await getAssetIdFromQR(value); - checkValidAssetId(assetId ?? value); + { + if (text) { + const assetId = await getAssetIdFromQR(text); + checkValidAssetId(assetId ?? text); } }} - onError={(e) => + onError={(e) => { Notification.Error({ msg: e.message, - }) - } - style={{ width: "100%" }} + }); + }} + options={{ + delayBetweenScanAttempts: 300, + }} />

Scan Asset QR!

From 2a895b66af394252c96ae8830d5ce8d5947f874e Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Sun, 14 Apr 2024 22:41:29 +0530 Subject: [PATCH 4/5] Update QR code scanner package and replace deprecated QrReader with Scanner component from "@yudiel/react-qr-scanner" package. --- src/Components/ABDM/LinkABHANumberModal.tsx | 2 +- src/Components/Common/QRScanner.tsx | 21 +++++++++++---------- src/Components/Facility/AssetCreate.tsx | 13 +++++++------ 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/Components/ABDM/LinkABHANumberModal.tsx b/src/Components/ABDM/LinkABHANumberModal.tsx index 4aed5e0ee8f..d45129f5c4e 100644 --- a/src/Components/ABDM/LinkABHANumberModal.tsx +++ b/src/Components/ABDM/LinkABHANumberModal.tsx @@ -183,7 +183,7 @@ const ScanABHAQRSection = ({ } setQrValue(value); }} - parse={async (value: string) => { + parse={async (value: string | null) => { if (!value) return; setIsLoading(true); diff --git a/src/Components/Common/QRScanner.tsx b/src/Components/Common/QRScanner.tsx index 4b744ba2eeb..3154acea6de 100644 --- a/src/Components/Common/QRScanner.tsx +++ b/src/Components/Common/QRScanner.tsx @@ -2,14 +2,14 @@ import * as Notification from "../../Utils/Notifications.js"; import CareIcon from "../../CAREUI/icons/CareIcon"; import DialogModal from "./Dialog"; -import QrReader from "react-qr-reader"; import TextFormField from "../Form/FormFields/TextFormField.js"; import { useState } from "react"; +import { Scanner } from "@yudiel/react-qr-scanner"; interface IQRScannerModalProps { show: boolean; onClose: () => void; - onScan: (scannedValue: any) => any; + onScan: (scannedValue: string | null) => void; description?: string; disabled?: boolean; } @@ -32,15 +32,16 @@ const QRScannerModal = ({

{description || "Scan QR code!"}

- + Notification.Error({ msg: e.message, }) } - style={{ width: "100%" }} + options={{ + delayBetweenScanAttempts: 300, + }} /> @@ -50,7 +51,7 @@ const QRScannerModal = ({ interface IProps { value: string; onChange: (value: string) => void; - parse?: (scannedValue: any) => any; + parse?: (scannedValue: string | null) => void; className?: string; error?: string; label?: string; @@ -92,8 +93,8 @@ const QRScanner = ({ show={showScanner} disabled={disabled} onClose={() => setShowScanner(false)} - onScan={async (scannedValue: any) => { - const parsedValue = (await parse?.(scannedValue)) ?? null; + onScan={async (scannedValue) => { + const parsedValue = parse?.(scannedValue) ?? null; if (parsedValue) { onChange(parsedValue); setShowScanner(false); diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx index a0fa23e74c4..9ccd2e9c219 100644 --- a/src/Components/Facility/AssetCreate.tsx +++ b/src/Components/Facility/AssetCreate.tsx @@ -18,7 +18,7 @@ import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField"; import { LocationSelect } from "../Common/LocationSelect"; import Page from "../Common/components/Page"; import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField"; -import QrReader from "react-qr-reader"; +import { Scanner } from "@yudiel/react-qr-scanner"; import { SelectFormField } from "../Form/FormFields/SelectFormField"; import SwitchV2 from "../Common/components/Switch"; import TextAreaFormField from "../Form/FormFields/TextAreaFormField"; @@ -418,15 +418,16 @@ const AssetCreate = (props: AssetProps) => { {t("close_scanner")} - (assetId ? parseAssetId(assetId) : null)} - onError={(e: any) => + (assetId ? parseAssetId(assetId) : null)} + onError={(e) => Notification.Error({ msg: e.message, }) } - style={{ width: "100%" }} + options={{ + delayBetweenScanAttempts: 300, + }} />

{t("scan_asset_qr")} From 41de7f7c07940c8aa320155dd05c46da413c829f Mon Sep 17 00:00:00 2001 From: Devdeep Ghosh Date: Sun, 14 Apr 2024 22:45:31 +0530 Subject: [PATCH 5/5] Replaced deprecated package react-qr-reader with @yudiel/react-qr-scanner --- package-lock.json | 50 ----------------------------------------------- package.json | 1 - 2 files changed, 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0418f57397f..5799bea363f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,6 @@ "react-markdown": "^8.0.7", "react-pdf": "^7.7.1", "react-player": "^2.13.0", - "react-qr-reader": "^2.2.1", "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1", @@ -15406,11 +15405,6 @@ "verror": "1.10.0" } }, - "node_modules/jsqr": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz", - "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" - }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -20755,20 +20749,6 @@ "react": ">=16.6.0" } }, - "node_modules/react-qr-reader": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-2.2.1.tgz", - "integrity": "sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==", - "dependencies": { - "jsqr": "^1.2.0", - "prop-types": "^15.7.2", - "webrtc-adapter": "^7.2.1" - }, - "peerDependencies": { - "react": "~16", - "react-dom": "~16" - } - }, "node_modules/react-redux": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", @@ -21981,18 +21961,6 @@ "node": ">= 10.13.0" } }, - "node_modules/rtcpeerconnection-shim": { - "version": "1.2.15", - "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz", - "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==", - "dependencies": { - "sdp": "^2.6.0" - }, - "engines": { - "node": ">=6.0.0", - "npm": ">=3.10.0" - } - }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -22128,11 +22096,6 @@ "loose-envify": "^1.1.0" } }, - "node_modules/sdp": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz", - "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==" - }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -25914,19 +25877,6 @@ "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==", "dev": true }, - "node_modules/webrtc-adapter": { - "version": "7.7.1", - "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz", - "integrity": "sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==", - "dependencies": { - "rtcpeerconnection-shim": "^1.2.15", - "sdp": "^2.12.0" - }, - "engines": { - "node": ">=6.0.0", - "npm": ">=3.10.0" - } - }, "node_modules/whatwg-url": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", diff --git a/package.json b/package.json index 8a1f6b810d3..2021c0440a2 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "react-markdown": "^8.0.7", "react-pdf": "^7.7.1", "react-player": "^2.13.0", - "react-qr-reader": "^2.2.1", "react-redux": "^8.1.1", "react-transition-group": "^4.4.5", "react-webcam": "^7.1.1",