First instance of upgrading QR scanner

acmutsa · Jan 27, 2025 · 999926f · 999926f
1 parent 45177d1
commit 999926f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 46 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -42,7 +42,7 @@
     "@vercel/blob": "^0.10.0",
     "@vercel/kv": "^2.0.0",
     "@vercel/postgres": "^0.9.0",
-    "@yudiel/react-qr-scanner": "^1.1.9",
+    "@yudiel/react-qr-scanner": "^2.1.0",
     "autoprefixer": "10.4.19",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",

diff --git a/apps/web/src/components/admin/scanner/CheckinScanner.tsx b/apps/web/src/components/admin/scanner/CheckinScanner.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { QrScanner } from "@yudiel/react-qr-scanner";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import superjson from "superjson";
 import { checkInUserToHackathon } from "@/actions/admin/scanner-admin-actions";
 import { type QRDataInterface } from "@/lib/utils/shared/qr";
@@ -130,16 +130,16 @@ export default function CheckinScanner({
 			<div className="flex h-dvh flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
-						<QrScanner
-							onDecode={(result) => {
+						<Scanner
+							onScan={(result) => {
 								const params = new URLSearchParams(
 									searchParams.toString(),
 								);
 								if (!params.has("user")) {
 									setScanLoading(true);
 									const qrParsedData =
 										superjson.parse<QRDataInterface>(
-											result,
+											result[0].rawValue,
 										);
 									params.set("user", qrParsedData.userID);
 									params.set(
@@ -153,11 +153,13 @@ export default function CheckinScanner({
 									);
 								}
 							}}
-							onError={(error) => console.log(error?.message)}
-							containerStyle={{
-								width: "100vw",
-								maxWidth: "500px",
-								margin: "0",
+							onError={(error) => console.log(error)}
+							styles={{
+								container: {
+									width: "100vw",
+									maxWidth: "500px",
+									margin: "0",
+								},
 							}}
 						/>
 					</div>

diff --git a/apps/web/src/components/admin/scanner/PassScanner.tsx b/apps/web/src/components/admin/scanner/PassScanner.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { QrScanner } from "@yudiel/react-qr-scanner";
+import { Scanner } from "@yudiel/react-qr-scanner";
 import superjson from "superjson";
 import { createScan } from "@/actions/admin/scanner-admin-actions";
 import { useAction } from "next-safe-action/hooks";
@@ -99,16 +99,16 @@ export default function PassScanner({
 			<div className="flex h-dvh flex-col items-center justify-center pt-32">
 				<div className="flex w-screen flex-col items-center justify-center gap-5">
 					<div className="mx-auto aspect-square w-screen max-w-[500px] overflow-hidden">
-						<QrScanner
-							onDecode={(result) => {
+						<Scanner
+							onScan={(result) => {
 								const params = new URLSearchParams(
 									searchParams.toString(),
 								);
 								if (!params.has("user")) {
 									setScanLoading(true);
 									const qrParsedData =
 										superjson.parse<QRDataInterface>(
-											result,
+											result[0].rawValue,
 										);
 									params.set("user", qrParsedData.userID);
 									params.set(
@@ -122,11 +122,13 @@ export default function PassScanner({
 									);
 								}
 							}}
-							onError={(error) => console.log(error?.message)}
-							containerStyle={{
-								width: "100vw",
-								maxWidth: "500px",
-								margin: "0",
+							onError={(error) => console.log(error)}
+							styles={{
+								container: {
+									width: "100vw",
+									maxWidth: "500px",
+									margin: "0",
+								},
 							}}
 						/>
 					</div>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml