From 2def7c24ae8e92f13cda1c2b2b722e38f466d73a Mon Sep 17 00:00:00 2001 From: Suprawich <112562696+Suprawich@users.noreply.github.com> Date: Thu, 27 Jul 2023 23:20:21 +0700 Subject: [PATCH 1/4] feat: scan qr --- package.json | 1 + pnpm-lock.yaml | 55 +++++++++++++++++++++++++++++++++++ src/pages/scan.tsx | 72 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 src/pages/scan.tsx diff --git a/package.json b/package.json index b1bc9f8..99cfc59 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", + "react-qr-reader": "3.0.0-beta-1", "tailwindcss": "3.3.2" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 977124a..6b46a73 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-qr-reader: + specifier: 3.0.0-beta-1 + version: 3.0.0-beta-1(react-dom@18.2.0)(react@18.2.0) tailwindcss: specifier: 3.3.2 version: 3.3.2(ts-node@10.9.1) @@ -310,6 +313,7 @@ packages: /@emotion/memoize@0.7.4: resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + requiresBuild: true dev: false optional: true @@ -764,6 +768,31 @@ packages: eslint-visitor-keys: 3.4.1 dev: true + /@zxing/browser@0.0.7(@zxing/library@0.18.6): + resolution: {integrity: sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==} + peerDependencies: + '@zxing/library': ^0.18.3 + dependencies: + '@zxing/library': 0.18.6 + optionalDependencies: + '@zxing/text-encoding': 0.9.0 + dev: false + + /@zxing/library@0.18.6: + resolution: {integrity: sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==} + engines: {node: '>= 10.4.0'} + dependencies: + ts-custom-error: 3.3.1 + optionalDependencies: + '@zxing/text-encoding': 0.9.0 + dev: false + + /@zxing/text-encoding@0.9.0: + resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==} + requiresBuild: true + dev: false + optional: true + /JSONStream@1.3.5: resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==} hasBin: true @@ -3905,6 +3934,19 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true + /react-qr-reader@3.0.0-beta-1(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + dependencies: + '@zxing/browser': 0.0.7(@zxing/library@0.18.6) + '@zxing/library': 0.18.6 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + rollup: 2.79.1 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -4073,6 +4115,14 @@ packages: glob: 7.2.3 dev: true + /rollup@2.79.1: + resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} + engines: {node: '>=10.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: false + /run-applescript@5.0.0: resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==} engines: {node: '>=12'} @@ -4520,6 +4570,11 @@ packages: resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==} dev: false + /ts-custom-error@3.3.1: + resolution: {integrity: sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==} + engines: {node: '>=14.0.0'} + dev: false + /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: false diff --git a/src/pages/scan.tsx b/src/pages/scan.tsx new file mode 100644 index 0000000..e30325c --- /dev/null +++ b/src/pages/scan.tsx @@ -0,0 +1,72 @@ +import React, { useState, useRef } from 'react'; +import { QrReader } from 'react-qr-reader'; +import { motion } from 'framer-motion'; +import { XMarkIcon } from '@heroicons/react/24/solid'; + +function Scan() { + const [data, setData] = useState(''); + const [showModal, setShowModal] = useState(false); + + const handleScanResult = ( + result: { text: React.SetStateAction }, + error: any + ) => { + if (result) { + setData(result.text); + setShowModal(true); + } + if (error) { + console.info(error); + } + }; + + return ( +
+
+ + +
+ +
+
+
+
+ {/* {data && ( + + {data} + + )} */} + {showModal ? ( +
+ + {data} + +

+ Tap here to open the link +

+
+ ) : ( +

+ Please scan a QR code +

+ )} +
+
+
+ ); +} + +export default Scan; From a9c9eb605bdda0888d32330f15c3c986c21bb18c Mon Sep 17 00:00:00 2001 From: Suprawich <112562696+Suprawich@users.noreply.github.com> Date: Sat, 29 Jul 2023 23:11:48 +0700 Subject: [PATCH 2/4] fix: fix from comment & close button --- src/pages/scan.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/pages/scan.tsx b/src/pages/scan.tsx index e30325c..1539dac 100644 --- a/src/pages/scan.tsx +++ b/src/pages/scan.tsx @@ -2,6 +2,8 @@ import React, { useState, useRef } from 'react'; import { QrReader } from 'react-qr-reader'; import { motion } from 'framer-motion'; import { XMarkIcon } from '@heroicons/react/24/solid'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; function Scan() { const [data, setData] = useState(''); @@ -20,6 +22,8 @@ function Scan() { } }; + const router = useRouter(); + return (
@@ -33,27 +37,23 @@ function Scan() { animate={{ opacity: [0.25, 0.5, 1, 0.5, 0.25] }} transition={{ duration: 1, repeat: Infinity }} > -
- -
+
- {/* {data && ( - - {data} - - )} */} {showModal ? (
- {data} - +

Tap here to open the link

From 5f10d96d1c459d1e56af79038f19c1b484f923f6 Mon Sep 17 00:00:00 2001 From: Suprawich <112562696+Suprawich@users.noreply.github.com> Date: Sun, 30 Jul 2023 00:16:59 +0700 Subject: [PATCH 3/4] fix: delete inset-0 --- src/pages/scan.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/scan.tsx b/src/pages/scan.tsx index 1539dac..edb1ae1 100644 --- a/src/pages/scan.tsx +++ b/src/pages/scan.tsx @@ -44,7 +44,7 @@ function Scan() {
-
+
{showModal ? (
From 7e284c2a3e807e03b8711a894526bf2fa1904761 Mon Sep 17 00:00:00 2001 From: Suprawich <112562696+Suprawich@users.noreply.github.com> Date: Sun, 30 Jul 2023 03:18:38 +0700 Subject: [PATCH 4/4] fix: result type change --- src/pages/scan.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/pages/scan.tsx b/src/pages/scan.tsx index edb1ae1..14d0f21 100644 --- a/src/pages/scan.tsx +++ b/src/pages/scan.tsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import { QrReader } from 'react-qr-reader'; import { motion } from 'framer-motion'; import { XMarkIcon } from '@heroicons/react/24/solid'; @@ -9,10 +9,7 @@ function Scan() { const [data, setData] = useState(''); const [showModal, setShowModal] = useState(false); - const handleScanResult = ( - result: { text: React.SetStateAction }, - error: any - ) => { + const handleScanResult = (result: any, error: any) => { if (result) { setData(result.text); setShowModal(true);