diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index deea50b..08822dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 534ffdd..77610b9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Filters/index.jsx b/src/components/Filters/index.jsx index 13b2d29..f49132e 100644 --- a/src/components/Filters/index.jsx +++ b/src/components/Filters/index.jsx @@ -1,8 +1,8 @@ /* eslint-disable react/prop-types */ -export const Filters = ({ filters, onFilterChange }) => ( +export const RecipeFilters = ({ filters, onFilterChange }) => (
- onFilterChange('diet', e?.target?.value)} className="filter-select" > @@ -13,8 +13,8 @@ export const Filters = ({ filters, onFilterChange }) => ( - onFilterChange('cuisine', e?.target?.value)} className="filter-select" > @@ -25,8 +25,8 @@ export const Filters = ({ filters, onFilterChange }) => ( onFilterChange('maxTime', e.target.value)} + value={filters?.maxTime} + onChange={(e) => onFilterChange('maxTime', e?.target?.value)} className="filter-input" />
diff --git a/src/components/RecipeCard/index.jsx b/src/components/RecipeCard/index.jsx index c27362b..78ea376 100644 --- a/src/components/RecipeCard/index.jsx +++ b/src/components/RecipeCard/index.jsx @@ -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 }) => (
onClick(recipe)}> - {recipe.title} + {recipe?.title}
-

{recipe.title}

+

{recipe?.title}

- {recipe.readyInMinutes || '30'} mins + {recipe?.readyInMinutes || '30'} mins
- {recipe.servings || '4'} servings + {recipe?.servings || '4'} servings
- {console.log(recipe.servings)} + {console.log(recipe?.servings)} diff --git a/src/components/RecipeDetails/index.jsx b/src/components/RecipeDetails/index.jsx index a3cdef3..c18cd3e 100644 --- a/src/components/RecipeDetails/index.jsx +++ b/src/components/RecipeDetails/index.jsx @@ -10,24 +10,24 @@ export const RecipeDetails = ({ recipe, onClose }) => {
-

{recipe.title}

- {recipe.title} +

{recipe?.title}

+ {recipe?.title}
- {recipe.readyInMinutes} mins + {recipe?.readyInMinutes} mins
- {recipe.servings} servings + {recipe?.servings} servings
{isLoading ? (
Loading nutrition info...
) : ( nutrition && (
- Amount: {nutrition.amount} - Units: {nutrition.units} + Amount: {nutrition?.amount} + Units: {nutrition?.units}
) )} diff --git a/src/components/RecipeFinder.jsx b/src/components/RecipeFinder.jsx index eba871c..9c4fe4f 100644 --- a/src/components/RecipeFinder.jsx +++ b/src/components/RecipeFinder.jsx @@ -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 = () => {

Assignment 4

Recipe Finder

- - + +
{isLoading ? (
Loading recipes...
@@ -44,9 +44,9 @@ export const RecipeFinder = () => { )} - {state.selectedRecipe && ( + {state?.selectedRecipe && ( dispatch({ type: 'SET_SELECTED_RECIPE', payload: null })} /> )} diff --git a/src/components/RecipeGrid/index.jsx b/src/components/RecipeGrid/index.jsx index 3f90e97..f66cdb4 100644 --- a/src/components/RecipeGrid/index.jsx +++ b/src/components/RecipeGrid/index.jsx @@ -1,11 +1,11 @@ /* eslint-disable react/prop-types */ -import { RecipeCard } from '../RecipeCard/index'; +import { RecipeDetailsCard } from '../RecipeCard/index'; export const RecipeGrid = ({ recipes, onRecipeClick }) => (
{recipes?.map((recipe) => ( - onRecipeClick(recipe)} /> diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx index 5de7f2b..6739e08 100644 --- a/src/components/SearchBar/index.jsx +++ b/src/components/SearchBar/index.jsx @@ -1,12 +1,12 @@ /* eslint-disable react/prop-types */ import { Search } from 'lucide-react'; -export const SearchBar = ({ onSearch }) => ( +export const RecipeSearchBar = ({ onSearch }) => (
onSearch(e.target.value)} + onChange={(e) => onSearch(e?.target?.value)} className="search-input" /> diff --git a/src/hooks/useCalorieUnits.js b/src/hooks/useCalorieUnits.js index fa7eaa5..85a9aea 100644 --- a/src/hooks/useCalorieUnits.js +++ b/src/hooks/useCalorieUnits.js @@ -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, }); diff --git a/src/hooks/useRecipe.js b/src/hooks/useRecipe.js index 49f3e2a..b01915e 100644 --- a/src/hooks/useRecipe.js +++ b/src/hooks/useRecipe.js @@ -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, }); diff --git a/src/store/RecipeStore.js b/src/store/RecipeStore.js index b8940af..ff036d1 100644 --- a/src/store/RecipeStore.js +++ b/src/store/RecipeStore.js @@ -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; }