navigation after adding recipes

frontend/src/pages/AddRecipe.tsx

@@ -1,19 +1,33 @@
+import React, { useState } from 'react';
 import { addRecipe } from "../services/backend.js";
+import { useNavigate } from "react-router-dom";
 
 function AddRecipe() {
+  const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
+  const navigate = useNavigate();
+
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
     const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
     const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
 
     if (nameElement && cuisineElement) {
+      const recipeData = {
+        name: nameElement.value,
+        cuisine: cuisineElement.value
+      }
 
-      const name = nameElement.value;
-      const cuisine = cuisineElement.value;
-      await addRecipe(name, cuisine);
+      const data = await addRecipe(recipeData);
+      setNewRecipeId(data.id);
     }
 
-  }
+  };
+  React.useEffect(() => {
+    if (newRecipeId !== null) {
+      navigate(`/recipe/${newRecipeId}`);
+    }
+  }, [newRecipeId, navigate]);
+
   return (
     <div className="add-recipe-outer">
       <form onSubmit={addRecipeForm} className="add-recipe-form">