118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
import { useParams } from "react-router-dom";
|
|
import { useState, useEffect } from "react";
|
|
import { getRecipeById } from "../services/frontendApi.js";
|
|
import { type Recipe, type Ingredient } from "../types/Recipe"
|
|
import StarRating from "../components/StarRating.tsx"
|
|
import { setDBStars } from "../services/frontendApi.js";
|
|
|
|
function RecipePage() {
|
|
const [recipe, setRecipe] = useState<Recipe>({
|
|
details: {},
|
|
ingredients: [],
|
|
steps: []
|
|
});
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const { id } = useParams();
|
|
const isWebSource = recipe && recipe.details && recipe.details.author
|
|
? /http|com/.test(recipe.details.author) //etc
|
|
: false;
|
|
const [stars, setStars] = useState<number>(0);
|
|
const [initialStars, setInitialStars] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
const loadRecipe = async () => {
|
|
try {
|
|
const recipe = await getRecipeById(id);
|
|
setRecipe(recipe);
|
|
setStars(recipe.details?.stars ?? 0)
|
|
setInitialStars(recipe.details?.stars ?? 0);
|
|
console.log(recipe)
|
|
} catch (error) {
|
|
console.log(error);
|
|
setError("Failed to load recipes...");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
loadRecipe();
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (initialStars === null || initialStars === stars) {
|
|
return;
|
|
}
|
|
|
|
const updateStarsInDB = async () => {
|
|
await setDBStars(id, stars);
|
|
};
|
|
|
|
updateStarsInDB();
|
|
}, [stars]);
|
|
return (
|
|
<div className="recipe page-outer">
|
|
|
|
{error && <div className="error-message">{error}</div>}
|
|
|
|
{loading ? (
|
|
<div className="loading">Loading...</div>
|
|
) : (
|
|
|
|
<div className="recipe-card">
|
|
<div className="border-b-2 border-amber-300 pb-4 mb-6">
|
|
<h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
|
|
<p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
|
|
<p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-6 mb-6">
|
|
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
|
|
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
|
|
Ingredients:
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{recipe.ingredients.map((ingredient: Ingredient, index) => (
|
|
<li key={index} className="text-gray-700 flex items-start">
|
|
<span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
|
<span className="font-medium text-left">{ingredient.raw}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
|
|
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
|
|
Instructions:
|
|
</h4>
|
|
<ol className="space-y-3">
|
|
{recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
|
|
<li key={stepNumber} className="text-gray-700 flex items-start">
|
|
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
|
|
{recipe.steps[parseInt(stepNumber)].step_number}
|
|
</span>
|
|
<span className="leading-relaxed text-left">{recipe.steps[parseInt(stepNumber)].instruction}</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t-2 border-amber-300 pt-4">
|
|
<div className="flex justify-between items-center text-sm text-amber-600">
|
|
{isWebSource ? (
|
|
<span>Source: {recipe.details.author}</span>
|
|
) : (
|
|
<span>From the kitchen of {recipe.details.author}</span>
|
|
)}
|
|
<span>
|
|
<StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RecipePage;
|