Improve Scanner (#430)

* feat(Scanner): add sound and vibration * chore: remove unused scanner package * ci: disable Cypress tests * ci: update actions * fix: ignore bl-api on build * feat(Scanner): upgrade and improve vibration
boklisten · May 30, 2024 · 7570625 · 7570625
1 parent 890c10f
commit 7570625
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 188 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -10,20 +10,20 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Cache install
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./node_modules/
           key: ${{ github.sha }}-install
       - name: Cache Cypress
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.cache/Cypress/
           key: ${{ github.sha }}-cypress
@@ -32,9 +32,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: install
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Retrive install cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./node_modules/
           key: ${{ github.sha }}-install
@@ -45,9 +45,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: install
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Retrive install cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./node_modules/
           key: ${{ github.sha }}-install
@@ -57,7 +57,7 @@ jobs:
   setup_backend:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           path: "./bl-api"
           repository: boklisten/bl-api
@@ -67,7 +67,7 @@ jobs:
           yarn install --frozen-lockfile
           yarn build
       - name: Cache backend
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./bl-api/
           key: ${{ github.sha }}-backend
@@ -76,14 +76,14 @@ jobs:
     runs-on: ubuntu-latest
     needs: [install, setup_backend]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Retrive Install Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./node_modules/
           key: ${{ github.sha }}-install
       - name: Retrive Next cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ${{ github.workspace }}/.next/cache
           # Generate a new cache whenever packages or source files change.
@@ -92,14 +92,14 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
       - name: Retrive backend cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./bl-api/
           key: ${{ github.sha }}-backend
       - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.7.0
+        uses: supercharge/mongodb-github-action@1.10.0
         with:
-          mongodb-version: "4.4"
+          mongodb-version: "7.0"
       - name: Start backend
         run: |
           cd bl-api
@@ -139,89 +139,88 @@ jobs:
       - name: Build
         run: yarn build
       - name: Cache build
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ./.next/
           key: ${{ github.sha }}-build
-
-  tests:
-    runs-on: ubuntu-latest
-    needs: [build]
-    strategy:
-      fail-fast: false
-      matrix:
-        containers: [1, 2, 3, 4]
-    steps:
-      - uses: actions/checkout@v2
-      - name: Retrive install cache
-        uses: actions/cache@v2
-        with:
-          path: ./node_modules/
-          key: ${{ github.sha }}-install
-      - name: Retrive Cypress cache
-        uses: actions/cache@v2
-        with:
-          path: ~/.cache/Cypress/
-          key: ${{ github.sha }}-cypress
-      - name: Retrive build cache
-        uses: actions/cache@v2
-        with:
-          path: ./.next/
-          key: ${{ github.sha }}-build
-      - name: Retrive backend cache
-        uses: actions/cache@v2
-        with:
-          path: ./bl-api/
-          key: ${{ github.sha }}-backend
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.7.0
-        with:
-          mongodb-version: "4.4"
-      - name: Start backend
-        run: |
-          cd bl-api
-          yarn load_fixtures
-          yarn serve &
-        env:
-          PORT: 1337
-          BLAPI_HOST: localhost
-          BLAPI_PORT: 1337
-          MONGODB_URI: mongodb://localhost:27017/test
-          SERVER_PATH: /
-          NODE_ENV: dev
-          LOG_LEVEL: silly
-          URI_WHITELIST: localhost:3000 http://localhost:3000
-          ACCESS_TOKEN_SECRET: not_secret_at_all
-          BL_API_URI: http://localhost:1337/
-          CLIENT_URI: http://localhost:3000/
-          REFRESH_TOKEN_SECRET: not_the_prod_secret
-          DIBS_CHECKOUT_KEY: ${{ secrets.DIBS_CHECKOUT_KEY }}
-          DIBS_SECRET_KEY: ${{ secrets.DIBS_CHECKOUT_SECRET }}
-          DIBS_URI: https://test.api.dibspayment.eu/v1/
-          FACEBOOK_CLIENT_ID: 123
-          FACEBOOK_SECRET: 123
-          FEIDE_AUTHORIZATION_URL: https://auth.dataporten.no/oauth/authorization
-          FEIDE_CLIENT_ID: yello
-          FEIDE_SECRET: foo
-          FEIDE_TOKEN_URL: https://auth.dataporten.no/oauth/token
-          FEIDE_USER_INFO_URL: https://auth.dataporten.no/userinfo
-          GOOGLE_CLIENT_ID: totally_legit
-          GOOGLE_SECRET: nope
-          SENDGRID_API_KEY: foo
-          TWILIO_SMS_AUTH_TOKEN: foo
-          TWILIO_SMS_SID: ACfoo
-          TWILIO_STATUS_CALLBACK_URL: foo
-          BRING_API_KEY: ${{ secrets.BRING_API_KEY }}
-          BRING_API_ID: ${{ secrets.BRING_API_ID }}
-      - name: Cypress run
-        uses: cypress-io/github-action@v5.3.1
-        with:
-          install: false
-          start: yarn serve
-          record: true
-          parallel: true
-          group: "UI - Electron"
-        env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          BRING_API_KEY: ${{ secrets.BRING_API_KEY }}
-          BRING_API_ID: ${{ secrets.BRING_API_ID }}
+#  tests:
+#    runs-on: ubuntu-latest
+#    needs: [build]
+#    strategy:
+#      fail-fast: false
+#      matrix:
+#        containers: [1, 2, 3, 4]
+#    steps:
+#      - uses: actions/checkout@v4
+#      - name: Retrive install cache
+#        uses: actions/cache@v4
+#        with:
+#          path: ./node_modules/
+#          key: ${{ github.sha }}-install
+#      - name: Retrive Cypress cache
+#        uses: actions/cache@v4
+#        with:
+#          path: ~/.cache/Cypress/
+#          key: ${{ github.sha }}-cypress
+#      - name: Retrive build cache
+#        uses: actions/cache@v4
+#        with:
+#          path: ./.next/
+#          key: ${{ github.sha }}-build
+#      - name: Retrive backend cache
+#        uses: actions/cache@v4
+#        with:
+#          path: ./bl-api/
+#          key: ${{ github.sha }}-backend
+#      - name: Start MongoDB
+#        uses: supercharge/mongodb-github-action@1.7.0
+#        with:
+#          mongodb-version: "4.4"
+#      - name: Start backend
+#        run: |
+#          cd bl-api
+#          yarn load_fixtures
+#          yarn serve &
+#        env:
+#          PORT: 1337
+#          BLAPI_HOST: localhost
+#          BLAPI_PORT: 1337
+#          MONGODB_URI: mongodb://localhost:27017/test
+#          SERVER_PATH: /
+#          NODE_ENV: dev
+#          LOG_LEVEL: silly
+#          URI_WHITELIST: localhost:3000 http://localhost:3000
+#          ACCESS_TOKEN_SECRET: not_secret_at_all
+#          BL_API_URI: http://localhost:1337/
+#          CLIENT_URI: http://localhost:3000/
+#          REFRESH_TOKEN_SECRET: not_the_prod_secret
+#          DIBS_CHECKOUT_KEY: ${{ secrets.DIBS_CHECKOUT_KEY }}
+#          DIBS_SECRET_KEY: ${{ secrets.DIBS_CHECKOUT_SECRET }}
+#          DIBS_URI: https://test.api.dibspayment.eu/v1/
+#          FACEBOOK_CLIENT_ID: 123
+#          FACEBOOK_SECRET: 123
+#          FEIDE_AUTHORIZATION_URL: https://auth.dataporten.no/oauth/authorization
+#          FEIDE_CLIENT_ID: yello
+#          FEIDE_SECRET: foo
+#          FEIDE_TOKEN_URL: https://auth.dataporten.no/oauth/token
+#          FEIDE_USER_INFO_URL: https://auth.dataporten.no/userinfo
+#          GOOGLE_CLIENT_ID: totally_legit
+#          GOOGLE_SECRET: nope
+#          SENDGRID_API_KEY: foo
+#          TWILIO_SMS_AUTH_TOKEN: foo
+#          TWILIO_SMS_SID: ACfoo
+#          TWILIO_STATUS_CALLBACK_URL: foo
+#          BRING_API_KEY: ${{ secrets.BRING_API_KEY }}
+#          BRING_API_ID: ${{ secrets.BRING_API_ID }}
+#      - name: Cypress run
+#        uses: cypress-io/github-action@v5.3.1
+#        with:
+#          install: false
+#          start: yarn serve
+#          record: true
+#          parallel: true
+#          group: "UI - Electron"
+#        env:
+#          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+#          BRING_API_KEY: ${{ secrets.BRING_API_KEY }}
+#          BRING_API_ID: ${{ secrets.BRING_API_ID }}
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@mui/material": "^5.15.15",
     "@mui/x-date-pickers": "^7.3.1",
     "@reduxjs/toolkit": "^2.2.3",
+    "@yudiel/react-qr-scanner": "^2.0.1",
     "axios": "^1.6.8",
     "draft-js": "^0.11.7",
     "moment": "^2.30.1",
@@ -39,7 +40,6 @@
     "react-draft-wysiwyg": "^1.15.0",
     "react-hook-form": "^7.51.3",
     "react-jwt": "^1.2.1",
-    "react-qr-barcode-scanner": "^1.0.6",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.1",
     "sanitize-html": "^2.13.0",

diff --git a/src/components/matches/BarcodeQrScanner.tsx b/src/components/matches/BarcodeQrScanner.tsx
diff --git a/src/components/matches/Scanner/Scanner.tsx b/src/components/matches/Scanner/Scanner.tsx
@@ -77,6 +77,7 @@ const Scanner = ({ forceUpdate }: { forceUpdate: () => void }) => {
         "transfer-item",
         JSON.stringify({ blid: scannedText }),
       );
+      navigator.vibrate(100);
       const feedback = response.data?.data?.[0]?.feedback;
       displayFeedback(
         feedback ?? "Boken har blitt registrert!",

diff --git a/src/components/matches/Scanner/ScannerModal.tsx b/src/components/matches/Scanner/ScannerModal.tsx
@@ -1,8 +1,6 @@
-import CropFreeIcon from "@mui/icons-material/CropFree";
-import { Box, Button, Container, Modal, Typography } from "@mui/material";
-import React, { useCallback } from "react";
-
-import BarcodeQrScanner from "@/components/matches/BarcodeQrScanner";
+import { Box, Button, Container, Modal } from "@mui/material";
+import { Scanner } from "@yudiel/react-qr-scanner";
+import React from "react";
 
 const ScannerModal = ({
   open,
@@ -14,8 +12,6 @@ const ScannerModal = ({
   // eslint-disable-next-line no-unused-vars
   handleSubmit: (scannedText: string) => Promise<boolean>;
 }) => {
-  const handleScan = useCallback(handleSubmit, [handleSubmit]);
-
   return (
     <Modal open={open}>
       <Container
@@ -27,10 +23,6 @@ const ScannerModal = ({
           height: "100vh",
         }}
       >
-        <Typography variant={"h4"} sx={{ zIndex: 100 }}>
-          Unik ID
-        </Typography>
-        <CropFreeIcon sx={{ zIndex: 100, fontSize: "200px" }} />
         <Button
           color={"info"}
           sx={{ position: "absolute", top: 80, zIndex: 100 }}
@@ -39,8 +31,17 @@ const ScannerModal = ({
         >
           Lukk
         </Button>
-        <Box sx={{ position: "absolute" }}>
-          <BarcodeQrScanner handleScan={handleScan} />
+        <Box sx={{ position: "absolute", width: "100%" }}>
+          <Scanner
+            constraints={{ facingMode: "environment" }}
+            formats={["qr_code", "ean_8", "ean_13"]}
+            components={{ torch: true }}
+            onScan={(detectedCodes) => {
+              for (const code of detectedCodes) {
+                handleSubmit(code.rawValue);
+              }
+            }}
+          />
         </Box>
       </Container>
     </Modal>

diff --git a/tsconfig.json b/tsconfig.json
@@ -36,5 +36,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "bl-api"]
 }