Worked on the latest Feedback
This commit is contained in:
parent
f553241092
commit
1affdf6274
|
|
@ -1,33 +1,33 @@
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
export const RecipeFilters = ({ filters, onFilterChange }) => (
|
export const RecipeFilters = ({ filters, onFilterChange }) => (
|
||||||
<div className="filters-container">
|
<div className="filters-container">
|
||||||
<select value={filters?.diet}
|
<select
|
||||||
onChange={(e) => onFilterChange('diet', e?.target?.value)}
|
value={filters?.diet}
|
||||||
className="filter-select"
|
onChange={(e) => onFilterChange("diet", e?.target?.value)}
|
||||||
>
|
className="filter-select"
|
||||||
|
>
|
||||||
|
<option value="">All Diets</option>
|
||||||
|
<option value="vegetarian">Vegetarian</option>
|
||||||
|
<option value="vegan">Vegan</option>
|
||||||
|
<option value="gluten-free">Gluten Free</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<option value="">All Diets</option>
|
<select
|
||||||
<option value="vegetarian">Vegetarian</option>
|
value={filters?.cuisine}
|
||||||
<option value="vegan">Vegan</option>
|
onChange={(e) => onFilterChange("cuisine", e?.target?.value)}
|
||||||
<option value="gluten-free">Gluten Free</option>
|
className="filter-select"
|
||||||
</select>
|
>
|
||||||
|
<option value="american">American</option>
|
||||||
|
<option value="italian">Italian</option>
|
||||||
<select value={filters?.cuisine}
|
<option value="indian">Indian</option>
|
||||||
onChange={(e) => onFilterChange('cuisine', e?.target?.value)}
|
<option value="mexican">Mexican</option>
|
||||||
className="filter-select"
|
</select>
|
||||||
>
|
<input
|
||||||
|
type="number"
|
||||||
<option value="american">American</option>
|
placeholder="Max cooking time (mins)"
|
||||||
<option value="italian">Italian</option>
|
value={filters?.maxTime}
|
||||||
<option value="indian">Indian</option>
|
onChange={(e) => onFilterChange("maxTime", e?.target?.value)}
|
||||||
<option value="mexican">Mexican</option>
|
className="filter-input"
|
||||||
</select>
|
/>
|
||||||
<input type="number"
|
</div>
|
||||||
placeholder="Max cooking time (mins)"
|
|
||||||
value={filters?.maxTime}
|
|
||||||
onChange={(e) => onFilterChange('maxTime', e?.target?.value)}
|
|
||||||
className="filter-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
import { Clock, Users } from 'lucide-react';
|
import { Clock, Users } from "lucide-react";
|
||||||
|
|
||||||
export const RecipeDetailsCard = ({ recipe, onClick }) => (
|
export const RecipeDetailsCard = ({ recipe, onClick }) => (
|
||||||
<div className="recipe-card" onClick={() => onClick(recipe)}>
|
<div className="recipe-card" onClick={() => onClick(recipe)}>
|
||||||
|
|
@ -7,18 +7,15 @@ export const RecipeDetailsCard = ({ recipe, onClick }) => (
|
||||||
<div className="recipe-content">
|
<div className="recipe-content">
|
||||||
<h3 className="recipe-title">{recipe?.title}</h3>
|
<h3 className="recipe-title">{recipe?.title}</h3>
|
||||||
<div className="recipe-info">
|
<div className="recipe-info">
|
||||||
<div className="info-item">
|
<div className="">
|
||||||
<Clock className="info-icon" />
|
<Clock />
|
||||||
{recipe?.readyInMinutes || '30'} mins
|
{recipe?.readyInMinutes || "N/A"} mins
|
||||||
</div>
|
</div>
|
||||||
<div className="info-item">
|
<div className="">
|
||||||
<Users className="info-icon" />
|
<Users />
|
||||||
{recipe?.servings || '4'} servings
|
{recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
|
||||||
|
servings
|
||||||
</div>
|
</div>
|
||||||
{console.log(recipe?.servings)}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,36 @@
|
||||||
|
/* eslint-disable react/no-unknown-property */
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
import { Clock, Users } from 'lucide-react';
|
import { Clock, Users, BookOpen } from "lucide-react";
|
||||||
import { useRecipeNutrition } from '../../hooks/useCalorieUnits';
|
import { closeIcon } from "../../svgIcons/svgIcons";
|
||||||
import { closeIcon } from '../../svgIcons/svgIcons';
|
|
||||||
|
|
||||||
export const RecipeDetails = ({ recipe, onClose }) => {
|
export const RecipeDetails = ({ recipe, onClose }) => {
|
||||||
const { data: nutrition, isLoading } = useRecipeNutrition(recipe?.id);
|
return (
|
||||||
|
<div className="modal-overlay">
|
||||||
return (
|
<div className="modal-content">
|
||||||
<div className="modal-overlay">
|
<button onClick={onClose} className="close-button">
|
||||||
<div className="modal-content">
|
{closeIcon}
|
||||||
<button onClick={onClose} className="close-button">{closeIcon}</button>
|
</button>
|
||||||
<h2 className="modal-title">{recipe?.title}</h2>
|
<h2 className="modal-title">{recipe?.title}</h2>
|
||||||
<img src={recipe?.image} alt={recipe?.title} className="modal-image" />
|
<img src={recipe?.image} alt={recipe?.title} className="modal-image" />
|
||||||
<div className="recipe-info">
|
<div className="recipe-info">
|
||||||
<div className="info-item">
|
<div className="info-item">
|
||||||
<Clock className="info-icon" />
|
<Clock />
|
||||||
{recipe?.readyInMinutes} mins
|
{recipe?.readyInMinutes || "N/A"} mins
|
||||||
</div>
|
</div>
|
||||||
<div className="info-item">
|
<div className="info-item">
|
||||||
<Users className="info-icon" />
|
<Users />
|
||||||
{recipe?.servings} servings
|
{recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
|
||||||
</div>
|
servings
|
||||||
{isLoading ? (
|
</div>
|
||||||
<div>Loading nutrition info...</div>
|
<div>
|
||||||
) : (
|
<span>
|
||||||
nutrition && (
|
<BookOpen /> <b>Directions</b>
|
||||||
<div className="info-item">
|
</span>
|
||||||
<span>Amount: {nutrition?.amount}</span>
|
<br />
|
||||||
<span>Units: {nutrition?.units}</span>
|
{recipe?.instructions || "N/A"}
|
||||||
</div>
|
</div>
|
||||||
)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,170 +1,160 @@
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
max-width: 200px;
|
||||||
max-width: 200px;
|
margin: 0 auto 1rem;
|
||||||
margin: 0 auto 1rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1rem;
|
padding: 1rem 1rem 1rem 3rem;
|
||||||
padding-left: 3rem;
|
border: 1px solid #ccc;
|
||||||
border: 1px solid #ccc;
|
border-radius: 8px;
|
||||||
border-radius: 8px;
|
font-size: 1rem;
|
||||||
font-size: 1rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-container {
|
.filters-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
margin-bottom: 2rem;
|
justify-content: center;
|
||||||
}
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-select,
|
.filter-select,
|
||||||
.filter-input {
|
.filter-input {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-grid {
|
.recipe-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-card {
|
.recipe-card {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-card:hover {
|
.recipe-card:hover {
|
||||||
transform: scale(1.03);
|
transform: scale(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-image {
|
.recipe-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-content {
|
.recipe-content {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-title {
|
.recipe-title {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipe-info {
|
.recipe-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-item {
|
.info-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-icon {
|
.modal-overlay {
|
||||||
margin-right: 0.25rem;
|
position: fixed;
|
||||||
}
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-overlay {
|
.modal-content {
|
||||||
position: fixed;
|
background: white;
|
||||||
inset: 0;
|
border-radius: 8px;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
max-width: 600px;
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
max-height: 90vh;
|
||||||
justify-content: center;
|
overflow-y: auto;
|
||||||
padding: 1rem;
|
padding: 1.5rem;
|
||||||
}
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-content {
|
.close-button {
|
||||||
background: white;
|
position: absolute;
|
||||||
border-radius: 8px;
|
right: 1rem;
|
||||||
max-width: 600px;
|
top: 1rem;
|
||||||
width: 100%;
|
background: none;
|
||||||
max-height: 90vh;
|
border: none;
|
||||||
overflow-y: auto;
|
font-size: 1.5rem;
|
||||||
padding: 1.5rem;
|
cursor: pointer;
|
||||||
position: relative;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-button {
|
.close-button:hover {
|
||||||
position: absolute;
|
color: #333;
|
||||||
right: 1rem;
|
}
|
||||||
top: 1rem;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button:hover {
|
.modal-title {
|
||||||
color: #333;
|
font-size: 1.5rem;
|
||||||
}
|
font-weight: bold;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-title {
|
.modal-image {
|
||||||
font-size: 1.5rem;
|
width: 100%;
|
||||||
font-weight: bold;
|
height: 300px;
|
||||||
margin-bottom: 1rem;
|
object-fit: cover;
|
||||||
}
|
border-radius: 8px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-image {
|
.loading,
|
||||||
width: 100%;
|
.error {
|
||||||
height: 300px;
|
text-align: center;
|
||||||
object-fit: cover;
|
padding: 2rem;
|
||||||
border-radius: 8px;
|
}
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
.error {
|
||||||
text-align: center;
|
color: #dc2626;
|
||||||
padding: 2rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
color: #dc2626;
|
|
||||||
text-align: center;
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-section{
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,59 @@
|
||||||
import { useReducer } from 'react';
|
import { useReducer } from "react";
|
||||||
import { RecipeSearchBar } from '../components/SearchBar/index';
|
import { RecipeSearchBar } from "../components/SearchBar/index";
|
||||||
import { RecipeFilters } from '../components/Filters/index';
|
import { RecipeFilters } from "../components/Filters/index";
|
||||||
import { RecipeGrid } from '../components/RecipeGrid/index';
|
import { RecipeGrid } from "../components/RecipeGrid/index";
|
||||||
import { RecipeDetails } from '../components/RecipeDetails/index';
|
import { RecipeDetails } from "../components/RecipeDetails/index";
|
||||||
import { useRecipes } from '../hooks/useRecipe';
|
import { useDetailedRecipes } from "../hooks/useRecipe";
|
||||||
import { initialState, recipeReducer } from '../store/RecipeStore';
|
import { initialState, recipeReducer } from "../store/RecipeStore";
|
||||||
import '../components/RecipeFinder.css';
|
import "../components/RecipeFinder.css";
|
||||||
|
|
||||||
export const RecipeFinder = () => {
|
export const RecipeFinder = () => {
|
||||||
const [state, dispatch] = useReducer(recipeReducer, initialState);
|
const [state, dispatch] = useReducer(recipeReducer, initialState);
|
||||||
const { data: recipes, isLoading, error } = useRecipes(
|
const {
|
||||||
state?.searchQuery,
|
data: recipes,
|
||||||
state?.filters
|
isLoading,
|
||||||
);
|
error,
|
||||||
|
} = useDetailedRecipes(state?.searchQuery, state?.filters);
|
||||||
|
|
||||||
const handleSearch = (query) => {
|
const handleSearch = (query) => {
|
||||||
dispatch({ type: 'SET_SEARCH', payload: query });
|
dispatch({ type: "SET_SEARCH", payload: query });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFilterChange = (field, value) => {
|
const handleFilterChange = (field, value) => {
|
||||||
dispatch({ type: 'SET_FILTER', field, payload: value });
|
dispatch({ type: "SET_FILTER", field, payload: value });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRecipeClick = (recipe) => {
|
const handleRecipeClick = (recipe) => {
|
||||||
console.log("Recipe clicked:", recipe);
|
dispatch({ type: "SET_SELECTED_RECIPE", payload: recipe });
|
||||||
dispatch({ type: 'SET_SELECTED_RECIPE', payload: recipe });
|
};
|
||||||
};
|
|
||||||
|
|
||||||
if (error) return <div className="error">Error loading recipes</div>
|
|
||||||
|
|
||||||
|
if (error) return <div className="error">Error loading recipes</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<h3 className="title">Assignment 4</h3>
|
<h3 className="title">Assignment 4</h3>
|
||||||
<h1 className="title">Recipe Finder</h1>
|
<h1 className="title">Recipe Finder</h1>
|
||||||
<div className="filters-section">
|
<div className="filters-section">
|
||||||
<RecipeSearchBar onSearch={handleSearch} />
|
<RecipeSearchBar onSearch={handleSearch} />
|
||||||
<RecipeFilters filters={state?.filters} onFilterChange={handleFilterChange} />
|
<RecipeFilters
|
||||||
</div>
|
filters={state?.filters}
|
||||||
{isLoading ? (
|
onFilterChange={handleFilterChange}
|
||||||
<div className="loading">Loading recipes...</div>
|
/>
|
||||||
):(
|
</div>
|
||||||
<RecipeGrid recipes={recipes} onRecipeClick={handleRecipeClick} />
|
{isLoading ? (
|
||||||
)}
|
<div className="loading">Loading recipes...</div>
|
||||||
|
) : (
|
||||||
|
<RecipeGrid recipes={recipes} onRecipeClick={handleRecipeClick} />
|
||||||
|
)}
|
||||||
|
|
||||||
{state?.selectedRecipe && (
|
{state?.selectedRecipe && (
|
||||||
<RecipeDetails
|
<RecipeDetails
|
||||||
recipe={state?.selectedRecipe}
|
recipe={state?.selectedRecipe}
|
||||||
onClose={() => dispatch({ type: 'SET_SELECTED_RECIPE', payload: null })}
|
onClose={() =>
|
||||||
/>
|
dispatch({ type: "SET_SELECTED_RECIPE", payload: null })
|
||||||
)}
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
import { RecipeDetailsCard } from '../RecipeCard/index';
|
import { RecipeDetailsCard } from "../RecipeCard/index";
|
||||||
|
|
||||||
export const RecipeGrid = ({ recipes, onRecipeClick }) => (
|
export const RecipeGrid = ({ recipes, onRecipeClick }) => (
|
||||||
<div className="recipe-grid">
|
<div className="recipe-grid">
|
||||||
{recipes?.map((recipe) => (
|
{recipes?.map((recipe) => (
|
||||||
<RecipeDetailsCard
|
<RecipeDetailsCard
|
||||||
key={recipe?.id}
|
key={recipe?.id}
|
||||||
recipe={recipe}
|
recipe={recipe}
|
||||||
onClick={() => onRecipeClick(recipe)}
|
onClick={() => onRecipeClick(recipe)}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
import { Search } from 'lucide-react';
|
import { Search } from "lucide-react";
|
||||||
|
|
||||||
export const RecipeSearchBar = ({ onSearch }) => (
|
export const RecipeSearchBar = ({ onSearch }) => (
|
||||||
<div className="search-container">
|
<div className="search-container">
|
||||||
|
|
|
||||||
9
src/components/apiUtils/allApi.js
Normal file
9
src/components/apiUtils/allApi.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export const fetchRecipeDetails = async (id) => {
|
||||||
|
const response = await fetch(
|
||||||
|
`https://api.spoonacular.com/recipes/${id}/information?includeNutrition=false&apiKey=2bed23978b4d417081acee70da2f9f5f`
|
||||||
|
);
|
||||||
|
if (!response?.ok) {
|
||||||
|
throw new Error("Failed to fetch recipe details");
|
||||||
|
}
|
||||||
|
return await response?.json();
|
||||||
|
};
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
export const useRecipeNutrition = (recipeId) => {
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ['recipeNutrition', recipeId],
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await fetch(
|
|
||||||
`https://api.spoonacular.com/recipes/${recipeId}/nutritionWidget.json?apiKey=a2f1ea26b02d4919b35c7152b5ebac6d`
|
|
||||||
);
|
|
||||||
if (!response?.ok) {
|
|
||||||
throw new Error("Failed to fetch nutrition data");
|
|
||||||
}
|
|
||||||
return response?.json();
|
|
||||||
},
|
|
||||||
enabled: !!recipeId,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
@ -1,23 +1,30 @@
|
||||||
import { useQuery } from '@tanstack/react-query';
|
/* eslint-disable no-unsafe-optional-chaining */
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { fetchRecipeDetails } from "../components/apiUtils/allApi";
|
||||||
|
|
||||||
export const useRecipes = (searchQuery, filters) => {
|
export const useDetailedRecipes = (searchQuery, filters) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey: ['recipes', searchQuery, filters],
|
queryKey: ["detailedRecipes", searchQuery, filters],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const params = new URLSearchParams({
|
const params = new URLSearchParams({
|
||||||
apiKey: 'a2f1ea26b02d4919b35c7152b5ebac6d',
|
apiKey: "2bed23978b4d417081acee70da2f9f5f",
|
||||||
query: searchQuery,
|
query: searchQuery,
|
||||||
cuisine: filters?.cuisine,
|
cuisine: filters?.cuisine,
|
||||||
...(filters?.diet && { diet: filters?.diet }),
|
...(filters?.diet && { diet: filters?.diet }),
|
||||||
...(filters?.maxTime && { maxReadyTime: filters?.maxTime }),
|
...(filters?.maxTime && { maxReadyTime: filters?.maxTime }),
|
||||||
});
|
});
|
||||||
|
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`https://api.spoonacular.com/recipes/complexSearch?${params}&_start=0&_limit=100`
|
`https://api.spoonacular.com/recipes/complexSearch?${params}`
|
||||||
);
|
);
|
||||||
const data = await response?.json();
|
const { results } = await response?.json();
|
||||||
return data?.results;
|
|
||||||
},
|
const detailedRecipes = await Promise?.all(
|
||||||
enabled: true,
|
results?.map((recipe) => fetchRecipeDetails(recipe?.id))
|
||||||
});
|
);
|
||||||
|
|
||||||
|
return detailedRecipes;
|
||||||
|
},
|
||||||
|
enabled: true,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
Loading…
Reference in a new issue