feat: display epc data for the scanned code

Author: cufarvid

package.json

@@ -12,6 +12,7 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@yudiel/react-qr-scanner": "^2.0.8",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { IDetectedBarcode, Scanner } from '@yudiel/react-qr-scanner';
 import QRCode from 'react-qr-code';
+import { Camera, ChevronDown, ChevronUp, RefreshCw } from 'lucide-react';
 import {
   Card,
   CardContent,
@@ -10,24 +11,35 @@ import {
 } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Camera, RefreshCw } from 'lucide-react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 
-import { generateEpcQr, parseUpnQr } from './lib/qr';
+import {
+  generateEpcQr,
+  generateEpcQrString,
+  parseUpnQr,
+  type EpcQrData,
+} from './lib/qr';
+import { EpcQrDataDisplay } from './components/EpcQrDataDisplay';
 
 function App() {
-  const [code, setCode] = useState<string | null>(null);
+  const [epcData, setEpcData] = useState<EpcQrData | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isScanning, setIsScanning] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleOnScan = (data: IDetectedBarcode[]) => {
     const [scanResult] = data;
     if (!scanResult || scanResult.format === 'unknown') return;
 
     try {
-      const upnQrCode = parseUpnQr(scanResult.rawValue);
-      const epcQrCode = generateEpcQr(upnQrCode);
+      const upnQrData = parseUpnQr(scanResult.rawValue);
+      const epcQrData = generateEpcQr(upnQrData);
 
-      setCode(epcQrCode);
+      setEpcData(epcQrData);
       setIsScanning(false);
       setError(null);
     } catch (error) {
@@ -38,9 +50,10 @@ function App() {
   };
 
   const handleReset = () => {
-    setCode(null);
+    setEpcData(null);
     setError(null);
     setIsScanning(true);
+    setIsOpen(false);
   };
 
   return (
@@ -57,10 +70,32 @@ function App() {
             </div>
           ) : (
             <div className="flex flex-col items-center">
-              {code && <QRCode value={code} />}
+              {epcData && <QRCode value={generateEpcQrString(epcData)} />}
               <Button onClick={handleReset} className="mt-4">
                 <RefreshCw className="mr-2 h-4 w-4" /> Scan Another Code
               </Button>
+
+              {epcData && (
+                <Collapsible
+                  open={isOpen}
+                  onOpenChange={setIsOpen}
+                  className="w-full mt-4"
+                >
+                  <CollapsibleTrigger asChild>
+                    <Button variant="outline" className="w-full">
+                      {isOpen ? 'Hide' : 'Show'} EPC Data
+                      {isOpen ? (
+                        <ChevronUp className="ml-2 h-4 w-4" />
+                      ) : (
+                        <ChevronDown className="ml-2 h-4 w-4" />
+                      )}
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="mt-2">
+                    <EpcQrDataDisplay data={epcData} />
+                  </CollapsibleContent>
+                </Collapsible>
+              )}
             </div>
           )}
 

src/App.tsx

@@ -0,0 +1,38 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { type EpcQrData } from '@/lib/qr';
+
+const fieldNameMap: Record<keyof EpcQrData, string> = {
+  serviceTag: 'Service Tag',
+  version: 'Version',
+  encoding: 'Character set',
+  identification: 'Identification',
+  bic: 'BIC',
+  recipient: 'Name',
+  iban: 'IBAN',
+  amount: 'Amount',
+  purposeCode: 'Purpose',
+  reference: 'Reference',
+  text: 'Text',
+  info: 'Information',
+};
+
+interface EpcQrDataDisplayProps {
+  data: EpcQrData;
+}
+
+export function EpcQrDataDisplay({ data }: EpcQrDataDisplayProps) {
+  return (
+    <Card>
+      <CardContent className="pt-4">
+        <dl className="space-y-2 text-sm">
+          {(Object.keys(data) as Array<keyof EpcQrData>).map((key) => (
+            <div key={key} className="flex">
+              <dt className="font-semibold w-1/3">{fieldNameMap[key]}:</dt>
+              <dd className="w-2/3">{data[key]}</dd>
+            </div>
+          ))}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

src/components/EpcQrDataDisplay.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };