First instance of upgrading QR scanner (#159)

Author: jacobellerbrock

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",

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>

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>