Validation for flashcardset pick name dialog

Author: Szymon Kozioł

public/locales/en.json

@@ -9,9 +9,10 @@
     },
     "pickName": {
       "title": "Pick a name for your flashcard set",
-      "placeholder": "Flashcard set name",
+      "name": "Flashcard set name",
       "create": "Create",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "nameIsRequired": "Name is required"
     },
     "enterUsername": {
       "title": "Enter your name",

public/locales/en/sets.json

@@ -9,9 +9,10 @@
     },
     "pickName": {
       "title": "Wybierz nazwę dla swojego zestawu fiszek",
-      "placeholder": "Nazwa zestawu fiszek",
+      "name": "Nazwa zestawu fiszek",
       "create": "Utwórz",
-      "cancel": "Anuluj"
+      "cancel": "Anuluj",
+      "nameIsRequired": "Nazwa jest wymagana"
     },
     "enterUsername": {
       "title": "Wpisz swoje imię",

public/locales/pl/sets.json

@@ -1,6 +1,9 @@
 import { type ReactNode, useId, useState, useEffect } from 'react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 
 import { Button } from '@/components/base/Button';
 import {
@@ -11,24 +14,48 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/base/Dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/base/Form';
 import { Input } from '@/components/base/Input';
 
+const formSchema = z.object({
+  name: z.string().min(1, { message: 'dialog.pickName.nameIsRequired' }),
+});
+type FormSchema = z.infer<typeof formSchema>;
+
 export type EnterFlashcardSetNameProps = {
   children: ReactNode;
   onSetName?: (name: string) => void;
 };
 
 export function EnterFlashcardSetName({ children, onSetName }: EnterFlashcardSetNameProps) {
   const [dialogOpen, setDialogOpen] = useState(false);
-  const [name, setName] = useState('');
   const formId = useId();
   const { t } = useTranslation('sets');
+  const form = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+    },
+  });
+
+  const onSubmit = ({ name }: FormSchema) => {
+    setDialogOpen(false);
+    onSetName?.(name);
+  };
+
   useEffect(() => {
     if (dialogOpen) {
       // Reset the name when the dialog is opened
-      setName('');
+      form.reset();
     }
-  }, [dialogOpen]);
+  }, [dialogOpen, form, form.reset]);
 
   return (
     <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -37,22 +64,23 @@ export function EnterFlashcardSetName({ children, onSetName }: EnterFlashcardSet
         <DialogHeader>
           <DialogTitle>{t('dialog.pickName.title')}</DialogTitle>
         </DialogHeader>
-        <form
-          id={formId}
-          onSubmit={(e) => {
-            e.preventDefault();
-            onSetName?.(name);
-            setDialogOpen(false);
-          }}
-        >
-          <Input
-            placeholder={t('dialog.pickName.placeholder')}
-            value={name}
-            onChange={(e) => {
-              setName(e.target.value);
-            }}
-          />
-        </form>
+        <Form {...form}>
+          <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('dialog.pickName.name')}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
 
         <DialogFooter className="flex flex-row justify-between">
           <Button variant="outlined" onClick={() => setDialogOpen(false)}>