add feature to edit recipes

frontend/src/components/RecipeModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Recipe, recipesAPI } from '../services/api';
 import { useAuth } from '../context/AuthContext';
 import './RecipeModal.css';
@@ -21,6 +22,7 @@ const RecipeModal: React.FC<RecipeModalProps> = ({
   selectedQuantity,
 }) => {
   const { user } = useAuth();
+  const navigate = useNavigate();
   const [isDeleting, setIsDeleting] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const handleBackdropClick = (e: React.MouseEvent) => {
@@ -52,8 +54,15 @@ const RecipeModal: React.FC<RecipeModalProps> = ({
     setShowDeleteConfirm(false);
   };
 
-  // Check if current user is the creator of this recipe
-  const canDelete = user && recipe.createdBy === user.id;
+  const handleEditClick = () => {
+    // Navigate to edit page with recipe data
+    navigate(`/edit-recipe/${recipe._id}`, { state: { recipe } });
+    onClose();
+  };
+
+  // Any logged-in user can edit or delete recipes
+  const canEdit = !!user;
+  const canDelete = !!user;
 
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
@@ -164,15 +173,25 @@ const RecipeModal: React.FC<RecipeModalProps> = ({
         
         <div className="modal-footer">
           <div className="modal-footer-buttons">
-            {canDelete && (
-              <button 
-                className="btn btn-danger btn-delete"
-                onClick={handleDeleteClick}
-                disabled={isDeleting}
-              >
-                {isDeleting ? 'Deleting...' : 'Delete Recipe'}
-              </button>
-            )}
+            <div className="modal-action-buttons">
+              {canEdit && (
+                <button 
+                  className="btn btn-secondary btn-edit"
+                  onClick={handleEditClick}
+                >
+                  Edit Recipe
+                </button>
+              )}
+              {canDelete && (
+                <button 
+                  className="btn btn-danger btn-delete"
+                  onClick={handleDeleteClick}
+                  disabled={isDeleting}
+                >
+                  {isDeleting ? 'Deleting...' : 'Delete Recipe'}
+                </button>
+              )}
+            </div>
             <button 
               className={`btn ${isSelected ? 'btn-success' : 'btn-primary'} btn-large`}
               onClick={() => onAddToSelection(recipe._id)}