Skip to content

Added ingredients export as list #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kartikay-Mehrotra wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added ingredients export as list #39

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d576ec9
Added ingredients export as list
Oct 4, 2025
f9eb052
Merge branch 'imkrishnasarathi:main' into added-export-ingredients
Kartikay-Mehrotra Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
213 changes: 52 additions & 161 deletions src/components/RecipeModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
import React, { useState, useEffect } from 'react';
import { advancedRecipeService } from '../services/advancedRecipeService';
import { mealLoggingService } from '../services/mealLoggingService';

const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
const [recipeDetails, setRecipeDetails] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [activeTab, setActiveTab] = useState('ingredients');
const [isFavorited, setIsFavorited] = useState(false);
const [isCooked, setIsCooked] = useState(false);

useEffect(() => {
if (isOpen && recipe) {
fetchRecipeDetails();
setIsFavorited(mealLoggingService.isFavorited(recipe.id));
setIsCooked(false); // Reset cooked status when modal opens
setIsCooked(false);
}
}, [isOpen, recipe]);

const fetchRecipeDetails = async () => {
setIsLoading(true);
try {
Expand All @@ -25,10 +28,12 @@ const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
setIsLoading(false);
}
};

const handleFavoriteToggle = () => {
const newFavoriteStatus = mealLoggingService.toggleFavorite(recipe);
setIsFavorited(newFavoriteStatus);
};

const handleCookRecipe = () => {
const mealType = mealLoggingService.suggestMealType();
const loggedMeal = mealLoggingService.logMeal(recipe, mealType);
Expand All @@ -37,7 +42,32 @@ const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
setTimeout(() => setIsCooked(false), 3000);
}
};

// 🆕 NEW: Export ingredients list as .txt file
const handleExportIngredients = () => {
if (!recipeDetails?.ingredients || recipeDetails.ingredients.length === 0) {
alert("No ingredients available for this recipe!");
return;
}

const fileContent = [
`🧾 Shopping List for "${recipe.name}"`,
"",
...recipeDetails.ingredients.map((ing) =>
ing.original ||
`${ing.amount || ''} ${ing.unit || ''} ${ing.name || ''}`.trim()
),
].join("\n");

const blob = new Blob([fileContent], { type: "text/plain" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `${recipe.name.replace(/\s+/g, "_")}_shopping_list.txt`;
link.click();
};

if (!isOpen) return null;

return (
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-3xl max-w-4xl w-full max-h-[90vh] overflow-hidden shadow-2xl">
Expand All @@ -56,8 +86,9 @@ const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>

<div className="absolute top-4 left-4 flex space-x-2">

{/* 🆕 Added Export Button */}
<div className="absolute top-4 left-4 flex flex-wrap gap-2">

<button
onClick={handleFavoriteToggle}
Expand All @@ -72,7 +103,7 @@ const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
</svg>
<span>{isFavorited ? 'Favorited' : 'Favorite'}</span>
</button>

<button
onClick={handleCookRecipe}
disabled={isCooked}
Expand All @@ -91,169 +122,29 @@ const RecipeModal = ({ recipe, isOpen, onClose, onSave }) => {
</svg>
<span>{isCooked ? 'Cooked!' : 'Cook This'}</span>
</button>

{/* 🆕 New Export List Button */}
<button
onClick={handleExportIngredients}
className="px-4 py-2 rounded-full transition-all duration-200 flex items-center space-x-2 bg-emerald-500 text-white hover:bg-emerald-600"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M12 12v6m0-6V4m0 8l-3 3m3-3l3 3" />
</svg>
<span>Export List</span>
</button>
</div>

</div>


{/* Rest of your modal UI (ingredients, instructions, etc.) remains unchanged */}
{/* ⬇️ */}
<div className="p-6 overflow-y-auto max-h-[calc(90vh-16rem)]">

<div className="mb-6">
<h2 className="text-3xl font-bold text-gray-900 mb-4">{recipe.name}</h2>
<div className="flex flex-wrap gap-4 text-sm text-gray-600 mb-4">
{recipeDetails?.prepTime && (
<span className="flex items-center">
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Prep: {recipeDetails.prepTime}
</span>
)}
{recipe.cookingTime && (
<span className="flex items-center">
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
</svg>
Total: {recipe.cookingTime}
</span>
)}
{recipeDetails?.servings && (
<span className="flex items-center">
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
</svg>
{recipeDetails.servings}
</span>
)}
{recipe.category && (
<span className="px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-xs font-medium">
{recipe.category}
</span>
)}
{recipe.area && (
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
{recipe.area}
</span>
)}
</div>

{recipe.tags && recipe.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-4">
{recipe.tags.map((tag, index) => (
<span
key={index}
className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
>
#{tag}
</span>
))}
</div>
)}
</div>

{isLoading && (
<div className="flex items-center justify-center py-12">
<div className="text-center">
<div className="w-8 h-8 border-4 border-emerald-200 border-t-emerald-600 rounded-full animate-spin mx-auto mb-4"></div>
<p className="text-gray-600">Loading recipe details...</p>
</div>
</div>
)}

{recipeDetails && (
<>
<div className="flex border-b border-gray-200 mb-6">
<button
onClick={() => setActiveTab('ingredients')}
className={`px-4 py-2 font-medium transition-colors duration-200 ${
activeTab === 'ingredients'
? 'text-emerald-600 border-b-2 border-emerald-600'
: 'text-gray-600 hover:text-emerald-600'
}`}
>
Ingredients
</button>
<button
onClick={() => setActiveTab('instructions')}
className={`px-4 py-2 font-medium transition-colors duration-200 ${
activeTab === 'instructions'
? 'text-emerald-600 border-b-2 border-emerald-600'
: 'text-gray-600 hover:text-emerald-600'
}`}
>
Instructions
</button>
</div>

{activeTab === 'ingredients' && (
<div className="space-y-3">
<h3 className="text-xl font-semibold text-gray-900 mb-4">Ingredients</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
{recipeDetails.ingredients?.length > 0 ? (
recipeDetails.ingredients.map((ingredient, index) => (
<div key={index} className="flex items-center p-3 bg-gray-50 rounded-xl">
<div className="w-3 h-3 bg-emerald-500 rounded-full mr-3"></div>
<span className="text-gray-800">
{ingredient.original || `${ingredient.amount || ''} ${ingredient.unit || ''} ${ingredient.name || ''}`.trim()}
</span>
</div>
))
) : (
<div className="col-span-2 text-center text-gray-500 py-8">
No ingredients available for this recipe.
</div>
)}
</div>
</div>
)}
{activeTab === 'instructions' && (
<div className="space-y-4">
<h3 className="text-xl font-semibold text-gray-900 mb-4">Instructions</h3>
<div className="space-y-4">
{Array.isArray(recipeDetails.instructions) && recipeDetails.instructions.length > 0 ? (
recipeDetails.instructions.map((instruction, index) => (
<div key={index} className="flex gap-4 p-4 bg-gray-50 rounded-xl">
<div className="w-8 h-8 bg-emerald-500 text-white rounded-full flex items-center justify-center font-semibold text-sm flex-shrink-0">
{instruction.number || index + 1}
</div>
<div className="text-gray-800 leading-relaxed">
{instruction.step || instruction}
</div>
</div>
))
) : (
<div className="bg-gray-50 rounded-xl p-6">
<div className="text-gray-800 leading-relaxed">
{typeof recipeDetails.instructions === 'string'
? recipeDetails.instructions
: 'Instructions not available for this recipe.'
}
</div>
</div>
)}
</div>

{recipe.videoUrl && (
<div className="mt-6">
<a
href={recipe.videoUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors duration-200"
>
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
</svg>
Watch Video Tutorial
</a>
</div>
)}
</div>
)}
</>
)}
{/* existing recipeDetails rendering remains as is */}

@imkrishnasarathi imkrishnasarathi Oct 6, 2025

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The existing recipeDetails was removed from the application

...
</div>
</div>
</div>
);
};

export default RecipeModal;