From 047350febd7118669b433e953da97ed1e507fcae Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Thu, 31 Oct 2024 11:42:10 +0100
Subject: [PATCH] Add scanning (#9)

* Update plan

* Fix same key error

* Add a dialog

* Add naive scanning.

* Add naive code handling.

* Replace codeType by codeFormat.

* Fix ts warning, make card code input disabled by default.

* Adjust scanner

* Add explanation text.

* Exclude .next from tests.

* Make layout responsive.

* Create scannerReducer

* Use scannerReducer

* Move scanner reducer to create-card-form

* Cleanup

* Adjust names.

* Cleanup in scanner

* Display toggle button conditionally.

* Disable strict mode test.

* Set device id directly

* Comment constrains

* Enable strict mode

* Cleanup.

* Increase required devices count for switch.

* Cleanup

* Update reducer.

* Use isModalVisible

* Adjust reducer names.
---
 app/(homescreens)/my-cards/my-cards.tsx       |   2 +-
 app/create-card/create-card-form.tsx          | 302 ++++++++++++------
 app/create-card/createCardFormReducer.spec.ts |  80 +++++
 app/create-card/createCardFormReducer.ts      |  70 ++++
 app/create-card/scanner.tsx                   | 127 ++++++++
 app/layout.tsx                                |   9 +-
 app/lib/app-state/reducer.spec.ts             |   7 +-
 app/lib/app-state/reducer.ts                  |   5 +-
 app/lib/predefined-companies.ts               |  29 +-
 app/lib/shared.ts                             |   5 -
 app/ui/text-field.tsx                         |   3 +
 next.config.mjs                               |   4 +-
 package-lock.json                             |   7 +
 package.json                                  |   1 +
 plan.md                                       |   6 +-
 tsconfig.json                                 |   2 +-
 16 files changed, 527 insertions(+), 132 deletions(-)
 create mode 100644 app/create-card/createCardFormReducer.spec.ts
 create mode 100644 app/create-card/createCardFormReducer.ts
 create mode 100644 app/create-card/scanner.tsx

diff --git a/app/(homescreens)/my-cards/my-cards.tsx b/app/(homescreens)/my-cards/my-cards.tsx
index 768bbb7..0c0c7f4 100644
--- a/app/(homescreens)/my-cards/my-cards.tsx
+++ b/app/(homescreens)/my-cards/my-cards.tsx
@@ -12,7 +12,7 @@ export default function MyCards() {
   return (
     <ul className="menu menu-sm rounded-box gap-2">
       {state.cards.map(card => (
-        <li key={card.name}>
+        <li key={card.id}>
           <Link
             href={{
               pathname: Routes.Card,
diff --git a/app/create-card/create-card-form.tsx b/app/create-card/create-card-form.tsx
index 432a809..e314e4a 100644
--- a/app/create-card/create-card-form.tsx
+++ b/app/create-card/create-card-form.tsx
@@ -1,10 +1,17 @@
 'use client';
 
+import Scanner from '@/app/create-card/scanner';
+import {
+  initialState,
+  CreateCardFormActions,
+  CreateCardFormActionTypes,
+  createCardFormReducer,
+  CreateCardFormState,
+} from '@/app/create-card/createCardFormReducer';
 import useAppState from '@/app/lib/app-state/app-state';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import {
   CardIcon,
-  CodeType,
   colorNames,
   iconsMap,
   Routes,
@@ -13,16 +20,22 @@ import {
 import { DropdownField } from '@/app/ui/dropdown-field';
 import { TextAreaField } from '@/app/ui/text-area-field';
 import { TextField } from '@/app/ui/text-field';
-import { IconCamera, IconPalette } from '@tabler/icons-react';
-import Link from 'next/link';
+import {
+  IconCamera,
+  IconPalette,
+  IconRefresh,
+  IconX,
+} from '@tabler/icons-react';
+import { Html5QrcodeResult, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import Image from 'next/image';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { Reducer, useCallback, useEffect, useReducer, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
 enum FormNames {
   Name = 'name',
   Code = 'code',
-  CodeType = 'codeType',
+  CodeFormat = 'codeFormat',
   Note = 'note',
   Color = 'color',
   Icon = 'Icon',
@@ -31,7 +44,7 @@ enum FormNames {
 type CreateCardForm = {
   [FormNames.Name]: string;
   [FormNames.Code]: string;
-  [FormNames.CodeType]: string;
+  [FormNames.CodeFormat]: number;
   [FormNames.Note]: string;
   [FormNames.Color]: string | null;
   [FormNames.Icon]: string | SvgProps;
@@ -43,116 +56,205 @@ export default function CreateCardForm() {
   const predefinedCompany = predefinedCompanies.find(
     c => c.name === predefinedCompanyName
   );
-  const { register, handleSubmit, control, watch } = useForm<CreateCardForm>({
-    defaultValues: predefinedCompany
-      ? {
-          [FormNames.Name]: predefinedCompany.name,
-          [FormNames.Color]: null,
-          [FormNames.Icon]: predefinedCompany.svg,
-          [FormNames.CodeType]: predefinedCompany.codeType,
-        }
-      : {
-          [FormNames.CodeType]: CodeType.Barcode,
-        },
-  });
-  const [, dispatch] = useAppState();
+  const { register, handleSubmit, control, watch, setValue } =
+    useForm<CreateCardForm>({
+      defaultValues: predefinedCompany
+        ? {
+            [FormNames.Name]: predefinedCompany.name,
+            [FormNames.Color]: null,
+            [FormNames.Icon]: predefinedCompany.svg,
+            [FormNames.CodeFormat]: predefinedCompany.codeFormat,
+          }
+        : {
+            [FormNames.CodeFormat]: Html5QrcodeSupportedFormats.EAN_13,
+          },
+    });
+  const [, appDispatch] = useAppState();
+  const [{ devices, activeDevice, isModalVisible }, dispatch] = useReducer<
+    Reducer<CreateCardFormState, CreateCardFormActions>
+  >(createCardFormReducer, initialState);
   const router = useRouter();
+  const cameraModalRef = useRef<HTMLDialogElement>(null);
+  const handleCodeDetected = useCallback(
+    (text: string, { result }: Html5QrcodeResult) => {
+      setValue(FormNames.Code, text);
+      if (result.format?.format) {
+        setValue(FormNames.CodeFormat, result.format.format);
+      }
+      cameraModalRef.current?.close();
+    },
+    [setValue]
+  );
+  useEffect(() => {
+    const cameraModal = cameraModalRef.current;
+
+    const observer = new MutationObserver(function observerCallback(
+      mutations: MutationRecord[]
+    ) {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'open'
+        ) {
+          if (cameraModal) {
+            dispatch({
+              type: CreateCardFormActionTypes.UPDATE_MODAL_VISIBILITY,
+              payload: cameraModal.open,
+            });
+          }
+        }
+      }
+    });
+
+    if (cameraModal) {
+      observer.observe(cameraModal, { attributes: true });
+    }
+    return () => {
+      if (cameraModal) {
+        observer.disconnect();
+      }
+    };
+  }, []);
+
   return (
-    <form
-      className="px-4 py-6 w-full h-full"
-      onSubmit={handleSubmit(data => {
-        console.log('data', data);
-        dispatch({
-          type: 'ADD_CARD',
-          payload: {
-            name: data[FormNames.Name],
-            code: data[FormNames.Code],
-            note: data[FormNames.Note] || undefined,
-            bgColor: data[FormNames.Color] || null,
-            icon: (data[FormNames.Icon] as CardIcon) || null,
-            codeType: data[FormNames.CodeType] as CodeType,
-          },
-        });
-        router.replace(Routes.MyCards);
-      })}
-    >
-      <div className="flex gap-4">
+    <>
+      <form
+        className="px-4 py-6 w-full h-full"
+        onSubmit={handleSubmit(data => {
+          appDispatch({
+            type: 'ADD_CARD',
+            payload: {
+              name: data[FormNames.Name],
+              code: data[FormNames.Code],
+              note: data[FormNames.Note] || undefined,
+              bgColor: data[FormNames.Color] || null,
+              icon: (data[FormNames.Icon] as CardIcon) || null,
+              codeFormat: data[
+                FormNames.CodeFormat
+              ] as Html5QrcodeSupportedFormats,
+            },
+          });
+          router.replace(Routes.MyCards);
+        })}
+      >
+        <div className="flex gap-4">
+          <TextField
+            label="Card code"
+            name={FormNames.Code}
+            register={register}
+            disabled
+          />
+          <button
+            className="btn btn-primary btn-square mt-9"
+            onClick={() => {
+              cameraModalRef.current?.showModal();
+            }}
+            type="button"
+          >
+            <IconCamera className="w-6 h-6" />
+          </button>
+        </div>
         <TextField
-          label="Card code"
-          name={FormNames.Code}
+          label="Card name"
+          name={FormNames.Name}
           register={register}
         />
-        <Link
-          className="btn btn-primary btn-square mt-9"
-          href={Routes.ScanCard}
-        >
-          <IconCamera className="w-6 h-6" />
-        </Link>
-      </div>
-      <TextField label="Card name" name={FormNames.Name} register={register} />
-      <TextAreaField label="Note" name={FormNames.Note} register={register} />
-      {predefinedCompany ? (
-        <input type="hidden" {...register(FormNames.Color)} />
-      ) : (
-        <div className="flex gap-4">
+        <TextAreaField label="Note" name={FormNames.Note} register={register} />
+        {predefinedCompany ? (
+          <input type="hidden" {...register(FormNames.Color)} />
+        ) : (
+          <div className="flex gap-4">
+            <DropdownField
+              label="Background color"
+              dropdownClassName="dropdown-top"
+              options={Object.entries(colorNames).map(([hex, name]) => ({
+                label: (
+                  <div className="flex gap-2 items-center">
+                    <div className="w-4 h-4" style={{ backgroundColor: hex }} />
+                    <span>{name}</span>
+                  </div>
+                ),
+                value: hex,
+              }))}
+              control={control}
+              name={FormNames.Color}
+              watch={watch}
+            />
+            <button className="btn btn-primary btn-square mt-9">
+              <IconPalette className="w-6 h-6" />
+            </button>
+          </div>
+        )}
+        {predefinedCompany ? (
+          <label className={'form-control w-full'}>
+            <div className="label">
+              <span className="label-text">Company logo</span>
+            </div>
+            <div className="bg-background">
+              <input type="hidden" {...register(FormNames.Icon)} />
+              <Image
+                {...predefinedCompany.svg}
+                alt={predefinedCompany.name}
+                className="w-24 h-24"
+              />
+            </div>
+          </label>
+        ) : (
           <DropdownField
-            label="Background color"
+            label="Icon"
             dropdownClassName="dropdown-top"
-            options={Object.entries(colorNames).map(([hex, name]) => ({
+            options={Object.entries(iconsMap).map(([key, Icon]) => ({
               label: (
-                <div className="flex gap-2 items-center">
-                  <div className="w-4 h-4" style={{ backgroundColor: hex }} />
-                  <span>{name}</span>
-                </div>
+                <span>
+                  <Icon className="w-6 h-6" />
+                </span>
               ),
-              value: hex,
+              value: key,
             }))}
             control={control}
-            name={FormNames.Color}
+            name={FormNames.Icon}
             watch={watch}
           />
-          <button className="btn btn-primary btn-square mt-9">
-            <IconPalette className="w-6 h-6" />
+        )}
+        <div className="h-32" />
+        <footer className="btm-nav btm-nav-md text-base-content px-4">
+          <button className="btn btn-primary w-full" type="submit">
+            Create card
           </button>
-        </div>
-      )}
-      {predefinedCompany ? (
-        <label className={'form-control w-full'}>
-          <div className="label">
-            <span className="label-text">Company logo</span>
+        </footer>
+      </form>
+      <dialog id="camera-modal" className="modal" ref={cameraModalRef}>
+        <div className="modal-box w-full h-full max-h-full max-w-full overflow-clip lg:w-11/12 lg:h-5/6 lg:max-w-5xl lg:max-h-5xl">
+          <div className="grid justify-between items-center pb-4 grid-cols-[auto_1fr_auto] gap-4">
+            <button
+              className="btn btn-sm btn-circle btn-ghost"
+              onClick={() => cameraModalRef.current?.close()}
+            >
+              <IconX className="w-6 h-6" />
+            </button>
+            <h3 className="font-bold text-lg">Scan your code!</h3>
+            {devices.length > 1 ? (
+              <button
+                className="btn btn-sm btn-circle btn-ghost"
+                onClick={() => {
+                  dispatch({
+                    type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE,
+                  });
+                }}
+              >
+                <IconRefresh className="w-6 h-6" />
+              </button>
+            ) : null}
           </div>
-          <div className="bg-background">
-            <input type="hidden" {...register(FormNames.Icon)} />
-            <Image
-              {...predefinedCompany.svg}
-              alt={predefinedCompany.name}
-              className="w-24 h-24"
+          {isModalVisible && (
+            <Scanner
+              onCodeDetected={handleCodeDetected}
+              activeDevice={activeDevice}
+              dispatch={dispatch}
             />
-          </div>
-        </label>
-      ) : (
-        <DropdownField
-          label="Icon"
-          dropdownClassName="dropdown-top"
-          options={Object.entries(iconsMap).map(([key, Icon]) => ({
-            label: (
-              <span>
-                <Icon className="w-6 h-6" />
-              </span>
-            ),
-            value: key,
-          }))}
-          control={control}
-          name={FormNames.Icon}
-          watch={watch}
-        />
-      )}
-      <div className="h-32" />
-      <footer className="btm-nav btm-nav-md text-base-content px-4">
-        <button className="btn btn-primary w-full" type="submit">
-          Create card
-        </button>
-      </footer>
-    </form>
+          )}
+        </div>
+      </dialog>
+    </>
   );
 }
diff --git a/app/create-card/createCardFormReducer.spec.ts b/app/create-card/createCardFormReducer.spec.ts
new file mode 100644
index 0000000..c1bbedc
--- /dev/null
+++ b/app/create-card/createCardFormReducer.spec.ts
@@ -0,0 +1,80 @@
+import { describe, expect, it } from '@jest/globals';
+import {
+  CreateCardFormActionTypes,
+  createCardFormReducer,
+  CreateCardFormState,
+  SetDevicesAction,
+  ToggleActiveDeviceAction,
+  UpdateModalVisibilityAction,
+} from './createCardFormReducer';
+
+describe('createCardFormReducer', () => {
+  const initialState: CreateCardFormState = {
+    devices: [],
+    activeDevice: null,
+    isModalVisible: false,
+  };
+
+  it('should handle SET_DEVICES action', () => {
+    const devices = [
+      { id: '1', label: 'Camera 1' },
+      { id: '2', label: 'Camera 2' },
+    ];
+    const action: SetDevicesAction = {
+      type: CreateCardFormActionTypes.SET_DEVICES,
+      payload: devices,
+    };
+    const state = createCardFormReducer(initialState, action);
+    expect(state.devices).toEqual(devices);
+    expect(state.activeDevice).toEqual(devices[0]);
+  });
+
+  it('should handle TOGGLE_ACTIVE_DEVICE action', () => {
+    const devices = [
+      { id: '1', label: 'Camera 1' },
+      { id: '2', label: 'Camera 2' },
+    ];
+    const stateWithDevices: CreateCardFormState = {
+      ...initialState,
+      devices: devices,
+      activeDevice: devices[0],
+    };
+    const action: ToggleActiveDeviceAction = {
+      type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE,
+    };
+    const stateAfterToggle = createCardFormReducer(stateWithDevices, action);
+    expect(stateAfterToggle.activeDevice).toEqual(devices[1]);
+
+    // Toggle again to loop back to the first device
+    const stateAfterSecondToggle = createCardFormReducer(
+      stateAfterToggle,
+      action
+    );
+    expect(stateAfterSecondToggle.activeDevice).toEqual(devices[0]);
+  });
+
+  it('should handle TOGGLE_ACTIVE_DEVICE action for initial state', () => {
+    const action: ToggleActiveDeviceAction = {
+      type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE,
+    };
+    const stateAfterToggle = createCardFormReducer(initialState, action);
+    expect(stateAfterToggle.activeDevice).toEqual(null);
+  });
+
+  it('should handle UPDATE_MODAL_VISIBILITY action for initial state', () => {
+    const action: UpdateModalVisibilityAction = {
+      type: CreateCardFormActionTypes.UPDATE_MODAL_VISIBILITY,
+      payload: true,
+    };
+    const stateAfterToggle = createCardFormReducer(initialState, action);
+    expect(stateAfterToggle.isModalVisible).toEqual(true);
+  });
+
+  it('should return the initial state for an unknown action type', () => {
+    const unknownAction = { type: 'UNKNOWN_ACTION' };
+
+    // @ts-expect-error: Testing for unknown action type
+    const state = createCardFormReducer(initialState, unknownAction);
+    expect(state).toEqual(initialState);
+  });
+});
diff --git a/app/create-card/createCardFormReducer.ts b/app/create-card/createCardFormReducer.ts
new file mode 100644
index 0000000..040edc9
--- /dev/null
+++ b/app/create-card/createCardFormReducer.ts
@@ -0,0 +1,70 @@
+import { CameraDevice } from 'html5-qrcode';
+
+export type CreateCardFormState = {
+  devices: CameraDevice[];
+  activeDevice: CameraDevice | null;
+  isModalVisible: boolean;
+};
+
+export enum CreateCardFormActionTypes {
+  SET_DEVICES = 'SET_DEVICES',
+  TOGGLE_ACTIVE_DEVICE = 'TOGGLE_ACTIVE_DEVICE',
+  UPDATE_MODAL_VISIBILITY = 'UPDATE_MODAL_VISIBILITY',
+}
+
+export type SetDevicesAction = {
+  type: CreateCardFormActionTypes.SET_DEVICES;
+  payload: CameraDevice[];
+};
+
+export type ToggleActiveDeviceAction = {
+  type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE;
+};
+export type UpdateModalVisibilityAction = {
+  type: CreateCardFormActionTypes.UPDATE_MODAL_VISIBILITY;
+  payload: boolean;
+};
+
+export type CreateCardFormActions =
+  | SetDevicesAction
+  | ToggleActiveDeviceAction
+  | UpdateModalVisibilityAction;
+
+export const initialState: CreateCardFormState = {
+  activeDevice: null,
+  devices: [],
+  isModalVisible: false,
+};
+
+export const createCardFormReducer = (
+  state: CreateCardFormState,
+  action: CreateCardFormActions
+): CreateCardFormState => {
+  switch (action.type) {
+    case CreateCardFormActionTypes.SET_DEVICES:
+      return {
+        ...state,
+        devices: action.payload,
+        activeDevice: action.payload[0] ?? null,
+      };
+    case CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE:
+      if (state.activeDevice === null || state.devices.length < 2) {
+        return state;
+      }
+      const currentIndex = state.devices.findIndex(
+        device => device.id === state.activeDevice!.id
+      );
+      const nextIndex = (currentIndex + 1) % state.devices.length;
+      return {
+        ...state,
+        activeDevice: state.devices[nextIndex],
+      };
+    case CreateCardFormActionTypes.UPDATE_MODAL_VISIBILITY:
+      return {
+        ...state,
+        isModalVisible: action.payload,
+      };
+    default:
+      return state;
+  }
+};
diff --git a/app/create-card/scanner.tsx b/app/create-card/scanner.tsx
new file mode 100644
index 0000000..c1df915
--- /dev/null
+++ b/app/create-card/scanner.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import {
+  CreateCardFormActions,
+  CreateCardFormActionTypes,
+} from '@/app/create-card/createCardFormReducer';
+import {
+  Html5Qrcode,
+  Html5QrcodeResult,
+  Html5QrcodeScannerState,
+  Html5QrcodeCameraScanConfig,
+  CameraDevice,
+} from 'html5-qrcode';
+import { Dispatch, useCallback, useEffect, useRef } from 'react';
+
+const getConfig = (boundingRect?: DOMRect): Html5QrcodeCameraScanConfig => {
+  let qrbox = {
+    width: 250,
+    height: 250,
+  };
+  if (boundingRect) {
+    const width = Math.max(50, Math.ceil(boundingRect.width * 0.8));
+    qrbox = {
+      width,
+      height: Math.max(
+        50,
+        Math.min(Math.ceil(boundingRect.height * 0.8), width)
+      ),
+    };
+  }
+  return {
+    fps: 10,
+    qrbox,
+  };
+};
+
+export default function Scanner({
+  onCodeDetected,
+  activeDevice,
+  dispatch,
+}: {
+  onCodeDetected: (decodedText: string, result: Html5QrcodeResult) => void;
+  activeDevice: CameraDevice | null;
+  dispatch: Dispatch<CreateCardFormActions>;
+}) {
+  const parentDiv = useRef<HTMLDivElement>(null);
+
+  const getCameraDevices = useCallback(
+    async function (): Promise<void> {
+      let devices: CameraDevice[];
+      try {
+        devices = await Html5Qrcode.getCameras();
+      } catch (e) {
+        console.log('error while querying cameras', e);
+        devices = [];
+      }
+      dispatch({
+        type: CreateCardFormActionTypes.SET_DEVICES,
+        payload: devices,
+      });
+    },
+    [dispatch]
+  );
+
+  const startScanning = useCallback(
+    (activeDeviceId: string): (() => void) => {
+      const reader: Html5Qrcode = new Html5Qrcode('reader');
+      reader
+        .start(
+          activeDeviceId,
+          getConfig(parentDiv.current?.getBoundingClientRect()),
+          onCodeDetected,
+          undefined
+        )
+        .catch(e => {
+          console.log('error', e);
+        });
+      return () => {
+        if (reader.getState() === Html5QrcodeScannerState.SCANNING) {
+          reader.stop().finally(() => reader.clear());
+        } else {
+          reader.clear();
+        }
+      };
+    },
+    [onCodeDetected]
+  );
+
+  useEffect(() => {
+    getCameraDevices();
+  }, [getCameraDevices]);
+
+  useEffect(() => {
+    let cleanup: () => void;
+    if (activeDevice?.id) {
+      cleanup = startScanning(activeDevice.id);
+    }
+    return () => {
+      cleanup?.();
+    };
+  }, [activeDevice?.id, startScanning]);
+
+  return (
+    <div
+      className="max-w-full overflow-clip"
+      style={{
+        height: 'calc(100% - 2.5rem)',
+        maxHeight: 'calc(100% - 2.5rem)',
+      }}
+      ref={parentDiv}
+    >
+      <div id="reader" className="max-h-full"></div>
+      {!activeDevice && (
+        <div className="text-center">
+          <p className="text-xl py-4">Please grant camera permissions.</p>
+          <p className="text-sm text-gray-500 pb-4">
+            Without those permissions, it will be impossible to scan and save
+            your cards.
+          </p>
+          <button className="btn btn-primary" onClick={getCameraDevices}>
+            Request devices
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index bd5563a..2e35bcd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
 
@@ -21,13 +21,18 @@ export const metadata: Metadata = {
   authors: [{ name: 'Lukas Bicus', url: 'https://github.com/LukasBicus' }],
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="h-full">
+    <html lang="en" className="h-full w-screen">
       <head>
         <link
           rel="icon"
diff --git a/app/lib/app-state/reducer.spec.ts b/app/lib/app-state/reducer.spec.ts
index bc4e2f5..39cf599 100644
--- a/app/lib/app-state/reducer.spec.ts
+++ b/app/lib/app-state/reducer.spec.ts
@@ -5,8 +5,9 @@ import {
   DeleteCardAction,
   EditCardAction,
 } from '@/app/lib/app-state/reducer';
-import { CardIcon, CodeType } from '@/app/lib/shared';
+import { CardIcon } from '@/app/lib/shared';
 import { describe, expect, it } from '@jest/globals';
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import { v4 as uuid } from 'uuid';
 
 const dummyCard: Card = {
@@ -15,7 +16,7 @@ const dummyCard: Card = {
   code: '123adfa657SFV',
   bgColor: '#4523C9',
   icon: CardIcon.Retail,
-  codeType: CodeType.QrCode,
+  codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
 };
 
 describe('appReducer', () => {
@@ -24,7 +25,7 @@ describe('appReducer', () => {
     const newCard: Omit<Card, 'id'> = {
       bgColor: '#4523C9',
       icon: CardIcon.Retail,
-      codeType: CodeType.QrCode,
+      codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
       name: 'Test Card',
       code: 'ABC123',
     };
diff --git a/app/lib/app-state/reducer.ts b/app/lib/app-state/reducer.ts
index 86bfe2c..2be0ff6 100644
--- a/app/lib/app-state/reducer.ts
+++ b/app/lib/app-state/reducer.ts
@@ -1,4 +1,5 @@
-import { CardIcon, CodeType, SvgProps } from '@/app/lib/shared';
+import { CardIcon, SvgProps } from '@/app/lib/shared';
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode/src/core';
 import { v4 as uuid } from 'uuid';
 
 export type Card = {
@@ -9,7 +10,7 @@ export type Card = {
   bgColor: string | null;
   icon: CardIcon | null | SvgProps;
   favorite?: boolean;
-  codeType: CodeType;
+  codeFormat: Html5QrcodeSupportedFormats;
 };
 
 export type AppState = {
diff --git a/app/lib/predefined-companies.ts b/app/lib/predefined-companies.ts
index f985379..f1c0891 100644
--- a/app/lib/predefined-companies.ts
+++ b/app/lib/predefined-companies.ts
@@ -1,9 +1,10 @@
-import { CodeType, SvgProps } from '@/app/lib/shared';
+import { SvgProps } from '@/app/lib/shared';
+import { Html5QrcodeSupportedFormats } from 'html5-qrcode';
 
 export const predefinedCompanies: {
   name: string;
   svg: SvgProps;
-  codeType: CodeType;
+  codeFormat: Html5QrcodeSupportedFormats;
 }[] = [
   {
     name: 'DM',
@@ -12,7 +13,7 @@ export const predefinedCompanies: {
       height: 1620,
       width: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Albert',
@@ -21,7 +22,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Bata',
@@ -30,7 +31,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Biedronka',
@@ -39,7 +40,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Fresh',
@@ -48,7 +49,7 @@ export const predefinedCompanies: {
       width: 510.5,
       height: 182.7,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Ikea',
@@ -57,7 +58,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Kaufland',
@@ -66,7 +67,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Lidl',
@@ -75,7 +76,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.QrCode,
+    codeFormat: Html5QrcodeSupportedFormats.QR_CODE,
   },
   {
     name: 'Billa',
@@ -84,7 +85,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'O2',
@@ -93,7 +94,7 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Rossmann',
@@ -102,7 +103,7 @@ export const predefinedCompanies: {
       width: 116.6,
       height: 14.3,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
   {
     name: 'Tesco',
@@ -111,6 +112,6 @@ export const predefinedCompanies: {
       width: 2500,
       height: 2500,
     },
-    codeType: CodeType.Barcode,
+    codeFormat: Html5QrcodeSupportedFormats.EAN_13,
   },
 ];
diff --git a/app/lib/shared.ts b/app/lib/shared.ts
index 3f19a74..d053686 100644
--- a/app/lib/shared.ts
+++ b/app/lib/shared.ts
@@ -115,11 +115,6 @@ export const colorNames = {
   [Colors.Burlywood]: 'Burlywood',
 };
 
-export enum CodeType {
-  QrCode = 'QrCode',
-  Barcode = 'Barcode',
-}
-
 export type SvgProps = {
   src: string;
   width: number;
diff --git a/app/ui/text-field.tsx b/app/ui/text-field.tsx
index 12cef9a..806060d 100644
--- a/app/ui/text-field.tsx
+++ b/app/ui/text-field.tsx
@@ -7,10 +7,12 @@ export function TextField<T extends FieldValues>({
   className,
   name,
   register,
+  disabled,
 }: {
   label: string;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
   name: Path<T>;
   register: UseFormRegister<T>;
 }) {
@@ -23,6 +25,7 @@ export function TextField<T extends FieldValues>({
         type="text"
         placeholder={placeholder}
         {...register(name)}
+        disabled={disabled}
         className="input input-bordered w-full"
       />
     </label>
diff --git a/next.config.mjs b/next.config.mjs
index b012115..880bb90 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,9 @@
 import withSerwistInit from '@serwist/next';
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  // reactStrictMode: false,
+};
 
 const withSerwist = withSerwistInit({
   swSrc: 'app/sw.ts',
diff --git a/package-lock.json b/package-lock.json
index 52435b7..530936d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@serwist/next": "^9.0.9",
         "@tabler/icons-react": "^3.19.0",
         "clsx": "^2.1.1",
+        "html5-qrcode": "^2.3.8",
         "next": "14.2.15",
         "next-pwa": "^5.6.0",
         "react": "^18",
@@ -7258,6 +7259,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
diff --git a/package.json b/package.json
index ceaa66d..e48e667 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@serwist/next": "^9.0.9",
     "@tabler/icons-react": "^3.19.0",
     "clsx": "^2.1.1",
+    "html5-qrcode": "^2.3.8",
     "next": "14.2.15",
     "next-pwa": "^5.6.0",
     "react": "^18",
diff --git a/plan.md b/plan.md
index c014ce9..94cdfd0 100644
--- a/plan.md
+++ b/plan.md
@@ -27,9 +27,9 @@ Features:
   - [ ] _implement search in predefined companies_
   - [x] **implement add card button + navigation to scan code page**
   - [x] _implement click on predefined company + navigation to create card page_
-- [ ] _Scan code page_
-  - [ ] _implement barcode scan_
-  - [ ] _implement navigation to qrcode scan + scan itself_
+- [x] _Scan code page_
+  - [x] _implement barcode scan_
+  - [x] _implement navigation to qrcode scan + scan itself_
 - [ ] **Create card page**
   - [x] **implement form**
   - [x] _implement navigation to scan code page_
diff --git a/tsconfig.json b/tsconfig.json
index b953ef8..090f6bb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,5 +23,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", "public/sw.js"]
+  "exclude": ["node_modules", "public/sw.js", ".next"]
 }