✅ Exercise 3 - Dedicated worker for QR code scanning

client/index.js

@@ -23,6 +23,8 @@ import 'file-loader?name=./apple-touch-icon-180x180.png!./img/apple-touch-icon-1
 import 'file-loader?name=./web-app-manifest.json!./web-app-manifest.json';
 import 'file-loader?name=./apple-touch-icon-180x180.png!./img/apple-touch-icon-180x180.png';
 
+import 'worker-loader?name=./qr-worker.js!./qr-worker.js';
+
 ReactDOM.render((<App />), document.getElementById('root'));
 
 if (module.hot) {

client/qr-worker.js

@@ -0,0 +1,18 @@
+import QrCode from 'qrcode-reader';
+import { qrCodeStringToObject } from './utils/qrcode';
+
+self.onmessage = evt => {
+  let imageBuffer = evt.data;
+
+  // Decode the QR code
+  let qr = new QrCode();
+  qr.callback = function(error, rawResult) {
+    if(error) {
+      self.postMessage({ error });
+      return;
+    }
+    let result = qrCodeStringToObject(rawResult.result);
+    self.postMessage({data: result});
+  }
+  qr.decode(imageBuffer);
+}

client/utils/qrcode.js

@@ -1,4 +1,3 @@
-import QrCode from 'qrcode-reader';
 
 /**
  * Convert QRcode data into a grocery item
@@ -81,17 +80,28 @@ export function onQrCodeScan(imageBuffer, cartStore) {
   return new Promise((resolve/*, reject*/) => {
 
     // BEGIN MAIN THREAD SOLUTION
-    let qr = new QrCode();
-    qr.callback = function(error, rawResult) {
-      if(error) {
-        self.postMessage({ error });
-        return;
+    // let qr = new QrCode();
+    // qr.callback = function(error, rawResult) {
+    //   if(error) {
+    //     self.postMessage({ error });
+    //     return;
+    //   }
+    //   let result = qrCodeStringToObject(rawResult.result);
+    //   resolve(result);
+    // }
+    // qr.decode(imageBuffer);
+    // END MAIN THREAD SOLUTION
+
+    // BEGIN DEDICATED WORKER SOLUTION
+    let worker = new Worker('qr-worker.js');
+    worker.postMessage(imageBuffer);
+    worker.onmessage = evt => {
+      if ('data' in evt.data) {
+        // success!
+        resolve(evt.data.data);
       }
-      let result = qrCodeStringToObject(rawResult.result);
-      resolve(result);
     }
-    qr.decode(imageBuffer);
-    // END MAIN THREAD SOLUTION
+    // END DEDICATED WORKER SOLUTION
 
   }).then((qrData) => {
     cartStore.addItemToCart(qrData);