react: improve result display of barcode & vin result toast

Author: Nikituh

react-js/src/pages/BarcodeScannerPage.tsx

@@ -14,7 +14,12 @@ export default function BarcodeScannerPage() {
     const [toast, setToast] = React.useState<string | undefined>(undefined);
 
     const onBarcodesDetected = (result: BarcodeScannerResultWithSize) => {
-        setToast(JSON.stringify(result));
+
+        let text = "";
+        result.barcodes.forEach((barcode) => {
+            text += `${barcode.text} (${barcode.format})\n`;
+        });
+        setToast(text);
     };
 
     useEffect(() => {

react-js/src/pages/VinScannerPage.tsx

@@ -10,7 +10,16 @@ export default function VINScannerPage() {
     const [toast, setToast] = React.useState<string | undefined>(undefined);
 
     const onTextDetected = (result: VinScannerResult) => {
-        setToast(JSON.stringify(result));
+
+        let text = "";
+
+        if (result.barcodeResult.extractedVIN) {
+            text += `Barcode: ${result.barcodeResult.extractedVIN}\n`;
+        }
+        if (result.textResult.rawText) {
+            text += `Text: ${result.textResult.rawText} (${result.textResult.confidence.toFixed(2)}%)\n`;
+        }
+        setToast(text);
     };
 
     useEffect(() => {