From ac8bef4b9bf7188e786400afd555fcc7f635a4e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Efe=20Ak=C3=A7a?= <efeakca@gmail.com>
Date: Fri, 17 May 2024 21:40:40 +0300
Subject: [PATCH] fix: add validation to create recipe

---
 frontend/src/components/InstructionsInput.tsx | 8 +++++++-
 frontend/src/routes/create-recipe.tsx         | 9 +++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/InstructionsInput.tsx b/frontend/src/components/InstructionsInput.tsx
index 69df1e2..1e4a332 100644
--- a/frontend/src/components/InstructionsInput.tsx
+++ b/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();
diff --git a/frontend/src/routes/create-recipe.tsx b/frontend/src/routes/create-recipe.tsx
index 7f59b36..bd92730 100644
--- a/frontend/src/routes/create-recipe.tsx
+++ b/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),