Merge pull request #79 from chingu-voyages/CH-97-bad-request-error-fr…

…om-fetch-recipe-by-id

Ch 97 bad request error from fetch recipe by Id

src/api/recipes.js

@@ -40,3 +40,23 @@ export async function fetchRecipes(search, from = 0, size = 20) {
     console.error(error);
   }
 }
+
+export async function fetchRecipeDetails(id) {
+  console.log(`Fetching ${id} recipe details`);
+  try {
+    const { data } = await axios.get(
+      `https://tasty.p.rapidapi.com/recipes/get-more-info`,
+      {
+        headers: {
+          "X-RapidAPI-Key": import.meta.env.VITE_TASTY_API_KEY,
+          "X-RapidAPI-Host": "tasty.p.rapidapi.com",
+        },
+        params: { id },
+      },
+    );
+    console.log("fetched Details", data);
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+}

src/features/recipes/api/fetch-recipe-by-id.js

@@ -1,9 +1,10 @@
-import { fetchRecipes } from "@/api/recipes";
+import { fetchRecipeDetails } from "@/api/recipes";
 import { useQuery } from "@tanstack/react-query";
 
-export function FetchRecipeById(id) {
+export function FetchRecipeDetailsById(id) {
+  console.log("recipes/api", id);
   const search = "id:" + id;
-  return useQuery(["search", search], () => fetchRecipes(search), {
-    enabled: !!search,
+  return useQuery(["search", search], () => fetchRecipeDetails(id), {
+    enabled: !!id,
   });
 }

src/pages/RecipeDetails.jsx

@@ -1,29 +1,22 @@
 import { useParams } from "react-router-dom";
 import { useSessionStorage } from "@/features/recipes/hooks";
 import { Heading, LoadingState } from "@/features/ui";
-import { FetchRecipeById } from "@/features/recipes/api";
+import { FetchRecipeDetailsById } from "@/features/recipes/api";
 import RecipeDetails from "@/features/recipes/components/recipe-details/RecipeDetails";
 
 const RecipesDetailPage = () => {
-  let { recipeId } = useParams();
-
+  const { recipeId } = useParams();
   const [cachedRecipesList] = useSessionStorage("recipes", []);
-  console.log(cachedRecipesList);
 
   // Attempt to retrieve recipe from session storage.
-  const cachedRecipe = cachedRecipesList.results?.find(
-    (recipe) => recipe.id === recipeId,
+  let recipe = cachedRecipesList.results.filter(
+    (result) => result.id === +recipeId,
   );
 
-  let recipe = {};
-  let query = null;
-
-  if (cachedRecipe) recipe = cachedRecipe;
-  else query = `id:${recipeId}`;
-
-  const { data, isLoading, isError, error } = FetchRecipeById(query);
-
-  if (data) recipe = data.results[0];
+  // Call API to fetch recipe details if not found in cache.
+  const { data, isLoading, isError, error } = recipe
+    ? { data: recipe[0], isLoading: false, isError: false, error: null }
+    : FetchRecipeDetailsById(recipeId);
 
   // Quit gracefully if no id is available
   if (!recipeId) {
@@ -44,7 +37,7 @@ const RecipesDetailPage = () => {
     return <div>Error: {error}</div>;
   }
 
-  return <RecipeDetails recipe={recipe} />;
+  return <RecipeDetails recipe={data} />;
 };
 
 export default RecipesDetailPage;