Update add card page

app/card/card-detail-page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
+import { CodePicture } from '@/app/ui/code-picture';
 import { ConfirmDialog } from '@/app/ui/confirm-dialog';
 import useAppState from '@/app/lib/app-state/app-state';
 import { Routes } from '@/app/lib/shared';
-import { Barcode } from '@/app/ui/barcode';
 import { CompanyIcon } from '@/app/ui/company-icon';
 import { MainMessage } from '@/app/ui/main-message';
 import { PageTemplate } from '@/app/ui/page-template';
-import { Qrcode } from '@/app/ui/qrcode';
 import { SecondaryHeader } from '@/app/ui/secondary-header';
 import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
@@ -69,11 +68,7 @@ export function CardDetailPage() {
       }
     >
       <div className="h-full w-full grid grid-col grid-rows-[1fr_auto]">
-        {card.codeFormat === 'QR' ? (
-          <Qrcode code={card.code} />
-        ) : (
-          <Barcode code={card.code} codeFormat={card.codeFormat} />
-        )}
+        <CodePicture code={card.code} codeFormat={card.codeFormat} />
         <div
           className="bg-base-300 p-6"
           style={card.bgColor ? { backgroundColor: card.bgColor } : {}}

app/create-card/create-card-form.tsx

@@ -18,6 +18,7 @@ import {
   Routes,
   SvgProps,
 } from '@/app/lib/shared';
+import { CodePicture } from '@/app/ui/code-picture';
 import { DropdownField } from '@/app/ui/dropdown-field';
 import { TextAreaField } from '@/app/ui/text-area-field';
 import { TextField } from '@/app/ui/text-field';
@@ -33,7 +34,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { Reducer, useCallback, useEffect, useReducer, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
-enum FormNames {
+enum CreateCardFormNames {
   Name = 'name',
   Code = 'code',
   CodeFormat = 'codeFormat',
@@ -43,12 +44,12 @@ enum FormNames {
 }
 
 type CreateCardForm = {
-  [FormNames.Name]: string;
-  [FormNames.Code]: string;
-  [FormNames.CodeFormat]: string;
-  [FormNames.Note]: string;
-  [FormNames.Color]: string | null;
-  [FormNames.Icon]: string | SvgProps;
+  [CreateCardFormNames.Name]: string;
+  [CreateCardFormNames.Code]: string;
+  [CreateCardFormNames.CodeFormat]: string;
+  [CreateCardFormNames.Note]: string;
+  [CreateCardFormNames.Color]: string | null;
+  [CreateCardFormNames.Icon]: string | SvgProps;
 };
 
 export default function CreateCardForm() {
@@ -57,16 +58,22 @@ export default function CreateCardForm() {
   const predefinedCompany = predefinedCompanies.find(
     c => c.name === predefinedCompanyName
   );
-  const { register, handleSubmit, control, watch, setValue } =
-    useForm<CreateCardForm>({
-      defaultValues: predefinedCompany
-        ? {
-            [FormNames.Name]: predefinedCompany.name,
-            [FormNames.Color]: null,
-            [FormNames.Icon]: predefinedCompany.svg,
-          }
-        : {},
-    });
+  const {
+    register,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { errors: formErrors },
+  } = useForm<CreateCardForm>({
+    defaultValues: predefinedCompany
+      ? {
+          [CreateCardFormNames.Name]: predefinedCompany.name,
+          [CreateCardFormNames.Color]: null,
+          [CreateCardFormNames.Icon]: predefinedCompany.svg,
+        }
+      : {},
+  });
   const [, appDispatch] = useAppState();
   const [{ devices, activeDevice, isModalVisible }, dispatch] = useReducer<
     Reducer<CreateCardFormState, CreateCardFormActions>
@@ -75,10 +82,12 @@ export default function CreateCardForm() {
   const cameraModalRef = useRef<HTMLDialogElement>(null);
   const handleCodeDetected = useCallback(
     (text: string, { result }: Html5QrcodeResult) => {
-      setValue(FormNames.Code, text);
+      setValue(CreateCardFormNames.Code, text, {
+        shouldValidate: true,
+      });
       if (typeof result.format?.format === 'number') {
         setValue(
-          FormNames.CodeFormat,
+          CreateCardFormNames.CodeFormat,
           mapHtml5QrcodeFormatToJsbarcodeFormat(result.format.format)
         );
       }
@@ -121,6 +130,8 @@ export default function CreateCardForm() {
     cameraModalRef.current?.showModal();
   }, []);
 
+  const code = watch(CreateCardFormNames.Code);
+  const codeFormat = watch(CreateCardFormNames.CodeFormat);
   return (
     <>
       <form
@@ -129,23 +140,28 @@ export default function CreateCardForm() {
           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],
+              name: data[CreateCardFormNames.Name],
+              code: data[CreateCardFormNames.Code],
+              note: data[CreateCardFormNames.Note] || undefined,
+              bgColor: data[CreateCardFormNames.Color] || null,
+              icon: (data[CreateCardFormNames.Icon] as CardIcon) || null,
+              codeFormat: data[CreateCardFormNames.CodeFormat],
             },
           });
           router.replace(Routes.MyCards);
         })}
       >
+        {code && codeFormat && (
+          <CodePicture code={code} codeFormat={codeFormat} />
+        )}
         <div className="flex gap-4">
           <TextField
             label="Card code"
-            name={FormNames.Code}
+            name={CreateCardFormNames.Code}
             register={register}
             disabled
+            errors={formErrors}
+            required
           />
           <button
             className="btn btn-primary btn-square mt-9"
@@ -159,12 +175,18 @@ export default function CreateCardForm() {
         </div>
         <TextField
           label="Card name"
-          name={FormNames.Name}
+          name={CreateCardFormNames.Name}
+          register={register}
+          required
+          errors={formErrors}
+        />
+        <TextAreaField
+          label="Note"
+          name={CreateCardFormNames.Note}
           register={register}
         />
-        <TextAreaField label="Note" name={FormNames.Note} register={register} />
         {predefinedCompany ? (
-          <input type="hidden" {...register(FormNames.Color)} />
+          <input type="hidden" {...register(CreateCardFormNames.Color)} />
         ) : (
           <div className="flex gap-4">
             <DropdownField
@@ -180,10 +202,10 @@ export default function CreateCardForm() {
                 value: hex,
               }))}
               control={control}
-              name={FormNames.Color}
+              name={CreateCardFormNames.Color}
               watch={watch}
             />
-            <button className="btn btn-primary btn-square mt-9">
+            <button className="btn btn-primary btn-square mt-9" type="button">
               <IconPalette className="w-6 h-6" />
             </button>
           </div>
@@ -194,7 +216,7 @@ export default function CreateCardForm() {
               <span className="label-text">Company logo</span>
             </div>
             <div className="bg-background">
-              <input type="hidden" {...register(FormNames.Icon)} />
+              <input type="hidden" {...register(CreateCardFormNames.Icon)} />
               <Image
                 {...predefinedCompany.svg}
                 alt={predefinedCompany.name}
@@ -215,7 +237,7 @@ export default function CreateCardForm() {
               value: key,
             }))}
             control={control}
-            name={FormNames.Icon}
+            name={CreateCardFormNames.Icon}
             watch={watch}
           />
         )}
@@ -232,13 +254,15 @@ export default function CreateCardForm() {
             <button
               className="btn btn-square btn-ghost"
               onClick={() => cameraModalRef.current?.close()}
+              type="button"
             >
               <IconX className="w-6 h-6" />
             </button>
             <h3 className="font-bold text-lg">Scan your code!</h3>
             {devices.length > 1 ? (
               <button
                 className="btn btn-square btn-ghost"
+                type="button"
                 onClick={() => {
                   dispatch({
                     type: CreateCardFormActionTypes.TOGGLE_ACTIVE_DEVICE,

app/create-card/scanner.tsx

@@ -92,7 +92,6 @@ export default function Scanner({
   }, [getCameraDevices]);
 
   useEffect(() => {
-    console.log('use effect called');
     let cleanup: () => void;
     if (activeDevice?.id) {
       cleanup = startScanning(activeDevice.id);

app/ui/code-picture.tsx

@@ -0,0 +1,16 @@
+import { Barcode } from '@/app/ui/barcode';
+import { Qrcode } from '@/app/ui/qrcode';
+
+export function CodePicture({
+  code,
+  codeFormat,
+}: {
+  code: string;
+  codeFormat: string;
+}) {
+  return codeFormat === 'QR' ? (
+    <Qrcode code={code} />
+  ) : (
+    <Barcode code={code} codeFormat={codeFormat} />
+  );
+}

app/ui/dropdown-field.module.css

@@ -0,0 +1,3 @@
+.options-list {
+  width: calc(100vw - 2rem);
+}

app/ui/dropdown-field.tsx

@@ -7,6 +7,7 @@ import {
   Path,
   UseFormWatch,
 } from 'react-hook-form';
+import styles from './dropdown-field.module.css';
 
 export type Option<U> = {
   label: string | React.ReactNode;
@@ -47,28 +48,28 @@ export function DropdownField<T extends FieldValues, U = string>({
             <div className="label">
               <span className="label-text">{label}</span>
             </div>
-            <div
-              className={clsx('dropdown dropdown-end', dropdownClassName)}
-              key="dropdown"
-            >
+            <div className={clsx('dropdown', dropdownClassName)} key="dropdown">
               <div className="input input-bordered w-full flex items-center">
                 {currentOption ? (
                   <div tabIndex={0} role="button" className="w-full">
                     {currentOption.label}
                   </div>
                 ) : (
-                  <input
+                  <button
                     tabIndex={0}
-                    type="text"
                     role="button"
                     className="w-full"
+                    type="button"
                   />
                 )}
               </div>
               <ul
                 tabIndex={0}
                 ref={dropdownRef}
-                className="dropdown-content menu bg-base-100 rounded-box z-[1] w-full p-2 shadow max-h-80 overflow-auto"
+                className={clsx(
+                  'dropdown-content menu bg-base-100 rounded-box z-[1] w-screen p-2 shadow max-h-80 overflow-auto',
+                  styles['options-list']
+                )}
               >
                 {options.map(option => (
                   <li

app/ui/qrcode.tsx

@@ -5,7 +5,6 @@ import qrcode from 'qrcode';
 
 export function Qrcode({ code }: { code: string }) {
   const [dataUrl, setDataUrl] = useState('');
-  console.log('code:', code);
   useEffect(() => {
     qrcode
       .toDataURL(code, {

app/ui/text-field.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { UseFormRegister, FieldValues, Path } from 'react-hook-form';
+import { UseFormRegister, FieldValues, Path, FormState } from 'react-hook-form';
 
 export function TextField<T extends FieldValues>({
   label,
@@ -8,13 +8,17 @@ export function TextField<T extends FieldValues>({
   name,
   register,
   disabled,
+  required,
+  errors,
 }: {
   label: string;
   placeholder?: string;
   className?: string;
   disabled?: boolean;
   name: Path<T>;
   register: UseFormRegister<T>;
+  errors: FormState<T>['errors'];
+  required?: boolean;
 }) {
   return (
     <label className={clsx('form-control w-full', className)}>
@@ -24,10 +28,20 @@ export function TextField<T extends FieldValues>({
       <input
         type="text"
         placeholder={placeholder}
-        {...register(name)}
+        {...register(name, {
+          required,
+        })}
         disabled={disabled}
         className="input input-bordered w-full"
       />
+      {errors[name] && (
+        <span className="text-sm text-error pt-2 px-1">
+          This field is required!
+        </span>
+      )}
+      {!errors[name] && required && (
+        <span className="text-sm pt-2 px-1 text-base-content/25">Required</span>
+      )}
     </label>
   );
 }

plan.md

@@ -35,7 +35,7 @@ Features:
 - [ ] **Create card page**
   - [x] **implement form**
   - [x] _implement navigation to scan code page_
-  - [ ] _display scanned code_
+  - [x] _display scanned code_
   - [ ] implement color picker
   - [x] **implement creation of card (add it to other cards in local storage (); navigate to my cards page)**
 - [x] **My cards page**

tailwind.config.ts

@@ -1,5 +1,5 @@
-import type { Config } from 'tailwindcss';
 import daisyui from 'daisyui';
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
@@ -12,6 +12,7 @@ const config: Config = {
       colors: {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
+        error: 'rgb(239 68 68)',
       },
     },
   },