eknoor547/Assignment_4
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Worked on the latest Feedback

Browse source
This commit is contained in:
Eknoor Singh 2025-01-03 17:21:43 +05:30
parent f553241092
commit 1affdf6274
10 changed files with 324 additions and 336 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Filters/index.jsx
View file

@ -1,32 +1,32 @@
/* eslint-disable react/prop-types */
export const RecipeFilters = ({ filters, onFilterChange }) => (
<div className="filters-container">
<select value={filters?.diet}
onChange={(e) => onFilterChange('diet', e?.target?.value)}
<select
value={filters?.diet}
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>
<select value={filters?.cuisine}
onChange={(e) => onFilterChange('cuisine', e?.target?.value)}
<select
value={filters?.cuisine}
onChange={(e) => onFilterChange("cuisine", e?.target?.value)}
className="filter-select"
>
<option value="american">American</option>
<option value="italian">Italian</option>
<option value="indian">Indian</option>
<option value="mexican">Mexican</option>
</select>
<input type="number"
<input
type="number"
placeholder="Max cooking time (mins)"
value={filters?.maxTime}
onChange={(e) => onFilterChange('maxTime', e?.target?.value)}
onChange={(e) => onFilterChange("maxTime", e?.target?.value)}
className="filter-input"
/>
</div>

19
src/components/RecipeCard/index.jsx
View file

@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
import { Clock, Users } from 'lucide-react';
import { Clock, Users } from "lucide-react";
export const RecipeDetailsCard = ({ recipe, onClick }) => (
<div className="recipe-card" onClick={() => onClick(recipe)}>
@ -7,18 +7,15 @@ export const RecipeDetailsCard = ({ recipe, onClick }) => (
<div className="recipe-content">
<h3 className="recipe-title">{recipe?.title}</h3>
<div className="recipe-info">
<div className="info-item">
<Clock className="info-icon" />
{recipe?.readyInMinutes || '30'} mins
<div className="">
<Clock />
{recipe?.readyInMinutes || "N/A"} mins
</div>
<div className="info-item">
<Users className="info-icon" />
{recipe?.servings || '4'} servings
<div className="">
<Users />
{recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
servings
</div>
{console.log(recipe?.servings)}
</div>
</div>
</div>

36
src/components/RecipeDetails/index.jsx
View file

@ -1,36 +1,34 @@
/* eslint-disable react/no-unknown-property */
/* eslint-disable react/prop-types */
import { Clock, Users } from 'lucide-react';
import { useRecipeNutrition } from '../../hooks/useCalorieUnits';
import { closeIcon } from '../../svgIcons/svgIcons';
import { Clock, Users, BookOpen } from "lucide-react";
import { closeIcon } from "../../svgIcons/svgIcons";
export const RecipeDetails = ({ recipe, onClose }) => {
const { data: nutrition, isLoading } = useRecipeNutrition(recipe?.id);
return (
<div className="modal-overlay">
<div className="modal-content">
<button onClick={onClose} className="close-button">{closeIcon}</button>
<button onClick={onClose} className="close-button">
{closeIcon}
</button>
<h2 className="modal-title">{recipe?.title}</h2>
<img src={recipe?.image} alt={recipe?.title} className="modal-image" />
<div className="recipe-info">
<div className="info-item">
<Clock className="info-icon" />
{recipe?.readyInMinutes} mins
<Clock />
{recipe?.readyInMinutes || "N/A"} mins
</div>
<div className="info-item">
<Users className="info-icon" />
{recipe?.servings} servings
<Users />
{recipe?.servings || (recipe?.readyInMinutes > 30 ? "6" : "2")}{" "}
servings
</div>
{isLoading ? (
<div>Loading nutrition info...</div>
) : (
nutrition && (
<div className="info-item">
<span>Amount: {nutrition?.amount}</span>
<span>Units: {nutrition?.units}</span>
<div>
<span>
<BookOpen /> <b>Directions</b>
</span>
<br />
{recipe?.instructions || "N/A"}
</div>
)
)}
</div>
</div>
</div>

108
src/components/RecipeFinder.css
View file

@ -2,109 +2,104 @@
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}
}
.title {
.title {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem;
}
}
.search-container {
.search-container {
position: relative;
width: 100%;
max-width: 200px;
margin: 0 auto 1rem;
}
}
.search-input {
.search-input {
width: 100%;
padding: 1rem;
padding-left: 3rem;
padding: 1rem 1rem 1rem 3rem;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
}
}
.search-icon {
.search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #666;
}
}
.filters-container {
.filters-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
}
}
.filter-select,
.filter-input {
.filter-select,
.filter-input {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
}
.recipe-grid {
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
}
.recipe-card {
.recipe-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
}
.recipe-card:hover {
.recipe-card:hover {
transform: scale(1.03);
}
}
.recipe-image {
.recipe-image {
width: 100%;
height: 200px;
object-fit: cover;
}
}
.recipe-content {
.recipe-content {
padding: 1rem;
}
}
.recipe-title {
.recipe-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.recipe-info {
.recipe-info {
display: flex;
gap: 1rem;
font-size: 0.875rem;
color: #666;
}
}
.info-item {
.info-item {
display: flex;
align-items: center;
}
}
.info-icon {
margin-right: 0.25rem;
}
.modal-overlay {
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
@ -112,9 +107,9 @@
align-items: center;
justify-content: center;
padding: 1rem;
}
}
.modal-content {
.modal-content {
background: white;
border-radius: 8px;
max-width: 600px;
@ -123,9 +118,9 @@
overflow-y: auto;
padding: 1.5rem;
position: relative;
}
}
.close-button {
.close-button {
position: absolute;
right: 1rem;
top: 1rem;
@ -134,37 +129,32 @@
font-size: 1.5rem;
cursor: pointer;
color: #666;
}
}
.close-button:hover {
.close-button:hover {
color: #333;
}
}
.modal-title {
.modal-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
}
.modal-image {
.modal-image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}
}
.loading {
.loading,
.error {
text-align: center;
padding: 2rem;
}
}
.error {
.error {
color: #dc2626;
text-align: center;
padding: 2rem;
}
.filters-section{
align-items: center;
}
}

46
src/components/RecipeFinder.jsx
View file

@ -1,34 +1,33 @@
import { useReducer } from 'react';
import { RecipeSearchBar } from '../components/SearchBar/index';
import { RecipeFilters } from '../components/Filters/index';
import { RecipeGrid } from '../components/RecipeGrid/index';
import { RecipeDetails } from '../components/RecipeDetails/index';
import { useRecipes } from '../hooks/useRecipe';
import { initialState, recipeReducer } from '../store/RecipeStore';
import '../components/RecipeFinder.css';
import { useReducer } from "react";
import { RecipeSearchBar } from "../components/SearchBar/index";
import { RecipeFilters } from "../components/Filters/index";
import { RecipeGrid } from "../components/RecipeGrid/index";
import { RecipeDetails } from "../components/RecipeDetails/index";
import { useDetailedRecipes } from "../hooks/useRecipe";
import { initialState, recipeReducer } from "../store/RecipeStore";
import "../components/RecipeFinder.css";
export const RecipeFinder = () => {
const [state, dispatch] = useReducer(recipeReducer, initialState);
const { data: recipes, isLoading, error } = useRecipes(
state?.searchQuery,
state?.filters
);
const {
data: recipes,
isLoading,
error,
} = useDetailedRecipes(state?.searchQuery, state?.filters);
const handleSearch = (query) => {
dispatch({ type: 'SET_SEARCH', payload: query });
dispatch({ type: "SET_SEARCH", payload: query });
};
const handleFilterChange = (field, value) => {
dispatch({ type: 'SET_FILTER', field, payload: value });
dispatch({ type: "SET_FILTER", field, payload: value });
};
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 (
<div className="container">
@ -36,18 +35,23 @@ export const RecipeFinder = () => {
<h1 className="title">Recipe Finder</h1>
<div className="filters-section">
<RecipeSearchBar onSearch={handleSearch} />
<RecipeFilters filters={state?.filters} onFilterChange={handleFilterChange} />
<RecipeFilters
filters={state?.filters}
onFilterChange={handleFilterChange}
/>
</div>
{isLoading ? (
<div className="loading">Loading recipes...</div>
):(
) : (
<RecipeGrid recipes={recipes} onRecipeClick={handleRecipeClick} />
)}
{state?.selectedRecipe && (
<RecipeDetails
recipe={state?.selectedRecipe}
onClose={() => dispatch({ type: 'SET_SELECTED_RECIPE', payload: null })}
onClose={() =>
dispatch({ type: "SET_SELECTED_RECIPE", payload: null })
}
/>
)}
</div>

2
src/components/RecipeGrid/index.jsx
View file

@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
import { RecipeDetailsCard } from '../RecipeCard/index';
import { RecipeDetailsCard } from "../RecipeCard/index";
export const RecipeGrid = ({ recipes, onRecipeClick }) => (
<div className="recipe-grid">

2
src/components/SearchBar/index.jsx
View file

@ -1,5 +1,5 @@
/* eslint-disable react/prop-types */
import { Search } from 'lucide-react';
import { Search } from "lucide-react";
export const RecipeSearchBar = ({ onSearch }) => (
<div className="search-container">

9
src/components/apiUtils/allApi.js Normal file
View 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();
};

17
src/hooks/useCalorieUnits.js
View file

@ -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,
});
};

21
src/hooks/useRecipe.js
View file

@ -1,11 +1,13 @@
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({
queryKey: ['recipes', searchQuery, filters],
queryKey: ["detailedRecipes", searchQuery, filters],
queryFn: async () => {
const params = new URLSearchParams({
apiKey: 'a2f1ea26b02d4919b35c7152b5ebac6d',
apiKey: "2bed23978b4d417081acee70da2f9f5f",
query: searchQuery,
cuisine: filters?.cuisine,
...(filters?.diet && { diet: filters?.diet }),
@ -13,10 +15,15 @@ export const useRecipes = (searchQuery, filters) => {
});
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();
return data?.results;
const { results } = await response?.json();
const detailedRecipes = await Promise?.all(
results?.map((recipe) => fetchRecipeDetails(recipe?.id))
);
return detailedRecipes;
},
enabled: true,
});