fix: add validation to create recipe

frontend/src/components/InstructionsInput.tsx

@@ -4,10 +4,11 @@ import { useFormContext } from "react-hook-form";
 import { Button } from "./ui/button";
 import { PlusIcon } from "lucide-react";
 import { Textarea } from "./ui/textarea";
+import { FormField, FormMessage } from "./ui/form";
 
 export default function InstructionsInput() {
   const [count, setCount] = useState(1);
-  const { register, setValue, getValues } = useFormContext();
+  const { register, setValue, getValues, control } = useFormContext();
 
   const deleteIndex = (index: number) => {
     setCount(count - 1);
@@ -36,6 +37,11 @@ export default function InstructionsInput() {
           </div>
         </div>
       ))}
+      <FormField
+        name="instructions.root"
+        control={control}
+        render={() => <FormMessage />}
+      />
       <Button
         onClick={(e) => {
           e.preventDefault();

frontend/src/routes/create-recipe.tsx

@@ -29,11 +29,16 @@ import useAuthStore from "@/services/auth";
 
 const newRecipeSchema = z.object({
   name: z.string().min(1),
-  description: z.string().min(1),
+  description: z.string().min(1).max(5000),
   ingredients: z.array(
     z.object({ name: z.string().min(1), amount: z.string() }),
   ),
-  instructions: z.array(z.string().min(1)),
+  instructions: z
+    .array(z.string().min(1))
+    .refine(
+      (val) => val.reduce((acc, curr) => acc + curr.length + 4, 0) < 5000,
+      "Total length must be less than 5000 characters.",
+    ),
   images: z.array(z.string().min(1)),
   prepTime: z.coerce.number().min(1),
   cookTime: z.coerce.number().min(1),