Update QR code scanner package and replace deprecated QrReader with S…

…canner component from "@yudiel/react-qr-scanner" package.
thedevildude · Apr 14, 2024 · 2a895b6 · 2a895b6
1 parent 9246320
commit 2a895b6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git 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
@@ -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 = ({
         <h2 className="mb-4 self-center text-center text-lg">
           {description || "Scan QR code!"}
         </h2>
-        <QrReader
-          delay={300}
-          onScan={onScan}
-          onError={(e: any) =>
+        <Scanner
+          onResult={onScan}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
       </div>
     </DialogModal>
@@ -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
@@ -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) => {
           <CareIcon icon="l-times" className="mr-2 text-lg" />
           {t("close_scanner")}
         </button>
-        <QrReader
-          delay={300}
-          onScan={(assetId: any) => (assetId ? parseAssetId(assetId) : null)}
-          onError={(e: any) =>
+        <Scanner
+          onResult={(assetId) => (assetId ? parseAssetId(assetId) : null)}
+          onError={(e) =>
             Notification.Error({
               msg: e.message,
             })
           }
-          style={{ width: "100%" }}
+          options={{
+            delayBetweenScanAttempts: 300,
+          }}
         />
         <h2 className="self-center text-center text-lg">
           {t("scan_asset_qr")}