Latest Changes #1
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
100
package-lock.json
generated
100
package-lock.json
generated
|
|
@ -9,7 +9,6 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.62.11",
|
||||
"axios": "^1.7.9",
|
||||
"lucide-react": "^0.469.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
|
@ -1618,12 +1617,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
|
|
@ -1640,17 +1633,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.7.9",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
|
||||
"integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
|
|
@ -1843,18 +1825,6 @@
|
|||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
|
|
@ -2005,15 +1975,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-node": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
|
||||
|
|
@ -2569,26 +2530,6 @@
|
|||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.9",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
|
||||
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
|
|
@ -2599,20 +2540,6 @@
|
|||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
|
||||
"integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
|
|
@ -3553,27 +3480,6 @@
|
|||
"integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -3942,12 +3848,6 @@
|
|||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@tanstack/react-query": "^5.62.11",
|
||||
"axios": "^1.7.9",
|
||||
"lucide-react": "^0.469.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
export const Filters = ({ filters, onFilterChange }) => (
|
||||
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"
|
||||
>
|
||||
|
||||
|
|
@ -13,8 +13,8 @@ export const Filters = ({ filters, onFilterChange }) => (
|
|||
</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"
|
||||
>
|
||||
|
||||
|
|
@ -25,8 +25,8 @@ export const Filters = ({ filters, onFilterChange }) => (
|
|||
</select>
|
||||
<input type="number"
|
||||
placeholder="Max cooking time (mins)"
|
||||
value={filters.maxTime}
|
||||
onChange={(e) => onFilterChange('maxTime', e.target.value)}
|
||||
value={filters?.maxTime}
|
||||
onChange={(e) => onFilterChange('maxTime', e?.target?.value)}
|
||||
className="filter-input"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import { Clock, Users } from 'lucide-react';
|
||||
|
||||
export const RecipeCard = ({ recipe, onClick }) => (
|
||||
export const RecipeDetailsCard = ({ recipe, onClick }) => (
|
||||
<div className="recipe-card" onClick={() => onClick(recipe)}>
|
||||
<img src={recipe.image} alt={recipe.title} className="recipe-image" />
|
||||
<img src={recipe?.image} alt={recipe?.title} className="recipe-image" />
|
||||
<div className="recipe-content">
|
||||
<h3 className="recipe-title">{recipe.title}</h3>
|
||||
<h3 className="recipe-title">{recipe?.title}</h3>
|
||||
<div className="recipe-info">
|
||||
<div className="info-item">
|
||||
<Clock className="info-icon" />
|
||||
{recipe.readyInMinutes || '30'} mins
|
||||
{recipe?.readyInMinutes || '30'} mins
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<Users className="info-icon" />
|
||||
{recipe.servings || '4'} servings
|
||||
{recipe?.servings || '4'} servings
|
||||
</div>
|
||||
{console.log(recipe.servings)}
|
||||
{console.log(recipe?.servings)}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,24 +10,24 @@ export const RecipeDetails = ({ recipe, onClose }) => {
|
|||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<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" />
|
||||
<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
|
||||
{recipe?.readyInMinutes} mins
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<Users className="info-icon" />
|
||||
{recipe.servings} servings
|
||||
{recipe?.servings} servings
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div>Loading nutrition info...</div>
|
||||
) : (
|
||||
nutrition && (
|
||||
<div className="info-item">
|
||||
<span>Amount: {nutrition.amount}</span>
|
||||
<span>Units: {nutrition.units}</span>
|
||||
<span>Amount: {nutrition?.amount}</span>
|
||||
<span>Units: {nutrition?.units}</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useReducer } from 'react';
|
||||
import { SearchBar } from '../components/SearchBar/index';
|
||||
import { Filters } from '../components/Filters/index';
|
||||
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';
|
||||
|
|
@ -10,8 +10,8 @@ import '../components/RecipeFinder.css';
|
|||
export const RecipeFinder = () => {
|
||||
const [state, dispatch] = useReducer(recipeReducer, initialState);
|
||||
const { data: recipes, isLoading, error } = useRecipes(
|
||||
state.searchQuery,
|
||||
state.filters
|
||||
state?.searchQuery,
|
||||
state?.filters
|
||||
);
|
||||
|
||||
const handleSearch = (query) => {
|
||||
|
|
@ -35,8 +35,8 @@ export const RecipeFinder = () => {
|
|||
<h3 className="title">Assignment 4</h3>
|
||||
<h1 className="title">Recipe Finder</h1>
|
||||
<div className="filters-section">
|
||||
<SearchBar onSearch={handleSearch} />
|
||||
<Filters filters={state.filters} onFilterChange={handleFilterChange} />
|
||||
<RecipeSearchBar onSearch={handleSearch} />
|
||||
<RecipeFilters filters={state?.filters} onFilterChange={handleFilterChange} />
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="loading">Loading recipes...</div>
|
||||
|
|
@ -44,9 +44,9 @@ export const RecipeFinder = () => {
|
|||
<RecipeGrid recipes={recipes} onRecipeClick={handleRecipeClick} />
|
||||
)}
|
||||
|
||||
{state.selectedRecipe && (
|
||||
{state?.selectedRecipe && (
|
||||
<RecipeDetails
|
||||
recipe={state.selectedRecipe}
|
||||
recipe={state?.selectedRecipe}
|
||||
onClose={() => dispatch({ type: 'SET_SELECTED_RECIPE', payload: null })}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import { RecipeCard } from '../RecipeCard/index';
|
||||
import { RecipeDetailsCard } from '../RecipeCard/index';
|
||||
|
||||
export const RecipeGrid = ({ recipes, onRecipeClick }) => (
|
||||
<div className="recipe-grid">
|
||||
{recipes?.map((recipe) => (
|
||||
<RecipeCard
|
||||
key={recipe.id}
|
||||
<RecipeDetailsCard
|
||||
key={recipe?.id}
|
||||
recipe={recipe}
|
||||
onClick={() => onRecipeClick(recipe)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
export const SearchBar = ({ onSearch }) => (
|
||||
export const RecipeSearchBar = ({ onSearch }) => (
|
||||
<div className="search-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search recipes..."
|
||||
onChange={(e) => onSearch(e.target.value)}
|
||||
onChange={(e) => onSearch(e?.target?.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
<Search className="search-icon" />
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ export const useRecipeNutrition = (recipeId) => {
|
|||
const response = await fetch(
|
||||
`https://api.spoonacular.com/recipes/${recipeId}/nutritionWidget.json?apiKey=a2f1ea26b02d4919b35c7152b5ebac6d`
|
||||
);
|
||||
if (!response.ok) {
|
||||
if (!response?.ok) {
|
||||
throw new Error("Failed to fetch nutrition data");
|
||||
}
|
||||
return response.json();
|
||||
return response?.json();
|
||||
},
|
||||
enabled: !!recipeId,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@ export const useRecipes = (searchQuery, filters) => {
|
|||
const params = new URLSearchParams({
|
||||
apiKey: 'a2f1ea26b02d4919b35c7152b5ebac6d',
|
||||
query: searchQuery,
|
||||
cuisine: filters.cuisine,
|
||||
...(filters.diet && { diet: filters.diet }),
|
||||
...(filters.maxTime && { maxReadyTime: filters.maxTime }),
|
||||
cuisine: filters?.cuisine,
|
||||
...(filters?.diet && { diet: filters?.diet }),
|
||||
...(filters?.maxTime && { maxReadyTime: filters?.maxTime }),
|
||||
});
|
||||
|
||||
const response = await fetch(
|
||||
`https://api.spoonacular.com/recipes/complexSearch?${params}&_start=0&_limit=100`
|
||||
);
|
||||
const data = await response.json();
|
||||
return data.results;
|
||||
const data = await response?.json();
|
||||
return data?.results;
|
||||
},
|
||||
enabled: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ export const initialState = {
|
|||
};
|
||||
|
||||
export const recipeReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
switch (action?.type) {
|
||||
case 'SET_SEARCH':
|
||||
return { ...state, searchQuery: action.payload };
|
||||
return { ...state, searchQuery: action?.payload };
|
||||
case 'SET_FILTER':
|
||||
return {
|
||||
...state, filters: { ...state.filter, [action.field]: action.payload },
|
||||
...state, filters: { ...state?.filter, [action?.field]: action?.payload },
|
||||
};
|
||||
case 'SET_SELECTED_RECIPE':
|
||||
return { ...state, selectedRecipe: action.payload };
|
||||
return { ...state, selectedRecipe: action?.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue