add feature to delete recipes when logged in

frontend/src/components/RecipeModal.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
-import { Recipe } from '../services/api';
+import React, { useState } from 'react';
+import { Recipe, recipesAPI } from '../services/api';
+import { useAuth } from '../context/AuthContext';
 import './RecipeModal.css';
 
 interface RecipeModalProps {
   recipe: Recipe;
   onClose: () => void;
   onAddToSelection: (recipeId: string) => void;
+  onRecipeDeleted?: (recipeId: string) => void;
   isSelected: boolean;
   selectedQuantity: number;
 }
@@ -14,15 +16,45 @@ const RecipeModal: React.FC<RecipeModalProps> = ({
   recipe,
   onClose,
   onAddToSelection,
+  onRecipeDeleted,
   isSelected,
   selectedQuantity,
 }) => {
+  const { user } = useAuth();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  const handleDeleteClick = () => {
+    setShowDeleteConfirm(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    setIsDeleting(true);
+    try {
+      await recipesAPI.delete(recipe._id);
+      onRecipeDeleted?.(recipe._id);
+      onClose();
+    } catch (error) {
+      console.error('Error deleting recipe:', error);
+      alert('Failed to delete recipe. Please try again.');
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setShowDeleteConfirm(false);
+  };
+
+  // Check if current user is the creator of this recipe
+  const canDelete = user && recipe.createdBy === user.id;
+
   const getDifficultyColor = (difficulty: string) => {
     switch (difficulty) {
       case 'easy': return '#4CAF50';
@@ -131,13 +163,53 @@ const RecipeModal: React.FC<RecipeModalProps> = ({
         </div>
         
         <div className="modal-footer">
-          <button 
-            className={`btn ${isSelected ? 'btn-success' : 'btn-primary'} btn-large`}
-            onClick={() => onAddToSelection(recipe._id)}
-          >
-            {isSelected ? `Added to Menu (${selectedQuantity})` : 'Add to Menu'}
-          </button>
+          <div className="modal-footer-buttons">
+            {canDelete && (
+              <button 
+                className="btn btn-danger btn-delete"
+                onClick={handleDeleteClick}
+                disabled={isDeleting}
+              >
+                {isDeleting ? 'Deleting...' : 'Delete Recipe'}
+              </button>
+            )}
+            <button 
+              className={`btn ${isSelected ? 'btn-success' : 'btn-primary'} btn-large`}
+              onClick={() => onAddToSelection(recipe._id)}
+            >
+              {isSelected ? `Added to Menu (${selectedQuantity})` : 'Add to Menu'}
+            </button>
+          </div>
         </div>
+
+        {/* Delete Confirmation Dialog */}
+        {showDeleteConfirm && (
+          <div className="delete-confirm-overlay">
+            <div className="delete-confirm-dialog">
+              <h3>Delete Recipe</h3>
+              <p>Are you sure you want to delete "{recipe.title}"?</p>
+              <p className="delete-warning">
+                This action cannot be undone. The recipe will be removed from all users' menus.
+              </p>
+              <div className="delete-confirm-buttons">
+                <button 
+                  className="btn btn-secondary"
+                  onClick={handleDeleteCancel}
+                  disabled={isDeleting}
+                >
+                  Cancel
+                </button>
+                <button 
+                  className="btn btn-danger"
+                  onClick={handleDeleteConfirm}
+                  disabled={isDeleting}
+                >
+                  {isDeleting ? 'Deleting...' : 'Delete Recipe'}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );