diff --git a/src/pages/recipe/Recipe.js b/src/pages/recipe/Recipe.js
index 9aca92e539af88f89eda6e47d23d88e6fcaba9cc..ed6ad5cc8fc9c10a6e06b537d80e21ea521b852f 100644
--- a/src/pages/recipe/Recipe.js
+++ b/src/pages/recipe/Recipe.js
@@ -1,31 +1,31 @@
import React, { useEffect, useState } from 'react'
import { useParams } from "react-router-dom"
-import axios from "axios"
import { Container, Typography } from '@mui/material';
import parse from 'html-react-parser';
+var axios = require("axios").default;
function Recipe() {
const { id } = useParams();
- const [ data, setData ] = useState([]);
+ const [data, setData] = useState([]);
useEffect(() => {
- const params = new URLSearchParams({
- apiKey: "4ce04e457c8348cfaec8ee0c7100b2f8",
- includeNutrition: true
- })
- let base_url = `https://api.spoonacular.com/recipes/${id}/information`
- let url = base_url + "?" + params.toString()
-
- let resp = axios({
- url: url,
- method: "get",
+ var options = {
+ method: 'GET',
+ url: `https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/${id}/information`,
+ params: { includeNutrition: 'true' },
headers: {
- "Content-Type": "application/json"
+ 'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com',
+ 'x-rapidapi-key': '9488865383msh30a38be9ec16e99p109d9bjsn9090d29ce12f'
}
- })
-
- resp.then(r => setData(r.data));
+ };
+
+ axios.request(options).then(function (response) {
+ setData(response.data);
+ }).catch(function (error) {
+ console.error(error);
+ });
+
}, []) // eslint-disable-line react-hooks/exhaustive-deps
let body = <Typography variant="p">Loading...</Typography>;
@@ -33,19 +33,19 @@ function Recipe() {
let pattern = /<.+>/;
if (pattern.test(data.instructions)) {
body = parse(data.instructions)
- } else if (data.instructions === "" || data.instructions === null){
+ } else if (data.instructions === "" || data.instructions === null) {
body = <Typography variant="p">No instructions :(</Typography>
}
- else {
+ else {
body = <Typography variant="p">{data.instructions}</Typography>;
}
}
-
+
return (
<Container maxWidth="sm">
<Typography
variant="h3"
- sx = {{
+ sx={{
mt: 9,
mb: 6
}}
diff --git a/src/pages/results/Results.js b/src/pages/results/Results.js
index 238e3f48aa2128076935a7d4ac55d39ef9cdee31..7bce630380eaa20c2594ea31f3541d735b1e7ed1 100644
--- a/src/pages/results/Results.js
+++ b/src/pages/results/Results.js
@@ -1,7 +1,7 @@
import { Container, Typography } from '@mui/material'
-import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { useLocation, Link } from "react-router-dom"
+var axios = require("axios").default;
function Results() {
@@ -12,48 +12,47 @@ function Results() {
let ingredientNames = ""
location.state.items.forEach(ingredient => ingredientNames += ingredient + ",");
ingredientNames = ingredientNames.slice(0, -1); // remove the last comma
-
- const params = new URLSearchParams({
- apiKey: "4ce04e457c8348cfaec8ee0c7100b2f8",
- ingredients: ingredientNames
- })
-
- let base_url = "https://api.spoonacular.com/recipes/findByIngredients"
- let url = base_url + "?" + params.toString()
-
- let resp = axios({
- url: url,
- method: "get",
+ var options = {
+ method: 'GET',
+ url: 'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/findByIngredients',
+ params: {
+ ingredients: ingredientNames,
+ number: '10',
+ ignorePantry: 'true',
+ ranking: '2'
+ },
headers: {
- "Content-Type": "application/json"
+ 'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com',
+ 'x-rapidapi-key': '9488865383msh30a38be9ec16e99p109d9bjsn9090d29ce12f'
}
- })
-
- resp.then(r => {
- setRecipes(r.data);
- })
+ };
+ axios.request(options).then(function (response) {
+ setRecipes(response.data);
+ }).catch(function (error) {
+ console.error(error);
+ });
}, []) // eslint-disable-line react-hooks/exhaustive-deps
const recipeComponent = recipes.map(recipe =>
- <Link to={"/recipe/" + recipe.id} key={recipe.id}>
- <Typography
- variant="h5"
- key={recipe.id}
- sx = {{
- mb: 2
- }}
- >
- {recipe.title}
- </Typography>
- </Link>
+ <Link to={"/recipe/" + recipe.id} key={recipe.id}>
+ <Typography
+ variant="h5"
+ key={recipe.id}
+ sx={{
+ mb: 2
+ }}
+ >
+ {recipe.title}
+ </Typography>
+ </Link>
)
return (
<Container maxWidth="sm">
<Typography
- variant = "h2"
- sx = {{
+ variant="h2"
+ sx={{
mt: 13,
mb: 10
}}